在上一章节，我们讨论了元素显示的基本特点。而在这一章，我们将看到css属性是如果改变元素显示外观的，这包括了padding，border，margin。

基本的元素Boxes

众所周知，所有的document元素都会生成一个长方形的box来布局，称为元素box，而且这个box是具有排他性的，同一个区域是不允许有多个box交叠的。这就是前端最熟悉的盒模型：

8-1.png

width 和 height

一般来说，这里说的宽度和高度指的都是上面图中inner edge的宽和高。而这两个属性最重要的一点就是它们不作用于inline的不可替代元素。举例来说，
如果你给链接设置了宽高，那么浏览器就会忽略这些声明：

a:link {color: red; background: silver; height: 15px; width: 60px;}

t8-1.png

t8-2.png

Padding

在盒模型中，从里到外的第2层就是padding：

t8-1.png

该属性接受任何的长度值，包括百分比。例如：

h2 {padding: 2em; background-color: silver;}

8-2.png

从上图中我们发现，padding也是在背景的覆盖范围的。
默认来说，元素是没有padding的。但一般情况下我们还是希望有padding的，不然border有时候看起来就离内容太近了：

8-3.png

另外padding是由方向的设置顺序的，来看下：

padding: top right bottom left

h1 {padding: 10px 20px 15px 5px;}

而且每个方向上，你所用的长度单位都可以是不一样的，举个列子：

h2 {padding: 14px 5em 0.1in 3ex;} /* value variety! */

8-4.png

简化输入

有时候你会碰到相同的padding数值，例如

p {padding: 0.25em 1em 0.25em 1em;} /* TRBL - Top Right Bottom Left */

这可以简化为：

p {padding: 0.25em 1em;}

这是怎么实现的呢？其实在CSS内部定义了一套规则：

1. 若果left没有，那么就用right的值；
2. 如果bottom没有，就用top的值；

3. 如果right没有， 就用top的值。
   更直观的可以参考下图：

   
   
   8-5.png

换句话说，如果只给了三个值，那么第四个left就会拷贝right的值。如果只给定2个值，那么第三个拷贝第一个，第4个拷贝第二个。如果只给了一个值，那么所有值都从它身上拷贝。

单侧的padding

这个属于大家非常熟悉的部分了：

t8-2.png

padding的百分比数值

百分比的计算核心在于标准的确定，在padding中，其标准就是父元素的内容区域的宽度。举个例子：

p {padding: 10%; background-color: silver;}

<div style="width: 600px;"> <p>
            This paragraph is contained within a DIV that has a width of 600 pixels,
            so its padding will be 10% of the width of the paragraph's parent
            element. Given the declared width of 600 pixels, the padding will be 60
            pixels on all sides.
</p> </div>
<div style="width: 300px;"> <p>
            This paragraph is contained within a DIV with a width of 300 pixels,
            so its padding will still be 10% of the width of the paragraph's parent.
            There will, therefore, be half as much padding on this paragraph as that
            on the first paragraph.
</p> </div>

8-8.png

设置百分比的padding存在一个问题，就是当父元素未设置宽度，而且随着浏览器会变化宽度的情况，那么这个padding的宽度也会跟着一起变动。

inline 元素的paddng

如果对一个inline元素施加padding是不会改变元素的高度的，例如：

strong {padding-top: 25px; padding-bottom: 50px;}

这是因为对于不可见的背景情况下，padding是被设置为透明的，所以上面的声明不会改变行高。但如果设置了背景，情况就不一样了：

strong {padding-top: 0.5em; background-color: silver;}

8-10.png

上面我们看到了处理padding top和bottom的情况，但是left和right的padding有点不同。如果对inline元素设置了left和right的padding是有效果的：

strong {padding-left: 25px; background: silver;}

8-11.png

strong {padding-left: 25px; padding-right: 25px; background: silver;}

8-12.png

那如果inline元素跨行了会怎么样呢？

strong {padding: 0 25px; background: silver;}

8-13.png

很自然的，left作用于开头，而right作用于结尾。

可替换元素的padding

我们还是拿图片来举例，试着为图片添加padding：

img {background: silver; padding: 1em;}

不管可替换元素是block的还是inline的，这一padding都会加上，如下图所示：

8-14.png

Borders

