css盒模型。边框和内外边距

css盒模型：

外边距 边框 内填充 内容

盒模型分为两种：

标准盒模型：

怪异盒模型（IE盒模型）：

边框：border

border: 10px solid blue;表示设置10像素蓝色实线条的边框

是以下三个样式的复合语法

border-width: 10px; 设置边框的宽度

border-color: blue; 设置边框的颜色

border-style: solid; 设置边框的样式

solid：实线

dashed: 虚线 装订线

dotted: 点线

double: 双线

如何单独设置一个边的边框：

border-left:

border-right:

border-top:

border-bottom:

border-radius 设置圆角边框 取值可以是 px % em 最大设置范围到50% 超出则按照50%计算

参数最少可以设置一个 最多可以设置八个

border-radius: 5px 50% 50% 50% / 5px 50% 50% 50%;

前四个值代表水平方向的取值 左上 右上 右下 左下

后四个值代表垂直方向的取值

利用css边框知识 在页面绘制一个三角形：

需要将一个盒子宽高设置为0 然后设置四个边框，其中三个面的边框颜色设置成透明色，则会显示成一个三角形

width: 0px;

height: 0px;

border-left: 200px solid transparent;

border-top: 200px solid transparent;

border-right: 200px solid transparent;

border-bottom: 200px solid #ff0;

内容： 我们所设置的宽和高 实际上指的是内容区域的宽高 （标准盒模型）

width 宽

height 高

外边距和内填充：

padding 内填充 （内边距/内补白） ： 表示一个元素，边框和内容之间的距离

padding: 20px; 如果只给一个值，代表上下左右的内填充同时设置20px

padding: 20px 40px; 如果给两个值 第一个值代表上下 第二个值代表左右

padding: 20px 40px 60px; 三个值 第一个值代表上 第二个值代表左右 第三个之代表下

padding: 20px 40px 60px 80px; 四个值分别对应 上 右 下 左 以顺时针方向赋值

padding-bottom:; 单独设置一边的内填充 可以使用 padding-方向 来设置

margin 外边距（外补白） 表示元素与元素之间的距离，也就是边框以外的距离 设置的值和内填充原理一致

当设置外边距时 如果兄弟元素之间，上下的外边距有重合，则取最大值

去除浏览器默认的所有标签的外边距和内填充

*{

margin: 0;

padding: 0;

}

设置一个盒子在父元素宽度内水平居中

margin:0 auto;

外边距的重合问题：

当子元素和父元素的上外边距重合到一起时，不管给小盒子还是大盒子设置上外边距，影响的都是大盒子，

取值取两者的最大值

盒模型的计算：

标准盒模型 宽度计算： width + paddingleft + paddingright + borderleft + borderright + marginleft + marginright

IE盒模型 宽度计算： width + marginleft + marginright

标准盒模型 设置的 width = 实际内容的宽度

IE盒模型 设置的 width = 实际内容的宽度 + 边框的宽度 + 内填充的宽度

两种盒模型之间的转换：

box-sizing:content-box; 标准

box-sizing:border-box; IE