CSS盒子的概念

盒子模型

1. 盒子的概念

页面中的每一个标签都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局

浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，称之为“盒子”

1. 盒子模型

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

内容的宽度和高度

作用：利用width和height属性默认设置是盒子内容区域的大小

属性：width/height

常见取值：数字+px

边框（border）

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

如  border：10px solid red

快捷键：bd+tab

边框（border）-单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方位名词（如border-left：粗细 线条样式 颜色---不分先后顺序;）

属性值：连写的取值

（了解）

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

盒子尺寸：width/height + 边框线

内边距

padding可以当做复合属性使用，表示单独设置某个方向的内边距

padding最多取四个值

四值：上 右 下 左

三值：上 左右 下

两值：上下 左右

多值写法：永远都是从上开始顺时针转一周，如果数不够，看一半

外边距 用法同内边距

清除默认内外边距

浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些默认标签的margin和padding，后续自己设置。

*{

Margin：0;

Padding：0;

}

版心居中

版心：网页的有效内容

margin：0 auto;

外边距折叠现象—合并现象

场景：垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：避免就好   给其中一个盒子设置margin即可

外边距折叠现象—塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1. 给父元素设置border-top或者padding-up（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden
3. 转换成行内元素
4. 设置浮动