持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

盒子模型

概念： 网页页面中每一个标签，我们都可以理解为一个“盒子”

好处： 更加方便进行布局，也就是在美工美眉给我们发来设计图时，作为切图仔的我们就可以将页面中每个元素理解成盒子，合理地摆放、嵌套进行布局。

组成： 盒子由四部分组成—— 内容区域content 内边距区域padding 边框区域border 外边距区域margin

盒子尺寸包括border、padding、以及content

内容的宽高

width和height属性的设置默认就是内容区域的大小 前面也说过，取值是数字+px即可

width:100px;
height:100px;

边框

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线-solid、虚线-dashed、点线-dotted
边框颜色	border-color	颜色取值

和font、background一样，border也可以连写 border：粗细 样式 颜色

border:10px solid red;

内边距

边框与内容区域之间的距离 padding 可以直接连写，最多是个值，分别的方向指的是上右下左，没错就是顺时针的方向

padding:10px 20px 30px 40px;

padding的取值设置1位，2位，3位都是可以的

那些没有被赋值的padding方向怎么办？ 答案：==看对面的==

假设你只赋了三个值，左边没赋，那么左边就会默认设置为和你右边设置的值一样，也就是第二个值

同理，如果你想要盒子上下内边距一样，左右内边距一样，只需要设置两个值即可

当只设置一个值时，默认四个方向内边距一致

有时候会遇到一些情况需要单独设置，可以直接——

padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;

外边距

盒子与盒子之间的距离

margin的取值特点与padding一致，这里就不多做赘述

常见问题解决

1. 内容区域宽高设置后，在设置边框、内边距时是会撑大盒子的，也就是在你设置内容宽高时，需要用想要的盒子宽高减去边框和内边距才能得出 避免繁杂计算： 直接给盒子设置属性,自动减去

box-sizing:border-box;

此时你加入边框、内边距后，不会撑大盒子，内容区域自动缩小，也就是你一开始输入的内容宽高，将会是盒子尺寸，不会变化

2. 部分标签具有自己的默认margin、padding 如<p> 一般开发时会在开头用通配符选择器将所有默认内外边距清零，便于自己的调试布局 代码如下：

*{
	margin：0；
	padding：0；
}

3. 外边距塌陷现象兄弟间 margin外边距使用时，需要注意的是：水平布局的盒子，之间的边距是两个margin叠加 而垂直布局的块级元素，边距不会叠加，只会取两个之间的最大值作为边距

4. 外边距塌陷现象父子间 场景： 互相嵌套的块级元素，当父元素的padding-top和border-top为0或未设置时，子元素的margin-top会作用在父元素上，表现为子元素将父元素拖拽下去，俗称坑爹。 啥意思，就是你没给父元素上边你没加边框也没给内边距,这时候还给子元素加了上边的外边距，，这时子元素穿透父元素，父元素无法识别子元素范围，子元素直接把父元素拉了下来，margin-top相当于给了父元素

解决方法：

• 给父元素设置border-top或padding-top
• 给父元素设置overflow:hidden;原理点此
• 转换成行内块

结构伪类选择器

作用： 根据元素在html的结构关系寻找元素，常用于查找父级选择器的子元素

优点： 减少对类的依赖，保持代码整洁

使用如下所示：

li:first-child{}
/*选择第一个li标签*/

==注意：== nth-child(n)和nth-last-child(n)中的n可以为公式 如——2n、5-n等等

伪元素

利用CSS模拟出的标签效果

种类：

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后面添加一个伪元素

==注意：==

1. 必须有content属性才能生效
2. 伪元素默认为行内元素