html区块元素
大多数 HTML 元素被定义为块级元素或内敛元素。
块级标签:会独占一行,无论内容多少
内敛标签:根据内容多少占用空间大小
举例:
块级:p、h1-h6、div、ul、li、ol、dl等
内敛:span、img、i、b、a、em、icon(矢量标签)等
二者的区别
块级
1、块级元素会独占一行
2、块级标签可以设置宽高
内敛
1、内敛不会独占一行
2、内敛不可以设置宽高
3、内敛元素的margin上下边距不起作用
(注:相邻两个块级元素同时设置margin时,他们之间的外边距不会叠加,会取最大值 。这种现象叫margin塌陷)
二者转换
块级转行级
给块级元素添加属性display:inline;(display 显示,inline 行)
行级转块级
给行级元素添加属性display:block;(block 块)
行级块元素
给需要的元素添加属性display:inline-block;
(备注:line-height 行高 设置字体的垂直位置 line-height的值和height的值相同 文本就上下居中)