每一个元素都会有宽高，即使元素宽高为0。
首先，我们从元素的盒模型开始。
这里的默认情况都是不带有 user agent stylesheet

<div></div>

当一个元素的content为空时，这个元素的高度为0。但是默认宽度是100%。

从margin开始

margin 是盒子的外边距，这个外边距实际上就是元素和元素之间的在文档上的互相排斥的界限，默认情况下，元素间的margin值为0，元素间紧密贴合。
margin是一个复合属性
当设置一个属性值时，表示四周的外边距全部设置为该值。

margin: 10px /* 四周 */;

当设置两个值时，表示该值将会按照上下，左右的顺序设定外边距

margin: 10px /* 上下 */  20px /*左右*/;

当设置四个值时，以十二点钟顺时针方向设定👆 、👉、👇、👈 四边外边距。

margin: 10px /* 上 */  20px /*右*/  30px/*下*/ 10px/*左*/;

分别为每一个边设立外边距时，可以使用边后缀 -top 、-right、-bottom、-left单独设定。

负的外边距
尽管看起来好像是不对的，但是实际上可以设立负的外边距。

• 当块元素没有设定宽度时，负left或者负right，会增加左边或者右边宽度
• 当设定负top时，会向上移动距离。
• 当设定负bottom时，下面元素会向上移动距离，减少元素的css读取高度（这句话不理解，可能是margin的高度缩减了content区域。）
  • 多列等高应用。使用减少css读取高度这个特性，可以将子元素各列按照最高元素的高度设定

<style>
.container{  margin:0;overflow:hidden;}
.container div{ float: left;width:100px;  }
.list1 {height:50px; background-color:red;margin-bottom:-5000px;padding-bottom:5000px}
.list2 {height:100px; background-color:blue;margin-bottom:-5000px;padding-bottom:5000px}
.list3 {height:30px; background-color:green;margin-bottom:-5000px;padding-bottom:5000px}
</style>
<div class="container">
    <div class="list1"></div>
    <div class="list2"></div>
    <div class="list3"></div>
</div>

margin-bottom:-5000px

• 当相邻的两个块元素同时设定 bottom和top为负值时，只会取绝对值大的距离移动
• 当元素浮动时，相邻的两个元素，如果设定了负left值，则会向前一个元素移动覆盖距离。

一般行内元素的外边距
前面说过，一般行内元素是没有上下边距的，只有左右边距。

padding

和margin设定顺序相同，也可增加方向后缀单独设定。padding实际上是content部分的拓展区域，以空白拓展content内容。
唯一不同的是，没有负padding。

border 边框

边框是盒子的装饰部分，可继承属性
单独的 border 是一个复合属性，使用属性后缀 -width厚度 -style样式 -color 颜色，设定整个边框的单独属性。

• -width 厚度，使用常规的尺寸单位即可比如px、rem
• -color 颜色，使用常规的颜色值比如十六进制，rbg函数
• -style 线条样式
  • dotted 点线
  • dashed 虚线
  • solid 实线
  • double 双实线，双实线的宽度等于border-width的值
  • groove 3D 凹槽边框,其效果取决于 border-color 的值
  • ridge 3D 垄状边框。其效果取决于 border-color 的值。
  • inset 3D inset 边框。其效果取决于 border-color 的值。
  • outset 3D outset 边框。其效果取决于 border-color 的值。

border:1px solid #f0f0f0;/*复合设定*/
/*单独设定*/
border-width:1px;
border-style:dashed;
border-color:#ff0;

由于border是多属性复合，因此没有margin和padding那样的混合设定，因此如果需要对单边设定可以使用 方向后缀 -top、 -bottom、 -left、 -right，同时单边也有属性后缀，用来设定单边属性。

/*单边复合设定*/
border-top:1px solid #afafaf;
/*单边单独设定*/
border-top-width:2px;
border-top-style:double;
border-top-color:#aaf;

border-radius 边框圆角
该属性是一个复合属性，设定属性值时，可以使用一般长度数值设定，圆角分界线以盒子中心线将四条边分割成八个可以设置圆角的边。

