CSS display属性
非常重要。必须完全掌握。
1 问题
1）为什么我们会选择div作为布局容器？
2）为什么div、h1、p等标签：默认会自动换行？
3）为什么span等标签：默认不会换行，且设置width、height无效？
4）为什么input type="text"等标签默认：不会换行，设置width、height有效？
都是因为display属性。
2 关键属性值
display属性设置元素的显示方式。
常用属性值：
| display属性值 | 说明 |
|---|---|
| block | 块级元素。带有换行效果。 |
| inline-block | 内联-块级元素。不换行，可设置width、height。 |
| inline | 内联元素。靠内容自动撑开盒子，设置width、height无效。 |
3 查看元素默认display属性值
代码
<body>
<!-- 各元素的默认display值 -->
<div>div1</div>
<span>span1</span>
<input type="text">
</body>
F12打开开发者工具，查看样式默认值。
div的display值：block。
span的display值：inline。
<input type="text">的display值：inline-block。
3 修改display值测试效果
1）修改div的display为inline
<div style="display: inline;width: 100px;height: 60px;border: 1px solid #f00;">div1</div>
后续内容
div现在跟span默认的显示方式相同了：没有换行，设置width、height无效。
2）设置span的display为inline-block；
<span style="display: inline-block;width: 100px;height: 60px;border: 1px solid #f00;">
span1
</span>
后续内容
3）设置span的display为block；
<span style="display: block;border: 1px solid #f00;">span2</span>
后续内容
4 display实际运用
语法上，我们都可以修改任意标签的display属性；但尽量不要修改，以符合它们本身的逻辑。
实际项目的修改场景：
1）span标签display默认inline，需要设置width、height时，我们会修改display值为inline-block；
2）a链接标签display默认inline，根据场景会设置为inline-block或block。
3）div等标签display默认block，基本不会把它们改成inline、或inline-block。div我们是通过浮动设置让它不换行。
5 为什么选择div作为布局的容器标签
div本身display是block，也就是 行布局；
后续会继续学习div+浮动实现 列布局；
div的margin、padding默认为0；
div本身没有任何显示；
所以，div是最适合做布局的容器。
6 display其它常用属性值
| display属性 | 说明 |
|---|---|
| none | 隐藏元素，而且不再占有位置。 |
<div style="display: none;">div1</div>
后续内容
经常用于javascript与响应式布局，需要动态控制元素的显示与隐藏。
7 标签的display默认值
1）默认为block的常用标签
div、p、h1…h6、ol、ul、dl、table、form、等。
2）默认为inline-block的标签
img、input、button、select、textarea、等
3）默认为inline的标签
span、a、lable、i 、等。
img表面是inline,实质是inline-block。