CSS盒模式

一. 边框

变宽就是围绕在标签宽度和高度周围的线条。

格式：

1.1 连写（同时设置四条边的边框）

border：边框的宽度 边框的样式 边框的颜色；

1.2 连写（分别设置四条边的边框）

border-top：边框的宽度 边框的样式 边框的颜色；

border-left：边框的宽度 边框的样式 边框的颜色；

border-right：边框的宽度 边框的样式 边框的颜色；

border-bottom：边框的宽度 边框的样式 边框的颜色；

边框样式：不用记忆，文档查询即可。

1.3 连写（分别设置四条边的边框）

border-width:上 右 下 左；

border-style:上 右 下 左；

border-color:上 右 下 左；

1.4 非连写

border-top-width:

border-top-style:

border-top-color:

.................................

二. 内边距

1. 定义：边框和内容之间的距离

2. 格式

2.1 非连写

padding-top:

padding-left:

padding-right:

padding-bottom:

2.2 连写

padding: 上 右 下 左；

3.注意点

1. 设置完内边距之后，标签占有的高度和宽度会发生变化；

2. 内边距也会有背景颜色。

三、 外边距

1. 定义 标签和标签之间的距离，就是外边距。

2. 格式：

2.1 非连写：

margin-top:

margin-right:

margin-bottom:

margin-left:

2.2 连写

margin: 上 右 下 左；

注意点：

1. 在默认布局的竖直方向上，外边距是不会叠加的，出现的是合并现象，谁大谁牛逼。

四、盒模式

1.什么是CSS盒子模式？

CSS盒子模型仅仅只是一种形象的比喻，HTML中每一个标签都是一个盒子。

结论：

1. 在HTML中所有的标签都可以设置宽度、高度、边框、内边距、外边距。

2. 宽度和高度

2.1 内容的宽度和高度

通过标签的width/height属性设置的宽度和高度。

2.2 元素的宽度和高度

宽度：左边框+左内边距+width+右内边距+右边框

高度： 同理可证。

2.3 元素空间的宽度和高度

宽度：左外边距+元素宽度+右外边距

高度：同理可证。

3. box-sizing

1. 作用：CSS3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding和border之后，盒子元素的宽度和高度不变。

和之前学习的原理一样，如果在增加了padding和border之后想要保证盒子元素的宽高不变那么就要减去一部分内容的宽高。

2. 格式：

box-sizing：值；

3. 取值：

 1. content-box

元素的宽高 = 边框 + 内边距 + 内容

2. border-box

元素的宽高 = width/height属性。

注意点：

1. 如果两个盒子是嵌套关系，那么设置了里面盒子的外边距，外面盒子一样会顶下来；

2. 如果外面盒子不想被顶下来，那么只要给外边盒子添加边框属性就行；

3. 在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，那么优先考虑padding，其次margin。

margin本质上是用来控制兄弟之间的间隙的，不是用来控制父子之间间隙的。

4. 在嵌套关系的盒子中我们可以使用margin：0 auto；的方式来让里面盒子在外面盒子中水平居中。

5. margin：0 auto；只对水平方向有效，对垂直方向无效。

4. text-align：center； 和 margin：0 auto；的区别

text-align：center作用：设置盒子中存储的文字和图片水平居中

margin：0 auto；让盒子自己水平居中。