笔心

之前刚学习CSS的时候，对于border的属性渲染结果的理解很想当然，一开始就自然而然的认为border属性就是给容器外边加上了四条直线，这种理解一直伴随我很长的时间，不过由于一般对于border属性的运用都很普通，因此也不会出现什么问题，而所看的一些有关CSS的书上也并未做更深的讲解，所以我未能及早的察觉出来。当然，有的人会说，正是你有这样理解，所以你也不可能想到利用border属性还能做出其他

上一期主要就border属性“不为人知”的一面做了一下解读，其实也谈不上什么解读，对我个人来讲，可能就是一个纠错的过程。分享出来，我想对于那些还不知道的人应该会有些许的帮助。我们现在已经理解了border属性的渲染方式，那么对此我们能有哪些不一般的用途了。如图1-1所示，这个是实际border属性渲染的效果。图1-1如果我们将内容区的大小（即容器的大小）设为0的话，那么可以

上期在谈到border的用途的时候，在最后列举的两个实例中均用到了一个transparent属性值，从字面意思也知道，这个属性值其实和颜色是并列的，不过它表示的是透明。一般的HTML标签在未指定其背景的时候默认就是透明的。我们发现在上个实例在谷歌浏览器中用调试工具查看其CSS属性的时候，transparent自动变成了如图1-1所示的rgba(0,0,0,0)。这说明两者基本是等价的。

box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。这句话有点绕，我理解为它是一种容器高宽的计算方法，具体是怎样的一种计算方法，和传统的计算方法又有什么区别，通过下面的例子我们可以很直观的了解到。       如图1-1所示，两个div均统一设置属性，然后针对第二个div设置

首先换行只适用于标签内的文本，并不作用于标签本身。以前在使用CSS换行的时候，老是犯糊涂，总把一些属性搞混。今天就来彻底把这些相关的属性给弄清楚。以前需要用到自动换行的时候，就想到了比如word-break，word-wrap及white-space这些属性。       用一个表格将上述的几个属性及其属性值做一下说明。属性属性值说明示例