块元素和内联元素

一、元素的分类

块元素

1.独占一行

2.高度内容撑开，宽度不设置会独占一整行。

内联元素

1.行内元素，根据内容大小占位置，不会换行，不支持宽高，

2.可以设置内外边距，但是垂直方向的不会影响布局，水平方向的外边距不会重叠。

图片元素

1.支持盒模型，margin需要固定的数值

2.可以设置宽高，不独占一行

3.可以定位，浮动，不会被浮动元素覆盖

4.支持text-align

二、元素浮动的特点

块元素：

1.块元素不在独占页面的一行

2.块元素的宽高有内容撑开

3.可以包含浮动元素

4.margin属性不生效，垂直方向的可以正常生效

5.半脱离文档流，不会被浮动元素覆盖，可以覆盖不脱离文档流的块元素。

行内元素：行内元素会变成和脱离文档流的块元素一样、

三：关于浮动的高度塌陷问题

在布局中，块父元素的高度默认是被子元素撑开的，当子元素脱离文档流之后，将无法撑开父级的宽度，导致父元素的高度丢失

会使其下面的元素自动上移，导致页面的布局混乱，所以需要进行处理。

清浮动的方法（开启BFC）

特点

​ 1.开启BFC的元素不会被浮动的元素所覆盖

​ 2.开启BFC的元素子元素和父元素外边距不会重叠

​ 3.开启BFC的元素可以包含浮动元素

​ 4.开启BFC的元素不会叠加到浮动元素上

方法

​ 1.设置元素的浮动（不推荐）,会导致下面的元素上移

​ 2.将元素设置为行内块元素（不推荐），不方便布局设置

​ 3.将元素的overflow设置为一个非visible的值(hidden)

​ 4.设置：before,:after{content:"";display:block;clear:both;}

四、display可以使块元素和行内元素互相转换

display:block{行内元素转为块元素}

display:inline{块元素转为行内元素}

display:inline-block{行内块元素，支持宽高，不独占一行，换行会被解析和空格}， text-align:center会生效

五、定位

块元素

1.完全脱离文档流

2.不独占一行，宽高由内容撑开

3.浮动属性会失效

4.导致的高度塌陷无法通过BFC解决

行内元素：行内元素会变成和定位的块元素一样、

六、盒模型

.

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

box-sizing: border-box;可以改变盒模型状态，使盒子的总宽高固定为宽高的设置值。

关于盒模型的外边距重叠

1.外边距左边和上边自己都会位移，右边和下标会把其他元素推开

2.相邻的块外边距会重叠，如果外边距都是正值则选大的，一正一负就取合，都是负选择绝对值大的

3.子级如果和父级之间没有非空的东西隔着，子级的外边距会传递给父级。