CSS中的盒类型display——属性整理

CSS中的盒类型display，你了解多少呢？

在css中display属性用来定义元素的盒子类型。

尽管很多盒子类型我们并不常用，但是盒子类型display的值包含很多种：

• block
• inline-block
• inline
• list-item
• table相关
• run-in
• flex
• none

说到盒子类型，我们最常用的就是block 和inline。这两个分别是什么呢？

1、块级元素 block（默认值）

block属性值可以创建一个块级元素！

2、行内元素 inline

inline属性值可以创建一个行内元素！

常用的两种盒类型比较（块级元素和行内元素）：

块级元素的特点：

1、元素单独占一行。不论元素的相邻元素的宽度有多么的小，块级元素都会单独占一行。

在以前，如果我们非要块级元素在一行，我们往往都会采用浮动的方式，现在我们也可以利用其他的盒子类型，如行内块、伸缩盒。

2、块级元素可以设置元素的width、height、margin、top等等

行内元素的特点：

1、多个行内元素只要宽度之和小于容器的宽度，就可以排成一行！并且高度不一，由各自的高度决定。

2、行内元素的宽度和高度由自身的内容撑开，不饿能够为行内元素设置宽度和高度属性。

3、也不能够为行内元素设置上下方向的margin和padding属性。但是水平方向的边距是可以设置的哟。

3、两种盒类型的结合体：行内块元素 inline-block

inline-block属性值可以创建一个行内块元素！

行内块元素结合了行内元素和块级元素的特征：既可以像行内元素排在一行，又可以像块级元素设置宽高和边距。

让块级元素不再借助浮动就可以排成一排，让行内元素可以自由定义宽高边距。

行内块也会存在间隙的问题：

问题：行内块和行内块元素之间存在间隙问题！

造成原因：在编写html文档时，格式化的文档包含了换行符或者还有空白符，浏览器会将这些额外的字符合并成一个空白符。

解决办法：

办法1：在书写时不要格式化代码，比如两个span标签之间不要有空格和换行。

办法2：定义行内块的父元素的font-size为0。

办法3：定义行内块的父元素的letter-space为负数，然后行内块元素的letter-space为0，清除艰巨。

4、伸缩盒 flex

flex属性值可以创建一个伸缩盒元素！

伸缩盒元素是css3中新增的属性值，可以让普通的元素变成一个伸缩容器，可以方便的实现响应式。

当容器有剩余位置时，可以跟据比例来伸展元素，当容器容纳不下时，可以根据比例收缩元素。

除此之外，还可以对元素的展示位置或者说方式进行调整。

伸缩盒需要搭配其他的属性来实现，所以我们将会抽出一篇专门讲解伸缩盒布局！

5、隐藏元素：none

none属性值可以让一个元素隐藏！

两种隐藏元素的方式比较（display：none 和visibility：hidden）

display:none的方式实现元素隐藏：

1、元素的尺寸会丢失，脱离文档流，不占据任何空间，可能影响之后的元素的布局。

2、引起浏览器的重排和重绘。

3、相当于删除了子元素，自元素的资源不会再加载，如背景图片。

重排：浏览器的dom发生了变化，也就是需要重新计算dom树。dom树发生变化的情况通常有：元素的几何属性发生变化、dom树的结构关系发生变化、获取一些属性如offset等。
重绘：元素外观的改变，如颜色等，不会导致大小或者说位置的改变。
二者的关系：重排必然会起重绘

visibility：hidden的方式实现元素隐藏：

1、元素尺寸依然在，不会影响其他元素的布局。

2、只会导致浏览器重绘，不会导致重排。

3、子元素的资源会正常加载，只是不展示。

6、其他三个不常用的属性值

列表类型：list-item

list-item属性值可以创建一个列表元素。

相当与li元素，可以使用li元素的属性值

表格类型：很多

直接上表格吧：

我想偷个懒！图片来自面试笔试宝典！

借助这种布局能够达到的效果：

1、实现多列等高
2、实现不确定的元素垂直居中

当然啦，本质就是table

run-in

可以根据周围元素的盒子类型来确定自己的盒子类型。

规则：

1、如果定义为run-in的元素内部没有块级元素，那么其后边的兄弟元素变为行内元素。

2、其他情况；run-in元素理解为块级元素。