在padding外面一层的为border，默认来说，background的颜色的边界就是在border这层。而每个border都有三部分组成：宽度，厚度和样式。对于宽度来说，默认值为medium，一般来说是2px。但有没有发现平常我们很少注意到，每个元素的border宽度已经设置好了？那是因为border的样式默认设置为none，所以我们压根看不到。最后来说说border默认的颜色，就是它的前景色（foreground color）。
另外刚说了背景区域到border位置，但是到border的内边界还是外边界没说。其实按照CSS的标准定义，这个需要扩展到外边界，因为有些border是dotted的。

border的样式设置

border的样式是最重要的，因为你不设置，它就压根不出来。

t8-3.png

CSS中定义了10中不同的样式，包括默认的none，列举如下：

8-16.png

其中最难搞得就是double，border样式为两行，而其中的空白的宽度就是border-width的宽度。而且CSS标准中并没有规定两条线的粗细的标准，都依赖浏览器去实现。
下面来看看另外需要颜色的border类型：inset，outset，groove，ridge

8-17.png

a:link img {border-style: outset;}

image.png

默认来说，border的颜色是基于元素的颜色。但是颜色的变化又得完全依赖浏览器去实现，来看看不同的实现：

image.png

多种样式

在border-style属性中是允许同时定义多种border的：

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

这样设置的结果是什么呢？那就是top border为solid，right border为dashed， bottom border为dotted ，left border为solid。就像之前定义的padding一样。
来看个具体的例子：

p.new1 {border-style: solid none dashed;} 
p.new2 {border-style: solid none dashed none;}

image.png

单侧的样式

如果想要设置单侧的样式，可以使用下列的一系列属性：

image.png

来看个具体的例子，设置h1三边包围：

image.png

h1 {border-style: solid solid solid none;}
/* the above is the same as the below */
h1 {border-style: solid; border-left-style: none;}

上面需要注意的是，针对第二种方案，必须将border-left-style样式放在后面，不然就会被后者替换。

border宽度

设置完style后，接下来就需要设置宽度width：

image.png

对应的单侧的设置为：

image.png

总共有4种方式来设置border的宽度，可以是像4px这样的数值，也可以是另外3个关键词（thin，medium，thick）。但要注意这三个关键词没有对应具体的数值，按照CSS标准，只要层层加厚就可以，依赖于浏览器实现。

image.png

我们假定一个段落p有个背景色和border style

p {background-color: silver; border-style: solid;}

border的width默认为medium，我们将其修改下：

p {background-color: silver;
border-style: solid; border-width: thick;}

来玩个极限的，将宽度设置为50px：

p {background-color: silver; padding: 0.5em;
border-style: solid; border-width: 50px;}

image.png

当然也可以设置单侧的宽度：

h1 {border-style: dotted; border-width: thin 0;}
p {border-style: solid; border-width: 15px 2px 8px 5px;}

image.png

去掉border

想要去掉border非常简单：

p {border-style: none; border-width: 20px;}

哪怕设置了宽度，如果style被设置为了none，那么border也不会显示，那这是为什么呢？这是因为如果将style设置为none，那么CSS就会将其视为是不存在的，然后自动将其宽度设置为0，无论你自己定义了什么。就像一个杯子已经空了，那么再来描述他是半满的是没有任何意义的。
这一点为什么重要呢，因为很多人容易忘记来声明一个border的样式。例如：

h1 {border-width: 20px;}

border的颜色

image.png

来看个颜色的示例：

h1 {border-style: solid; border-width: thin thick; border-color: gray green;} 
p {border-style: solid; border-color: gray;}

image.png

当然也可以为不同的side设置不同的颜色：

