CSS样式-显示模式display

显示模式共三种：block、inline、inline-block；

 

第一种：block（块级元素）：

 

常见块级元素：div、h1-h6、p、ul、ol、li，其中div元素经常被当做布局元素使用

块级元素的特点：

所有的块级元素自己占用一行，无论宽度是多少；

块级元素可以设定宽度（width）和高度（height）；

块级元素可以设定内边距（padding，盒子里面填充的距离）和外边距（margin：盒子与盒子之间的距离）；

块级元素的宽度是其容器（父节点）宽度的100%，如果不设定宽度的话；

块级元素的内部可以容纳其他的块级元素或者内联元素；

特例：p以及h1-h6元素通常内部只放文字

 

第二种：inline（行内元素）：

 

常见的行内元素：span、a、文本格式化标记（strong/b、em/i、del/s、ins/u）

行内元素的特点：

相邻的行内元素可以在一行上；

行内元素设定宽度和高度无效；

行内元素可以设定内边距，但是设定外边距时，只有水平方向有效；

行内元素的宽度是其内部内容的宽度；

行内元素通常只容纳文本或者其他行内元素；

特例：

a元素内部可以放块级元素，如div；

a元素内部不能再放a元素

 

第三种：inline-block（行内块元素）：

 

常见的行内块元素：img、input、td

行内块元素的特点：

相邻的行内块元素是可以在一行上的（这点类似行内元素）；

行内块元素可以设定宽度、高度、内边距和外边距（这点类似块级元素）；

 

 

显示模式的转换：

 

块级元素变为行内元素：display：inline；

行内元素变为块级元素：display：block；

块级元素/行内元素变为行内块元素：display：inline-block；