盒子模型，行元素，块级元素总结

悠悠 2022-05-29 03:07 144阅读 0赞

## 盒子模型： ##

> 1.盒子模型时CSS的基石之一，它关系着页面中元素的排布。页面上每个元素被看做一个矩形框，这个框由元素的内部，内外边距，边框组成。  
> 2.两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。（**只有普通文档流中块框的垂直外边距才会发生外边距合并。行框，浮动框或绝对定位之间的外边距不会合并**。）

## 行元素： ##

> 不可以设置宽和高，但可以和其他行内元素位于一行，行内元素内一般不可以包含块级元素。一般高度由元素内部的字体大小决定，宽度由内容的长度控制。a,em,strong.

## 块元素： ##

> 块元素排斥与其他元素位于一行，可以设定元素的宽高，块级元素一般时其他元素的容器。div,p,h1~h6.

**box-sizing属性介绍：content-box,border-box,inherit**

> 1.content-box,默认值，可以使设置的宽度和高度值应用到元素的内容框中。盒子的总宽度`width=margin+border+padding+width（元素宽度）`  
> 2.border-box，设置的width值其实是除margin外的border+padding+element的总宽度。盒子的总width`=margin+width`.。  
> 3.inherit，规定应从父元素继承box-sizing属性的值。

**使用：**全局设置border-box很好，它很符合直觉，其次是它可以省区一次又一次的加减，最后就是，让有边框的盒子正常使用百分比宽度。

## 实际开发中遇到的与盒模型相关的小问题。 ##

**1. margin越界：**指得是第一个子元素的margin-top和最后一个子元素的margin-bottom的越界。

以第一个子元素的margin-top为例：

> 当父元素没有边框border时，设置第一个子元素的margin-top值时会直接加在父元素上。`（1）给元素加上边框border;(2)给父元素设置padding值；（3）父元素添加overFlow:hidden;(4)父元素加前置内容生成（.parent : before { content : " ";display : table}）；`

**2.浏览器间的盒子模型。**

> （1）ul在Moxilla中默认是有padding值的，在IE中只有margin。  
> （2）IE更像时box-sizing，border-box;那种，标准盒子模型内容宽度包含border,padding;`在html模板中加doctype`

[参考文章][Link 1]

[Link 1]: https://www.cnblogs.com/clearsky/p/5696286.html