图示

盒子模型

图示参数说明

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

元素空间宽高度计算

最终元素的总宽度计算公式是这样的：
总元素的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=内容高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

实际元素尺寸宽高度

宽度宽度=宽度+左右内边距+左右边框
高度高度=高度+上下内边距+上下边框

外边距 margin

理解

盒子与盒子之间的距离

参数

css
div {
    /*上外边距*/
    margin-top: 20px;
    /*下外边距*/
    margin-bottom: 20px;
    /*左外边距*/
    margin-left: 20px;
    /*右外边距*/
    margin-right: 20px;
}

简写

采用两个数值时，第一个数值表示上下外边距、第二个数值表示左右外边距

css
div {
    margin: 20px 10px;
}

采用四个数值表示时，依次以逆时针顺序表示上外边距、右外边距、下外边距、左外边距

css
div {
    margin: 20px 20px 10px 10px;
}

外边距问题

外边距合并

场景

同级垂直方向上的元素，设置相邻margin时会取最大值

示例

box1和box2分别设置下外边距10px、上外边距10px；按常规理解box1和box2中间应该隔开20px，但是实际上只有10px。
代码 ![[盒子模型-间距合并.jpg]]

Result

![[盒子模型-间距合并-result.jpg]]

当box1的下外边距取值较大时，二者之间的距离按照较大者合并
代码
![[盒子模型-间距合并2.jpg]]

Result
![[盒子模型-间距合并-result2.jpg]]

由此验证了
同级垂直方向上的元素，设置相邻margin时会取最大值

外边距塌陷

场景

父子级关系中，对子级添加margin-top依次实现隔开距离效果时，会发生magrin塌陷问题。造成margin值施加到父级上，造成元素整体下移

注意

若元素（父级或子级）添加浮动则不会发生外边距塌陷

示例

box2设置上外边距，按理应该和父级box1隔开，但是没有隔开而是施加到父级，导致元素整体向下偏移

代码
![[margin塌陷.jpg]]

Result ![[margin塌陷Result.jpg]]

border边框

border会影响盒子的可见框大小
不指定宽度会有一个默认宽度，一般为3px

分别指定四边的宽度

可以通过该属性分别指定四个边框的大小

css
.div {
/*以顺时针顺序指定，上右下左*/
    border-width: 10px 20px 10px 20px;
/*三个值，上 左右 下*/
     border-width: 10px 20px 10px;
/*两个字，上下 左右*/
     border-width: 10px 20px;
}

分别指定四边的颜色

border-color: 边框颜色不指定颜色会默认使用字体颜色
可以通过该属性分别指定四个边框的颜色 border-color在简写中特殊值可为：transparent 边框颜色为透明

css
.div {
/*以顺时针顺序指定，上右下左*/
    border-color: blue gray blue gray;
/*三个值，上 左右 下*/
     border-color: red blue red;
/*两个字，上下 左右*/
     border-color: blue gray;
}

边框样式

border-style: 边框样式

solid：实线
none：无
dotted：点状虚线
dashed: 长方形虚线
double：双线

语法

css
.div {
/*以顺时针顺序指定，上右下左*/
    border-style:solid none dotted solid;
/*三个值，上 左右 下*/
     border-style: solid none solid;
/*两个字，上下 左右*/
     border-style: solid none;
}

单独指定某一边边框

border-top
border-left
border-right
border-bottom

border简写


div{border: border-weigth border-style border-color

内边距-padding

边框到内容区域之间的距离

设置padding后会改变盒子可见大小

语法

css
.div {
/*以顺时针顺序指定，上右下左*/
    padding: 10px 20px 10px 20px;
/*三个值，上 左右 下*/
    padding: 10px 20px 10px;
/*两个字，上下 左右*/
    padding: 10px 20px;
/*一个值，四边*/
    padding: 10px;
}

注意

padding会导致元素宽高发生变化，需要减去对应的宽高

水平方向布局规则

父子级水平方向布局

子元素在父元素的水平布局，必须满足：


margin-left+bodder-left+padding-left+width++padding-right+border-right+margin-right=父元素的width

若七个值相加之和不等于父元素的宽度，则属于过度约束，则浏览器会自动调整相应的外边距的值

尽量避免margin-right为负值

垂直方向布局规则

等式


margin-top+border-top+padding-top+width+padding-top+border-top+margin-bottom=父元素高度

可以不等于，用来参考

盒子尺寸计算大写

可以使用box-sizing属性来改变盒子大小的计算方式，默认为content-box即width应用到内容区

对应属性

border-box：则width和height值包括内边距和边框

目录

图示