盒子模型的组成

一、盒子模型的组成

就是把 HTML 页面中的布局元素(块元素）看作是一个矩形的盒子，也就是一个盛装内容的容器。 由border、content、padding内边距、margin外边距组成

 二、边框 border

1、border的属性

属性	作用
border-width	定义边框粗细，单位px, 系统默认3px 或：thin(1px)  medium（3px） thick(5px)
border-style	none/solid/dashed虚线/dotted点线 (必须要有这一属性边框才可以显示出来)
border-color	边框颜色

简写：border:20px dashed pink

2、可以分别设置上下左右边框

Border-top/bottom/left/right:20px dotted blue

注意：边框的层叠性

顺序必须是先设置总体的border样式，后设置单独边框样式，顺序不可颠倒。

3、border的不同属性可以有1-4个值（表格以color属性为例）

值的个数	意思
border-color:red;	1个值，表上下左右都为红色
border-color:red blue	2个值，表上下红，左右蓝
border-color:red blue pink	3个值，表上红左右蓝 下粉
border-color:red blue pink green	4个值，表上红右蓝下粉左绿  顺时针

4.设置border-width属性会影响盒子的实际大小

三、外边距margin

1.margin属性

margin-left/right/bottom/top

注：设置margin-right/bottom没有明显效果是因为默认盒子靠左上方，而整个body页面较大，才不会有效果,想要看见明显效果可以在它外面设一个盒子给它设置宽度

2.margin简写

margin 简写方式代表的意义跟 padding 完全一致

3.margin让块级盒子水平居中

条件：① 盒子必须指定了宽度（width）

② 盒子左右的外边距都设置为 auto

常见写法：margin：o auto；