CSS权威指南（八）基本元素框

1.基本元素框

   文档中每个元素都会生成一个矩形框，我们称之为元素框。这个框体描述元素在文档布局中所占的空间。因此，元素框之间是有影响的，涉及位置和尺寸。

（1）宽度和高度

   通常，我们会明确定义一个元素的高度，但是鉴于一定的历史原因，往往不明确定义元素的高度。默认情况下，元素的宽度指从左内边界到右边界的距离，元素的高度指从上内边界到下内边界的距离。

ps.这两个属性无法应用到行内非置换元素上

2.内边距

   紧邻元素内容去的是内边距，位于内容和元素框之间。设定内边距最简单的方法是使用padding属性。

（1）复值

   padding属性可分别指定四个方向的内边距值，像是padding: 10px 10px 10px 10px; 这样，顺序一次是上、右、下、左，实际上就是从上开始的顺时针顺序。CSS也考虑到了值少于四个的情况：

• 没有针对左边的值，使用针对右边的值
• 没有针对底边的值，使用顶边的值
• 没有针对右边的值，使用顶边的值

（2）单边内边距

   除了使用复值分别定义内边距外，CSS还提供了单独针对某一边的属性：padding-top,padding-right,padding-bottom,padding-left。

（3）行内元素的内边距

   内边距属性对行内元素的纵向不生效，也就是内边距不会改变行内元素的行高，但是对行内元素的背景可以看到内边距设置的效果。

（4）置换元素

   置换元素同样可以设置内边距

3.边框

   元素的内边距之外是边框。边框是元素内容和内边距周围的一到多条线段。默认情况下，元素的背景在边框的外边界处终止，不会延伸到外边距区域。边框在外边距内侧。边框有三个要素：宽度、式样、颜色。边框的默认宽度为medium，通常为2px。但是通常看不到边框，因为边框的式样为none。默认的边框颜色是元素自身的前景色。如果没有为边框声明颜色，则默认与元素中的文本颜色相同。如果元素没有文本，则继承父元素的文本颜色。

（1）边框的式样

   边框的式样共有10种，包括默认值none。其中hidden的值等价于none，但解决表格边框冲突的方式稍有不同。

• double，双线，两条线的宽度加上二者之间的间隙等于border-width的值。

（2）多重样式

   一个边框可以有多重样式，与padding一样，也是上右下左的定义顺序,也同padding一样，可以使用单边属性设置单独一边的边框样式。

p {
    border-style: solid dashed dotted solid;
}

（3）行内元素的边框

   也同padding一样，行内元素的border属性不会改变行内元素的行高。

（4）圆角边框

   元素边框的角是直的，可以使用border-radius属性定义一个圆角半径，把边角变得圆滑一些。同时border-radius属性也支持四个值，顺序依次是左上、右上、右下、坐下。填充的方式也和padding一样。

（5）图像边框

• 加载和裁剪边框图像：border-image-source指定资源位置，border-image-slice设置裁剪方式，border-image-width调整图片宽度。

（6）外推边框

   border-image-outset为了防止图像边框无法显示，使用外推边框可以将边框退至图片边框的范围外，从而退化会线性边框。

（7）调整重复方式

   border-image-repeat可以调整图片的重复方式

4.轮廓

   轮廓一般直接绘制在边框外侧。

• 轮廓不占空间
• 轮廓可以不是矩形
• 用户代理元素通常在元素处于：focus状态时渲染轮廓
• 轮廓更极端，无法单独为一边设置独特的轮廓

（1）轮廓式样（outline-style）

（2）轮廓宽度（outline-width）

（3）轮廓颜色（outline-color）

（4）轮廓与边框的区别

• 轮廓对布局完全没有影响，任何影响都没有。轮廓只是视觉上的效果。

5.外边距

   外边距在元素周围添加额外的空白。空白一般指其他元素不能共存的区域，而且在这片区域中，父元素的背景是可见的。设定外边距最简单的方法是使用margin属性。外边距的四个属性值的顺序同样是上右下左，同时也可以单独设置单边的外边距。同时元素的外边距可以设置为负值，设置为负值的外边距可能会使元素从父元素中冒出来，或者与其他元素重叠。