html区块元素

     大多数 HTML 元素被定义为块级元素或内敛元素。

　　块级标签：会独占一行，无论内容多少

                           可以设置宽高

　　内敛标签：内敛不会独占一行

                          根据内容多少占用空间大小  

                           内敛 不可以设置宽高  

                          内敛元素的margin上下不起作用

 

 

（注：相邻两个块级元素同时设置margin时，他们之间的外边距不会叠加，会取最大值 。这种现象叫margin塌陷）

  

 

 举例：

　　块级：p、h1-h6、div、ul、li、ol、dl等

　　内敛：span、img、i、b、a、em、icon（矢量标签)等

二者转换

　　块级转行级

　　　　给块级元素添加属性display：inline；（display 显示，inline 行） 

　　行级转块级

　　　　给行级元素添加属性display：block；(block 块）

　　行级块元素

　　　　给需要的元素添加属性display：inline-block；

（备注：line-height  行高    设置字体的垂直位置         line-height的值和height的值相同   文本就上下居中）

 

 

 

备注

Line-height 行高  设置字体的垂直位置

 

 

Line-height的值和height的值相同 文本就上下居中

拓展 line-height:50px/2;

当是2的时候  line-height的值是2*font-size的大小==36px

转载于:https://www.cnblogs.com/liancai001/p/9642881.html