盒子模型的介绍
盒子概念
盒子组成
盒子内减
拓展
1. 盒子的概念
1 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
2 盒子模型
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
3 记忆：可以联想现实中的包装盒
盒子模型一共有几个部分组成？分别是什么？
1 内容区域：content
2 边框区域：border
3 内边距区域：padding
4 外边距区域：margin
1 内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性：width / height
取值：数字+px
2 边框（border）
作用：给设置边框粗细、边框样式、边框颜色效果
单个属性：
边框粗细(border-width) 数字+px
边框样式(border-style) 实线(solid)、虚线(dashed)、点线(dotted)
边框颜色(border-color) 颜色取值
连写：border:width style color;
单方向边框设置：border-方位名词:width style color;
3 内边距（padding）
作用：设置 边框 与 内容区域 之间的距离
属性：padding
常见取值：
1 一个值（10px） 上右下左都为10px
2 两个值（10px 20px） 上下10px 左右20px
3 三个值（10px 20px 30px） 上10px ；左右20px 下30px
4 四个值（10px 20px 30px 40px） 上10px 右20px 下30px 左40px
单方向设置：padding-方位名词:数字+px
记忆规则：从上开始，顺时针赋值
4 外边距（margin）
作用：设置边框以外，盒子与盒子之间的距离
属性：margin
常见取值：
1 一个值（10px） 上右下左都为10px
2 两个值（10px 20px） 上下10px 左右20px
3 三个值（10px 20px 30px） 上10px ；左右20px 下30px
4 四个值（10px 20px 30px 40px） 上10px 右20px 下30px 左40px
单方向设置：margin-方位名词:数字+px
记忆规则：从上开始，顺时针赋值
盒子水平居中：margin:0 auto;
盒子内减模式
1 手动内减模式(了解)
通过计算手动调整盒子大小
2 自动内减模式（常用）
box-sizing: border-box;
（拓展）不会撑大盒子的特殊情况（块级元素）
1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
2. 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { /* 宽高是内容区域大小 */ width: 300px; height: 300px; /* 背景色 */ background-color: #ffc0cb; /* 盒子边框 */ border: 10px solid #0000ff; /* 内边距 内容到边框的距离*/ padding: 20px; /* 外边距 盒子到盒子的距离 */ margin: 20px; /* 盒子自动内减 */ box-sizing: border-box; } </style> </head> <body> <div>盒子一</div> <div>盒子二</div> </body> </html>效果图：
