块级元素和行内元素及行内块元素（外加转换方式）

Posted 2022-10-04 akone

块级元素和行内元素以及行内块元素
行内元素：一行内的元素如 <span> <a><img><br>大多数为描述性的标记
特征：设置的宽高无效。
margin的上下无效，左右方向有效，padding上下左右都有效，但是会撑大自己的空间。
不会自动换行
块级元素 ：代表性的就是div，其他的比如p，header，section，address，语义化增强代码的可读性。
特征：能识别高和宽。
可以自动换行，
多个元素写在一起从上到下进行排序
margin和padding的上下左右都可以识别。
行内块元素：继承行内元素跟块元素的特征，
不自动换行，
能够识别高度和宽度
排序方式从左到右。
转换方式
display：inline；转化为行内元素；
display：block；转化为块状的元素；
display：inline-block； 转化为行内块元素。