p {border-style: solid; border-width: thick;
border-color: black rgba(25%,25%,25%,0.5) #808080 silver;}

如果没有设置颜色，那么就会获取当前元素的前景色：

p.shade1 {border-style: solid; border-width: thick; color: gray;} 
p.shade2 {border-style: solid; border-width: thick; color: gray;
border-color: black;}

image.png

当然也可以设置单侧的border颜色：

h1 {border-style: solid; border-color: black; border-right-color: gray;}

image.png

透明的border

就像我们上面提到的，如果border没有style，那么久没有宽度。那如果碰到需要设置宽度但是border又不可见的情况怎么办？答案是将颜色设置为transparent。例如：

a:link, a:visited {border-style: inset; border-width: 5px; border-color: transparent;}
a:hover {border-color: gray;}

image.png

简化版border属性

试想下这种情况，如果要针对某一边添加widith，style和color。如果单独设置的话其实还是蛮麻烦的：

h1 {border-bottom-width: thick; /* option #1 */ border-bottom-style: solid; border-bottom-color: gray;}
h1 {border-width: 0 0 thick; /* option #2 */ border-style: none none solid; border-color: gray;}

但如果可以简化的话，那就方便很多了：

h1 {border-bottom: thick solid rgb(50%,40%,75%);}

image.png

针对每个side属性的简化顺序为：

image.png

完全可以按照上面的定义来设置更复杂的border设置：

h1 {border-left: 3px solid gray;
border-right: green 0.25em dotted; border-top: thick goldenrod inset; border-bottom: double rgb(13%,33%,53%) 10px;}

image.png

而且这些值得顺序也是不用担心的，下面的规则和上面的是一样的：

h1 {border-bottom: 3px solid gray;} 
h2 {border-bottom: solid gray 3px;} 
h3 {border-bottom: 3px gray solid;}

另外值得注意的是，在简化版中避免重复的类型值，比如两个width等：

h3 {border-top: thin thick solid purple;} /* two width values--WRONG */

这会导致浏览器直接忽略这条规则。

全局的border

现在我们回到border属性本身：

image.png

来看看怎么用的吧：

h1 {border: thick silver solid;}

这个会自动应用到每个方向上：

h1 {border-top: thick silver solid;
border-bottom: thick silver solid;
border-right: thick silver solid;
border-left: thick silver solid;} /* same result as previous example */

image.png

inline元素的border

inline元素之前已经讲了很多了，现在主要简单讲几个需要注意的点。
首先就是不论border设置的width多厚，inline元素的line height都不会改变：

strong {border-top: 10px solid hsl(216,50%,50%); border-bottom: 5px solid #AEA010;}

image.png

top和bottom的border是不可以的，但是left和right都是可以的：

strong {border-left: 25px double hsl(216,50%,50%); background: silver;}

image.png

而对于可替换元素来说，border是会影响行高的：

img {border: 1em solid rgb(216,108,54);}

image.png

border 角落的圆滑过渡

为了支持圆角的边框，border引入了border-radius属性来设置：

image.png

如果想要实现边角的圆角过渡，可以如下设置：

#example {border-radius: 2em;}

image.png

如果给定的是一个百分比值，那么结果很可能就是一个椭圆，因为长宽的基准值不一样：

#example {border-radius: 33%;}

image.png

另外，跟其他元素一样，border-radius也可以设置多个值,位置从左上沿顺时针到底部左侧。

#example {border-radius: 1em /* Top Left */
2em /* Top Right */ 3em /* Bottom Right */ 4em; /* Bottom Left */
}

而参数个数为3个的时候也是一样的，第4个参考第2个：

#example {border-radius: 1em 2em 3em 2em;}
#example {border-radius: 1em 2em 3em; /* BL copied from TR */}

image.png

而在上图中重点到不是边角，而在于内容区域的右下角也发生了圆滑过渡，这是因为内容区域的背景和padding的背景不同所致，我们将在后面一章中详细讨论。
border-radius在原理上修改的是border和background的渲染，而不是盒子模型本身，来具体看下：

image.png

更加复杂的边角设置

刚刚我们看到了设置单个值得情况，那如果设置2个值会怎么样呢？如果我们想要在水平方向设置3英寸，而在垂直高度设置1英寸。我们不能直接这样写：

border-radius: 3ch 1ch

因为这样我们会将左上，右下对角线一个宽度，而右上和左下对角线有一个宽度。而是应该使用：

#example {border-radius: 3ch / 1ch;}

而这相当于下面的表达式：

#example {border-radius: 3ch 3ch 3ch 3ch / 1ch 1ch 1ch 1ch;}

下面是一个简单的例子：

#example {border-radius: 1em / 2em;}

image.png

接下来来个更复杂的：

#example {border-radius: 1em 2em / 2em 3em;}

image.png

角的渲染

不同的颜色和样式在角的位置的渲染效果是不同的：

image.png

上面第一个是简单的圆角，第二个在厚度上出现了变化。第三个颜色和厚度是一样的，但是角的曲线从solid变成了double。而且样式间的过渡被阻断了。第四个我们把厚度和样式做了改变。第5第6个开始出现颜色的变化，但是都是直接的改变而没有渐变。而第七种情况则是厚度相同，颜色发生渐变，但是可以看到，只有外侧发生了变化，而内侧还是直角，示例如下：

#example {border-style: solid; border-color: tan red; border-width: 20px; border-radius: 20px;}

单独的圆角属性

image.png

值得注意的是，这次是不同在水平和垂直方向加/的，来看下：

#example {border-radius:
1.5em 2vw 20% 0.67ch / 2rem 1.2vmin 1cm 10%; }
#example {
border-top-left-radius: 1.5em 2rem; border-top-right-radius: 2vw 1.2vmin; border-bottom-right-radius: 20% 1cm; border-bottom-left-radius: 0.67ch 10%;
}

