1.简介从本节开始，我们将进入本系列的第三部分——css展示。本节将介绍css在页面上的几种布局和表现特性。包括两大类：文本、块。第一类——文字。这部分比较简单，比如设置字体大小，字体，颜色，背景颜色，是否加粗等，重点是设置字体，设置行高，和文字相关的距离要使用相对值（em）尽可能。还有一个重点是fontAwesome，网络上最流行的字体库，见《请用fontAwesome代替网页icon小图标》，这里不再赘述。2、什么是“盒子”padding、border和margin，即innermargin、border、outermargin，它们三者构成一个“盒子”。比如我收快递的时候，本来买的是小iPhone，结果收到的却是这么大的一个盒子。因为iphone白盒和iphone机器之间有间隔层（内缘），所以iphone白盒是有厚度的，虽然很薄（边框），中间有一层泡沫板（外缘）盒子和快递盒。这是一个典型的盒子。如上图所示，真正的内容就是这些文字。文本周围有10px的内边距，5px的边框和10px的外边距。3.盒子的宽度3.1设置固定宽度的情况在盒子模型中，我们设置的宽度是内容的宽度，而不是整个盒子的宽度。并且整个框的宽度是（内容宽度+填充宽度+边框宽度+边距宽度）的总和。这样，如果我们改变四个中的一个，就会导致盒子的宽度改变。它对我们不友善。 没关系，这个不友好的东西早就发现了，已经解决了，以后再说吧。3.2填满父容器的情况默认情况下，当div的display:block没有设置固定宽度时，该宽度会填满整个父容器。但是别忘了，这个div是一个盒子模型，它的整个宽度包括（contentwidth+paddingwidth+borderwidth+marginwidth），整个宽度填满父容器。那就是问题所在。如果父容器的宽度保持不变，如果我们手动增加margin、border或padding其中之一的宽度值，内容的宽度就会减小。在极端情况下，如果内容的宽度被压缩到不能再压缩的程度（比如一个字的宽度），那么浏览器就会强制父容器的宽度增加。这不是我们想看到的。3.3包裹内容的情况这种情况比较简单，盒子的宽度会随着内容宽度的增加而增加。4.看箱子的宽度。前面说过，给盒子模型设置宽度，结果只设置了内容的宽度，这是不合理的。如何解决这个问题呢？答案是：box-sizing:border-box如上图，div设置box-sizing:border-box；之后300px的boxwidth变成了(contentwidth+paddingwidth+borderwidth)之和（不包括marginwidth），更符合我们的实际需求。建议大家在给系统写css的时候，第一个样式是：大名鼎鼎的bootstrap在它的*选择器中也加入了box-sizing:border-box，我们何乐而不为呢？5.margin垂直重叠记住，margin有一个特点——垂直重叠，如下图，
的垂直margin是16px，那么两个
的垂直距离应该是16+16=32px，但是答案还是16px。因为垂直边距会重叠，所以大的会“吃掉”小的（大家可以自己试验）。6、用div画“三角形”“三角形”在日常网页中很常见，比如百度首页：当然可以用背景图和fontAwesome来实现这个效果，但是也可以用div来实现这个效果,很简单，可以封装通用：原理很简单：只显示边框的一侧，其他三侧设置为透明。