复合设定时按照顺时针，分别为 上左(-top-left)，上右(-top-right)，下右(-bottom-right)，下左(-bottom-right)。
双属性设定时，分别为上左，下右，和上右，下左的上下顺序。而每个拆分属性分别可以设置两个值，代表两条边的弧度包围成一个角。
border-radius共可以设定8个值，分别对应四个角，顺序按照上下边 / 左右边的顺序设定，和上左，上右，下右，下左一一对应。

圆角设定时，有一个上限，如果用百分比设定，上限为50%，如果用像素设定，则为窄边一半。
当盒子长宽相等时，使用像素还是百分比都是相同效果。如果长宽不等时，会有差异。

50%

50px

整体设定，则为整个圆角设定

/*统一设定*/
border-radius:20px;
border-radius:20px  15px；
border-radius:20px  20px  0 0;

/*单角设定上左圆角*/
border-top-left-radius:20px;

/*对左上角的两条边设定弧度*/
border-top-left-radius:10px 5px;
/*8条边分别设定，按照顺序，中间使用 / 分割 */
border-radius:5px 5px 10px 10px / 5px 5px 10px 10px ;

box-shadow 盒子阴影
之前在文字修饰章节里面有一个text-shadow，不过那里只有四个属性，而在box-shadow里面，阴影多了一个阴影的延展范围。
什么叫阴影的延展范围。
常规下，在不模糊的状态下 影子的尺寸和应该和原始盒子的尺寸相同，此时，如果我们需要调整阴影大小，那就需要对阴影的尺寸外延或者内缩，就需要设定延展范围。

box-shadow:1px 1px 5px red;/* 没有携带延展范围*/
box-shadow:1px 1px 5px 10px red;/* 携带10px延展范围*/

阴影部分通常会和交互事件一起连用，比如mousedown，touchstart等等，提供比较明显的交互效果。

• 内阴影 inset
  通常阴影分为两种，默认情况下是外阴影，而添加了inset后变为内阴影。

box-shadow:1px 1px 5px red inset; /* 内阴影 */

border-image 图像边框
这一块是border的补充，在设定border-image的同时也需要设定border样式。
该属性是一个复合属性，可以使用后缀属性

• -source 图像的数据源 使用url()函数，引用相对地址或者绝对地址
• -slice 边框背景图的分割方式
  将图像按照上右下左的方式切割。这个切割实际上为九宫格切割，将图片按照
  上左(top-left) 上(top) 上右(top-right)
  左边(left) 中间(middle) 右边(right)
  下左(bottom-left) 底部(bottom) 下右(bottom-right)
  4条线切顺时针割出9个区域，但是中间的区域是内容区域，因此为空白部分。

线条切割图形

四个角的区域是不会被拉伸的，也不会平铺，也不会重复，只有上下左右四条边可以设定repeat属性。
如果相对的裁切的范围产生交集，则会导致边的消失，只存在角。

如果按照四个值来切，切割顺序按照顺时针方向切割。红色第一🔪是水平方向上部分一刀。蓝色第二🔪是垂直右侧一刀。紫色第三🔪是水平下部分一刀， 黄色第四🔪则是左侧垂直一刀。

切割顺序

border-image-slice:27 18 20 22;

如果按照两个值来切，则是棕色上下和蓝色左右。

两刀顺序

如果提供fill属性，则表示保留middle区域，用来填充content

fill属性

不含fill

• -width边框厚度
  这个属性可以设置不带单位的正数值，表示为因子，和border-width属性相乘得到实际结果，默认为1。也可以使用单位长度数值，px、rem等等。
• -outset边框背景图的扩展 . 使用无单位数值，把边框的按照默认位置向外偏移，(可以使用百分比，但是chrome下并未生效)。
• -repeat边框图像的平铺方式
  • round 类似平铺，如果无法完整平铺所有图像，则对图像进行缩放以适应区域
  • repeat 平铺。
  • space 如果无法完整平铺所有图像，扩展空间会分布在图像周围
  • stretch 默认值拉伸。

