五、盒子模型
1.1盒子模型的介绍
- 盒子的概念
- 页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角方便的进行布局
- 浏览器在渲染（显示）网页时，会奖网页中的元素看作是一个个的矩形区域，我们也形象地称之为盒子
- 盒子模型
- CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
- 记忆：可以联想现实中的包装盒
2.1内容的宽度和高度
- 作用：利用width和height属性默认设置是盒子内容
- 属性：width/height
- 常见取值：数字+px
3.1边框（border）-连写形式
- 属性名：border
- 属性值：单个取值的连写，取值之间以空格隔开
- 如：border:10px solid red;
- 快捷键：bd+tab
solid:实线
deshed:虚线
dotted:点线
3.2边框（border）-单方向设置
- 场景：只给盒子的某个方向单独设置
- 属性名：border-方位名词
- 属性值：连写的取值
3.3边框（border）-单个属性
- 作用：给设置边框粗细、边框样式、边框颜色效果
- 单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线 solid、虚线 dashed、点线 dotted |
| 边框颜色 | border-color | 颜色取值 |
3.4盒子实际大小初级计算公式
- 需求：盒子尺寸400*400，背景绿色，边框10px 实线 黑色，如何完成？
- 盒子实际大小初级计算公式：
- 解决：当盒子被border撑大后，如何满足需求？
3.5CSS3盒模型（自动内减）
- 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
- 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
- 解决方法1：手动内减
- 操作：自己计算多余大小，手动在内容中减去
- 缺点：项目中计算量太大，很麻烦
- 解决方法2：自动内减
- 操作：给盒子设置属性box-sizing:border-box;即可
- 优点：浏览器会自动计算多余大小，自动在内容中减去
3.6清除默认内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
- 比如：body标签默认有margin：8px
- 比如：p标签默认有上下margin
- 比如：ul标签默认由上下的margin和padding-left
解决方法：
*{
margin:0;
padding:0;
}
3.7版心居中
div{
width:1000px;
height:300px;
background-color:pink;
margin: 0 auto;
}
margin: 0 auto;
