2021.4.16

今日学习进度：CSS布局

	第一天	第二天	第三天	第四天	第五天
所花时间（小时）	4.5	6	3	5	3
代码量（行）	1000	200	200	300	100
博客量（篇）	1	1	1	1	1
了解到的知识点	python爬取热词分析	CSS边框属性	CSS框模型	CSS文本	CSS布局

CSS 布局 - display 属性

• CSS 表格
• CSS max-width

display 属性是用于控制布局的最重要的 CSS 属性。

display 属性

display 属性规定是否/如何显示元素。

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

点击显示面板

块级元素（block element）

块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。

这个 <div> 元素属于块级元素。

块级元素的一些例子：

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

行内元素（inline element）

内联元素不从新行开始，仅占用所需的宽度。

这是段落中的行内 <span> 元素。

行内元素的一些例子：

• <span>
• <a>
• <img>

Display: none;

display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。

默认情况下，<script> 元素使用 display: none;。

覆盖默认的 Display 值

如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。

将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

一个常见的例子是为实现水平菜单而生成行内的 <li> 元素：

实例

li {
  display: inline;
}

注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

下例将 <span> 元素显示为块元素：

实例

span {
  display: block;
}

下例将 <a> 元素显示为块元素：

实例

a {
  display: block;
}

隐藏元素 - display:none 还是 visibility:hidden？

display:none

删除

visibility:hidden

隐藏

Reset

重置所有

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：

实例

h1.hidden {
  display: none;
}

visibility:hidden; 也可以隐藏元素。

但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：

实例

h1.hidden {
  visibility: hidden;
}

CSS Display/Visibility 属性

属性	描述
display	指定应如何显示元素。
visibility	指定元素是否应该可见。

使用 width、max-width 和 margin: auto;

块级元素始终占用可用的全部宽度（尽可能向左和向右伸展）。

设置块级元素的 width 将防止其延伸到其容器的边缘。然后，您可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

这个 <div> 元素的宽度为 500px，外边距设置为 auto。

注意：当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。

在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要：

这个 <div> 元素的最大宽度为 500px，外边距设置为 auto。

提示：请将浏览器窗口的大小调整为小于 500 像素，以查看两个 div 之间的区别！

这是上面两个 div 的例子：

实例

div.ex1 {
   500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max- 500px;
  margin: auto;
  border: 3px solid #73AD21;
}