所有内容区域以四个角的宽高和所在位置为准，四条边和middle的区域按照角的宽高和覆盖内容自适应。
噢对了，设置了border-image只会，border-radius就不可以使用了——毕竟没了四个角和border-image强调四个角相冲突。
说了这么多，这个东西有什么用？可以理解为安卓上的9.png。最直观的就是qq的聊天气泡了。

outline 轮廓线

轮廓线不包括margin部分，其设置属性有后缀 -width 厚度 -style 线条样式 -color 线条色彩。
除了不能单独设定外轮廓线的四条边，其余和border相同

background 背景

背景是非常重要的装饰属性，用来绘制盒子的背景内容，包括 -color 背景色 -image 背景图，并且同时可以存在背景色和背景图两种属性。就好比一面墙，先涂底色再贴广告。因此，在一般情况下，会同时设定两个属性，保证背景图未加载时，使用背景色替代。

在绘制背景色时，默认背景色开始位置从左上角border区域开始，到右下角border结束，而image则是从文档的左上角content开始到右下角border结束。具体的可以设置一个transparent透明色的border后，同时设背景色和背景图，就可以很容易观察到了。

如果想调整，针对背景图需要使用到 -origin 调整初始位置，之前也提到过，在box-sizing有两个border-box和content-box属性值，而这里又多了一个padding-box,而这里的origin实际上就是背景的填充参考范围。
由于背景色是整块覆盖，不像图像一样拥有不规则的，因此使用裁切方式 -clip ，属性值和origin相同。
就好比，写文章，写字。这张纸一般情况下都是纯白色的，即使换了颜色，也是整张纸换颜色。而里面贴的图很少从左上角开始的，通常会有留白，这也就是开始位置和背景色是不同的。使用两个属性调整覆盖范围，留白还是不留，全看心情怎么做。

还是用刷墙贴海报来说，一面墙很少刷的五颜六色的，所以在css中，只能设置一种背景色。但是一面墙可以贴的五花八门的，所以css给了多个背景图的使用权。

重点还是说背景图，因为背景图的花样多。
背景图除了常规的url引用图像或者base64图像字符之外，还可以使用：

• image() 这个函数用来引用一个image图像【然而目前并不支持】，如果图像加载失败可以使用背景色覆盖，大小和图像大小一致，这样可以避免background-color覆盖范围和image大小不一致。background-image: image(bg.png,black) 并且，这个还提供了一个图形的矩形裁切，#xywh查询参数background-image: image(bg.png#xywh=10, 10, 20, 20, black)
• image-set() 这个可以根据不同分辨率提供不同质量的图片
  image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi )
• gradient 色彩渐变，如果渐变的渐变色位置没有指定，将会按照设置的渐变颜色等分100%，以使得颜色均匀分布。这里有以下几种渐变前缀

1. linear- 线性渐变
   默认情况下是从上到下to bottom相当于 180deg。可以设置 to up 相当于 0deg，to left相当于270deg，to right相当于90deg或者指定角度比如45deg。接下来需要从开始颜色和开始位置到结束颜色和结束位置,这里位置代表的是色彩过渡到完全使用到该色号时的位置，可以使用所有的长度的数值单位，不可以为负值。

background-image:linear-gradient( to left, red, blue  45% );

2. radial-径向渐变
   径向渐变除了色彩和渐变开始位置，还有几个关键点。首先，如果用过PS的都知道，径向渐变需要拉一条线，代表这个径向渐变的开始位置和结束位置——实际上也就是径向的半径。径向渐变主要有circle（正圆）ellipse（椭圆）两种形状。css里面提供了几种默认机制，创建这两种内容。

• 创建正圆径向：
  2.1 椭圆的相同半径 ：50px 这里只写了一个，实际上等于 50px 50px 表示椭圆x轴半径和y轴半径相等，可以使用百分比
  2.2 使用关键字创建默认圆：circle 只需要一个关键字，就会在当前盒子的正中心创建一个正圆。
  2.3 使用关键字+半径创建：circle 50px。 半径必须是指定的长度单位，而不能是百分比。
• 创建椭圆径向
  2.4 使用椭圆半径。50px 60px
  2.5 椭圆关键字 ellipse 实际上等于50% 50%，会以当前盒子的半径