块元素、行内元素、行内块元素区别及其作用

块元素

• 块级元素独占一行,默认会新起一行，如：div、p、h1

根据这个特性可以实现盒子水平居中margin: 0 auto;

原理 : 块级元素独占一行设置大小后水平方向会剩余空间,设置auto左右会自动分配剩余空间

行内元素（内联元素）

• 常用的行内元素有a、span、strong、b、em、label

• 紧跟着前面元素的后面显示，不会换行

• 宽，高设置无效；只能显示元素内容自身所占的区域大小

• 内外边距margin，padding：只能设置左右边距才有效

行内块元素

• 常见的行内块元素有img、button、input、select、textarea

行内块元素不独占一行，其他特性和块元素完全一样

注意点

• 行内元素脱离文档流后，会变成块元素

a{
    width: 100px; /*宽度有效*/
    float: left;
}

• 用display 属性可以将三种元素进行相互转换，从而设置需要的样式

block 是块级元素，inline 是行内元素，inline-block是行内块元素

---

不积跬步无以至千里 ** 📒查漏补缺，知识梳理 ** ⭐⭐