块级元素和行内元素及行内块元素(外加转换方式)

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

猜你喜欢

转载自www.cnblogs.com/akone/p/11470476.html