web前端：css盒模型。边框和内外边距

　　层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

　　css盒模型：

　　外边距边框内填充内容

　　盒模型分为两种：

　　标准盒模型：

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

　　边框：border

　　border:10pxsolidblue;表示设置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:5px50%50%50%/5px50%50%50%;

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

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

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

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

　　width:0px;

　　height:0px;

　　border-left:200pxsolidtransparent;

　　border-top:200pxsolidtransparent;

　　border-right:200pxsolidtransparent;

　　border-bottom:200pxsolid#ff0;

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

　　width宽

　　height高

　　外边距和内填充：

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

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

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

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

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

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

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

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

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

　　*{

　　margin:0;

　　padding:0;

　　}

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

　　margin:0auto;

　　外边距的重合问题：

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

　　取值取两者的最大值

　　盒模型的计算：

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

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

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

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

　　两种盒模型之间的转换：

　　box-sizing:content-box;标准

　　box-sizing:border-box;IE

　　CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。