今日学习进度：CSS布局
| 第一天 | 第二天 | 第三天 | 第四天 | 第五天 | |
| 所花时间（小时） | 4.5 | 6 | 3 | 5 | 3 |
| 代码量（行） | 1000 | 200 | 200 | 300 | 100 |
| 博客量（篇） | 1 | 1 | 1 | 1 | 1 |
| 了解到的知识点 |
python爬取热词分析 |
CSS边框属性 | CSS框模型 | CSS文本 | CSS布局 |
CSS 布局 - display 属性
display 属性是用于控制布局的最重要的 CSS 属性。
display 属性
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
块级元素（block element）
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
块级元素的一些例子：
- <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> 会发生问题。浏览器会将水平滚动条添加到页面。
在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要：
提示：请将浏览器窗口的大小调整为小于 500 像素，以查看两个 div 之间的区别！
这是上面两个 div 的例子：
实例
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
