1.介绍

盒子的概念
1.页面中的一个标签都可看做是一个“盒子”，通过盒子的视角更方便的进行布局
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
2.盒子模型
>CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型
3.记忆：可以联想现实中的包装盒

/* 内边距 ： 填充泡沫：出现在内容和盒子边缘之间*/

/* 边框线 ： 纸箱子 */

/*外边距：出现在两个盒子之间，出现在盒子的外面*/
 

注意：背景色可以对 content，padding区域起作用，不能对margin起效

2.宽度和高度 

＞ 作用：利用width 和 height 属性默认设置是盒子 內容区域 的大小
> 属性：width/ height
> 常见取值：数字+pX

3.边框（border）

1，边框单方向：

> 场景：只给盒子的某个方向单独设置边框
> 属性名：border- 方位名词(top   bottom   left  right  )

2，边框单属性：

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

连写形式 

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

推荐顺序： 粗细  样式  颜色      顺序不分先后

4.内边框（padding）

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

>取值顺序：
 padding 最多取4个值 
 四值顺序：上 右 下 左
 三值顺序：上   左右  下
两值顺序：上下    左右 

一值：离边框的距离都相等
注意：多值写法，永远都是从上开始顺时针转一圈，如果数不够，看对面

自动内减

• 操作：给盒子设置属性 box-sizing：border-box；即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去(以width和height为标准的盒子，其他内边距和边框，内容等比例缩小)

以手动內减为例：

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距

答：当 给盒子设置border或padding时，盒子会被撑大，需要进行內减

5.外边框（margin）

> 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left

>解决方法：

1.

blockquote, body, button, dd, dl, dt, fieldset, form,
(index): 49 h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, P, pre, td,
textarea, th, ul {

margin: 0;

padding: 0;}

2.

*{
margin: > 0;
Padding: 0;}
 

居中：

margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中；（margin：竖 横）

6.顺序

从外到内：先宽高背景色，放内容，调节内容的位置,控制文字细节（有利于浏览器的运行）