一、块元素

1.常用块元素标签有：div，p，ul，li，h1~h6，dl，dt，dd等

2.支持全部样式

3.可以设置宽高，如果没有设置宽度属性，则宽度默认为父级宽度的百分之百

4.盒子占据一行，即使设置了宽度

如图.box并未设置宽度：

CSS会自动将宽度设定为父级的百分之百，且独占一行，加上宽度即可正常显示设定的宽度

二、内联元素（行内元素）

注意：常见的内联元素：a，span，em，b，strong，i

1.不支持宽高，margin上下、padding上下，如图.box2已设置margin上下，但并未生效。padding上下因为其不生效所以设置为0，如果强行设置反而会导致渲染bug，padding左右已生效

2.宽高由元素内容决定，如果是图片就为图片大小，如果字体30就按照30

3.盒子并在一行中

4.代码换行时盒子会自动产生间距

解决办法：

将父元素中的font-size设置为0，再重新设置子元素的font-size：

父级：子级：

效果：

原效果

5.子元素是内联元素，父元素可用text-align设置对其方式

父元素.box3： 子元素：.box3 a

添加了text-align:center;后块元素内的内联元素居中对其

三、内联块元素（块元素+内联元素）

1.支持全部样式

2.可以自己设置宽高，如果元素没有设置宽高，则由内容决定

3.盒子并在一行

4.代码换行，盒子产生间距

5.父元素可用text-align设置子元素对其方式

可用display将内联元素转换为内联块元素，使其可以设置宽高，margin上下以及padding上下

元素中添加：

，即可将内联元素转化为内联块元素

更多display属性：

可实现在块元素、内联元素、内联快元素中切换

如果觉得《CSS块元素基础 内联元素（行内元素） 内联块元素（行内块元素）》对你有帮助，请点赞、收藏，并留下你的观点哦！