1. 盒模型
一般来说，页面中的每一个元素都会形成一个矩形盒子，渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说，页面的布局就是一个个盒子的排列和摆放。CSS 决定这些盒子的大小、位置以及属性。每个盒子有四个部分组成，分别是：content，padding，border，margin。
属性解释：
content内容区域，内容区域可以定义width和heightpadding内容区域和边框之间的空间量border内容区域和内边距周围边框的粗细和样式。margin边框和元素外边缘的空间量
标准盒模型
在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。内边距padding和边框border加上设置的宽高一起决定了盒子的大小。
IE盒模型
在IE盒模型中，如果给盒子设置width和height，那么盒子的大小就是设置的宽高值，如果盒子设置了内边距padding和边框border，那么内容的大小实际上是盒子的大小减去内边距和边框的大小之后的值。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
盒模型切换
在现代浏览器当中，几乎所有的浏览器，默认的盒模型都是标准盒模型。如果想要使用IE盒模型，可以通过设置属性box-sizing: border-box来设置。
2. background-clip 属性：规定背景的绘制区域，该属性接受三个不同的值：
border-box：背景绘制到 边框 的外部边缘（默认）padding-box：背景绘制到内边距的外边缘content-box：在内容框中绘制背景 默认情况下，background的绘制区域是以 边框 的外边缘为边界的，当通过background-color属性来设置背景颜色时，这种颜色会填充元素的内容、内边距和 边框 区域，扩展到元素 边框 的外边界（但不包括外边距）。如果 边框 有透明部分（如虚线边框），会透过这些透明部分显示出背景色。这时可以通过设置background-clip属性来设置背景的绘制区域。
使用场景：半透明边框的实现
3. outline 属性：元素周围的轮廓线，位于边框边缘的外围
outline 属性的使用类似于 border
轮廓线不会占据空间，也不一定是矩形。
使用场景：可以使用 outline 来实现双边框的效果（例如缝边效果）
拓展：多边框可以通过 box-shadow来实现
4. 背景定位
background-position 属性：设置背景图像的起始位置
background-position 属性允许我们指定背景图片距离任意角的偏移量，只要我们在偏移量前面指定关键字。举例来说，如果想让背景图片跟右边缘保持20px的偏移量，同时跟底边保持10px的偏移量，可以这样做： background-position: right 20px bottom 10px
每个盒子都存在三个矩形框：border box（边框盒）、padding box（内边距框）和 content box（内容框）
默认情况下，background-position 是以内边距框为准的，这样边框才不会遮住背景图片。
background-origin 属性：规定 background-position 属性相对于什么位置来定位
在给背景图片设置距离某个角的偏移量时，有一种情况极其常见：就是我们希望偏移量与容器的内边距一致，即背景图片位于内容区域。如果采用上面提到的 background-position 的扩展语法方案，每次改动内边距的值时，我们都需要在三个地方更新这个值，那么有没有更好的办法呢？
默认情况下，background-position 是以内边距框为准的，我们可以通过 background-origin 属性来改变这种行为。默认情况下它的值是padding-box。如果把它的值改成 content-box， background-position 将会以内容区的边缘作为基准（也就是说，此时背景图片距离边角的偏移量就跟内边距保持一致了）
