内边距、边框、轮廓和外边距
基本元素框
高度和宽度
默认情况下，元素的宽度指的是从左内边界到右内边界的距离，元素的高度指的是从上内边界到下内边界的距离；控制两个距离的属性分别是width和height;高度和宽度属性无法应用到行内非置换元素上,比如a元素；浏览器会忽略这两个属性；
内边距padding
紧邻元素内容区的是内边距，位于内容和边框之间。使用padding可以方便设置内边距； 而且属性值不能为负值；
padding的属性值可以是任何长度值；为各边设置不同的内边距的语法是padding: top right bottom left 上右下左；
padding可以设置少于四个值，规则如下：
- 如果没有针对左边的值，使用针对右边的值
- 如果没有针对底边的值，使用针对上边的值；
- 如果没有右边的值，使用针对上边的值；
可以单独为元素的某一边设定内边距值；使用padding-left,padding-right,padding-top,padding-bottom;
元素的内边距可以是百分数表示；百分数值对应的是父元素的内容区的宽度width计算；针对的是所有内边距；
应用到行内非置换元素的内边距对行高没有任何影响；如果有背景色和内边距，其背景会向元素上下延伸；
内边距可以应用到置换元素上；可以为图像设置内边距；
- 边框border
元素的内边距之外是边框，边框是元素的内容和内边距周围的一到多条线段；默认情况下，元素的背景在边框的外边距终止，不会延伸到外边距区域；
边框有三个要素：宽度，样式，颜色；边框宽度默认是medium，大概是2像素，默认的边框样式是none，不可见；默认的边框颜色是元素自身的前景色，默认与元素中的文本颜色相同；如果元素中没有文本，那么边框的颜色将于父元素的文本颜色相同；
边框的样式属性border-style控制者边框的外观；可选的值有：none,hidden,solid,dotted,dashed,double,groove,ridge,inset,outset;
边框的可以有多个样式，border-style{top right bottom left},与padding属性一样，值的顺序是上右下左，值少于四个时的复制规则与padding属性一样；
单边样式的四个属性分别是：border-top-style,border-right-style,border-bottom-style,border-left-style,分别对应四个边；边框的宽度使用border-width设置；四个单边属性分别是：border-top-width,border-right-width,border-bottom-width,border-left-width;
设定边框宽度的方式有四种，可以直接设置长度值，也可以使用三个关键字中的一个；可用的关键字有thin,medium,thick;边框颜色使用border-color属性可以一次设定四个值；同样有四个单边属性；规则与其他属性也一样；
简写的边框属性border,同样有四个针对单边的属性：border-top,border-right,border-bottom,border-left,这些单边属性只针对某一边，属性值分别对应一个要素：一个宽度，一个颜色，一个样式值；
圆角边框可以使用border-radius定义一个或两个圆角半径，把边角变得圆滑一些；
为border-radius属性提供一个长度值或百分数值，得到的每个圆角形状相同；与padding属性一样，最多可以为border-radius提供四个值；四个值按顺时针排列，从左上角到右下角结束；少于四个字的规则与padding一样；
border-radius会改变元素的边框和背景的绘制方式，但是不会改变元素的形状；
- 轮廓outline
CSS定义了一个特殊的装饰方式，名为轮廓outline;实际使用时，轮廓一般直接绘制在边框外侧；轮廓的特点是：
1.轮廓不占空间；2. 轮廓可以不是矩形 3.通常在元素处于:focus状态时渲染，4.轮廓无法单独为一边设置独特的轮廓；
轮廓样式outline-style: 可选值有边框类似，不同的是轮廓没有hidden式样，多了auto式样；
轮廓宽度outline-width属性值参考边框
轮廓颜色outline-color
轮廓简写属性outline,同时设置以上三个属性；轮廓与边框的区别是，轮廓对布局完全没有影响，只是视觉上的效果；
- 外边距margin
元素之间有间隔的原因是元素有默认的外边距margin;
margin属性值得规则与padding一样；
外边距margin属性值可以是任何长度值；也可以设置百分数值；
与padding一样，每一边的外边距都有专门的属性可以设置；块级元素的上下边距会折叠；相邻的两个或多个上下外边距会折叠为其中最大的那个外边距；
按照CSS规范,被折叠的外边距其实是被重置为零了；
行内非置换元素的外边距设值时，元素的上下两边不受影响，行高也不受影响，元素的两端会有影响；
行内置换元素设置外边距时会对行高有影响；对左右也会影响到；
CSS能为任何元素设置内外边距和边框属性
