CSS的display属性
一.所有元素可以设置display属性
二.作用
设置元素使用的框（盒）模型的类型
三.取值
- none 这个元素不会显示，也不会占据页面空间
- block 设置这个元素为块元素
- inline 设置这个元素为行内元素（内联元素）
- inline-block 设置这个元素为行内块元素
简单的说一下框的类型不同有什么区别：
(i) block，块元素（以下块元素讨论的前提是，元素处于文档流中）
在文档流中，多个块元素自上而下排列，每个块元素会独占一行，也就是说，一个块元素后面会默认跟一个换行符。
<!-- 使用CSS分别设置了width，height以及背景颜色 -->
<body>
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
</body>
子块元素的width默认值为auto，也就是说，是处于文档流的父元素的宽度的100%
父块元素的height默认值处于文档流子元素的height，也就是说，“被处于文档流的子元素撑起来”
<body style="width:100px">
<div class="block" style="background-color: skyblue">
<div style="height: 100px">我是子元素，我撑起父元素</div>
</div>
</body>
(ii) inline，行内元素（内联元素） （以下内联元素讨论的前提是，元素处于文档流中）
文档流中，多个内联元素从左向右一次排开。（如果一行不足以容纳，则会换行）
<body>
<span style="background-color: skyblue">我是一个内联元素</span>
<span style="background-color: skyblue">我是一个内联元素</span>
<span style="background-color: skyblue">我是一个内联元素</span>
</body>
设置body的width，迫使内联元素换行
在文档流中，内联元素不能设置width和height，也就是说，内联元素的内容区的大小是内容决定的。
<body>
<span style="background-color: skyblue;
width: 100px;
height: 100px">
我是一个内联元素
</span>
</body>
可见，文档流中，内联元素不能设置width和height的大小。
(iii)inline-block （设置为inline-block不会脱离文档流）
内联块元素结合了内联元素和块元素的部分特点。
1. 可以设置width和height（块元素特点）
2. 如果不设置width和height，width不是默认与父元素width相同，而是“被子元素撑开”（内联元素特点）
3. 与内联元素在文档流中的排布一样，多个inline-block会在一行内从左向右排列。
所以，可以设置width和height；不会独占一行
span{
width: 100px;
height:100px;
display: inline-block;
}
<body>
<span style="background-color: greenyellow"></span>
<span style="background-color: skyblue"></span>
<span style="background-color: green"></span>
</body>
2230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