上面两个是一样的。

image的border

如果你想要使用一张图片来作为border，那么可以使用border-image-source：

image.png

让我们使用一张单个圆点的图片作为border背景：

border: 25px solid; 
border-image-source: url(i/circle.png);

image.png

这里需要注意几个地方，如果没有定义border:25px solid; 按照之前的说法，没有style，border其实默认是不显示的。另外就是border-width其实就是后面border图片的宽度。

那令人奇怪的是，为什么图片只出现在角落里，边上为什么没有，而这就需要用到下面这个属性了：

image.png

slice也是接收4个值，完全遵从top，right，bottom， right的CSS默认赋值流程，而且数值也是基于百分比的值。

image.png

我们就以3 x 3 的网格图为例来看下效果：

border: 25px solid; 
border-image-source: url(i/circles.png); 
border-image-slice: 33.33%;

image.png

注意到中间的一块空了，这是因为css中自动把中间的内容设置为empty，具体会在后面讲解原理。
slice属性的不同百分比对应不同的边缘裁切效果：

image.png

这就是我们为什么选取3 x 3网格图的原因，可以清晰的看到裁剪后的边框效果。除了上面的百分比，我们也可以使用数字，一般对于栅格图来说就是像素值，来看个例子：

border: 25px solid; 
border-image-source: url(i/circles.png); 
border-image-slice: 25;

image.png

回到之前的中心空白问题，这其实可以通过fill来填充回来：

border: 25px solid; 
border-image-source: url(i/circles.png); 
border-image-slice: 25 fill;

image.png

而且从效果上来说会覆盖到其他的背景元素之上，因此可以作为背景的替代。
同时之前我们看到的宽度都是相同的，而其实可以为border的4个方向设置不同的宽度，然后border-image会自动匹配到对应宽度：

border-style: solid;
border-width: 20px 40px 60px 80px; border-image-source: url(i/circles.png); border-image-slice: 50;

image.png

调整图片宽度

如果想要自己来设置border图片的宽度，可以使用border-image-width：

image.png

border-image-width其实和border-image-slice差不多，而不同的是前者就是border box本身。为了更好理解这个意思，我们假定宽度设置为1em:

border-image-width: 1em;

其示意图如下：

image.png

边框都是1em宽，那么如果来填充呢，这里涉及多个属性，由border-image-slice生成的图片要经过border-image-repeat的处理，然后显示在border-image-width定义的盒子里面。

border-image-width: 1em; 
border-image-slice: 33.3333%;

border: 2px solid; 
border-image-source: url(stars.gif); 
border-image-width: 12px; 
border-image-slice: 33.3333%;

image.png

如果设置border-image-width: 1，那么image的实际区域将有border-width决定，也就是说，下面两个申明是一样的：

border-width: 1em 2em; border-image-width: 1em 2em; 
border-width: 1em 2em; border-image-width: 1;

创建一个border overhang

之前我们已经定义了不少的宽度和slice，那么下一个问题就是如何保证border不覆盖到内容。我们当然可以添加很多的padding，但那看上去很傻，而实际上我们可以通过border-image-outset来处理这种情况。

image.png

outset属性和slice的最大区别就是一个朝外，一个朝里，保证image区域不会影响到内容区域。来看个例子：

border: 2px solid; 
padding: 0.5em; 
border-image-slice: 10; 
border-image-width: 1; 
border-image-outset: 8px;

image.png

调整重复的模式

在上面的例子中我们看到了不少的拉伸图片的例子，不过有时候还是挺丑的，借助border-image-repeat，我们可以控制图片的重复模式：

image.png

我们来挨个过一遍每个属性，首先是最熟悉的stretch属性，基本之前的都是这个，借助拉伸来匹配border side区域的边框。

repeat：顾名思义就是实现图片的重复显示。

image.png

round 有些不同，他会依据边框的宽度和图片的大小，自动做计算，然后拉伸。举个例子，比如top 的border side宽度为420px， 而图片为50px， 那么420/50=8.4，round以后变成8.最后显示的效果就是显示8张重复的图，然后每张的宽度为52.5px。

最后一个值是space，和round差不多，都做了计算四舍五入操作，不同的是图片总是向下舍去来保证图片不形变。

border image的缩略写法

image.png

由于border-image相关的属性比较多，而且每个都支持多个数值的输入，所以在省略中添加了斜杠/符号来分割不同的属性：

.example {
border-image-source: url(eagles.png); border-image-slice: 40% 30% 20% fill; border-image-width: 10px 7px; border-image-outset: 5px; border-image-repeat: space;
}
.example {border-image: url(eagles.png) 40% 30% 20% fill / 10px 7px / 5px space;} 
.example {border-image: url(eagles.png) space 40% 30% 20% fill / 10px 7px / 5px;} 
.example {border-image: space 40% 30% 20% fill / 10px 7px / 5px url(eagles.png);}

当然，如果只提供少数的字段，那么其他字段就会显示默认值，例如下面两种就是一致的：

border-image: url(orbit.svg);
border-image: url(orbit.svg) stretch 100% / 1 / 0;

Outlines

CSS定义了一种特殊的装饰元素，成为outline。一般情况下，outline就在border的外面直接渲染。按照标准中定义的，outline主要有三种相较于border不同的地方：

1. outline不占用空间
2. outline可以不是长方形的
3. 浏览器在：focus状态渲染outline
4. outline是没有方向性的，也就是不能指定单个的outline。

我们首先来看看不同的outline属性吧：

outline 样式

image.png

outline的 样式和border还是很接近的：

image.png

与border-style不同的是，outline-style没有缩略写法，没有outline-top-style这种。

outline width

image.png

image.png

outline color

image.png

来看个例子：

h1 {outline-style: dashed; outline-width: 10px; outline-color: invert;}

image.png

outline的缩略写法

image.png

image.png

与border的区别

第一个主要区别：outline完全不影响layout，来看个例子：

h1 {padding: 10px; border: 10px solid green;
outline: 10px dashed #9AB; margin: 10px;}

image.png

上面的例子中如果我们应用margin，那么其实margin的开始的地方也是在border的外围，因此outline其实是不占用margin的空间的。
再来看个例子：

span {outline: 1em solid rgba(0,128,0,0.5);} 
span + span {outline: 0.5em double purple;}

image.png

Margins

一般用来分割元素的属性就是margin。下面来看看有margin和没有margin的效果对比：

image.png

最简单的定义margin的方式就是：

image.png

比如你要1/4英寸的margin给h1元素：

h1 {margin: 0.25in; background-color: silver;}

image.png

margin可以接受任意的测量长度，包括像素，英寸，猫咪，em等。不过margin的默认值为0.

margin的长度值

长度的赋值类似border,来看个例子：

h2 {margin: 14px 5em 0.1in 3ex;} /* value variety! */

margin

margin的百分比赋值

举个例子：

p {margin: 10%;}

<div style="width: 200px; border: 1px dotted;"> <p>
            This paragraph is contained within a DIV that has a width of 200 pixels,
            so its margin will be 10% of the width of the paragraph's parent (the
            DIV). Given the declared width of 200 pixels, the margin will be 20
            pixels on all sides.
</p> </div>
<div style="width: 100px; border: 1px dotted;"> <p>
            This paragraph is contained within a DIV with a width of 100 pixels,
            so its margin will still be 10% of the width of the paragraph's
            parent. There will, therefore, be half as much margin on this paragraph
            as that on the first paragraph.
</p> </div>

image.png

margin 的单侧属性

image.png

margin collapsing 冲突

这个我们在之前的章节中讲过，而最经典的例子就是；

p {margin: 1em 0;}

用户可以上下的间隔是2em，而实际的为1em，为了具体查看，我们用虚线来标记margin的边界：

image.png

margin的负值

对margin设置负值也是可以的，这会导致元素的box移出父元素框，和其他元素交叠在一起：

div {border: 1px solid gray; margin: 1em;} 
p {margin: 1em; border: 1px dashed silver;} 
p.one {margin: 0 -1em;}
p.two {margin: -1em 0;}

image.png

lnline 元素的margin

例如：

strong {margin-top: 25px; margin-bottom: 50px;}

虽然没啥作用，但是语法还是允许的。左右的margin是支持的：

strong {margin-left: 25px; background: silver;}

image.png

如果对inline 元素设置负的margin也是一样的，左右可以，上下不行：

strong {margin: -25px; background: silver;}

image.png

如果是可替换的inline 元素就又是另一回事了，上下左右的margin都是有效果的。如下图所示：

image.png

小结

在传统的web样式中添加margin，border，padding是CSS的特点。将之前的比较难弄的问题轻松的解决，慢慢体会到CSS的强大。