1. box-sizing 属性让我们可以控制盒子模型尺寸的计算方式，它有两个可选的值，分别是 content-box 和 border-box.

• border-box : 实际宽高 = 指定宽高

• content-box : 实际宽高 = 指定宽高 + padding + border

对于两个相同的盒子模型，它们的 CSS 代码如下。
.box-1{
box-sizing: border-box;
width: 120px;
height: 120px;
border: 3px solid #000;
padding: 12px;
}

    .box-2{
        box-sizing: content-box;
        width: 120px;
        height: 120px;
        border: 3px solid #000;
        padding: 12px;
    }

它们的效果如下

demo01.png

2. 当提及布局的时候，我们会想到 display 属性，它的三个可选值是我们不得不去关心的。

• block : 宽度由父元素决定，高度由内容决定。当然也可以手动设定元素的宽高。

• inline : 宽度高度均由内容决定，而且手动指定的宽高也不起作用。
• inline-block : 宽高均有内容决定，可以手动设置宽高。

下面来测试一下 block 和 inline，CSS 代码如下。

    .block{
        display: block;
        border: 1px solid #000;
        padding: 16px;
    }

    .inline{
        display: inline;
        border: 1px solid #000;
        padding: 16px;
    }

效果如下

demo02.png

其实，display 还有其它可选值，比如 table，其实它和 inline-block 是类似的，不同的是它可以配合 table-cell 轻易的设置垂直居中效果。比如下面这样。
<div class="vertical-outer">
<div class="vertical-inner">Now, i'm in center.</div>
</div>

    .vertical-outer{
        width: 480px;
        height: 320px;
        display: table;
        background-color: rgba(102,102,102,.3);
        text-align: center;
    }

    .vertical-inner{
        display: table-cell;
        font-size: 24px;
        vertical-align: middle;
    }

效果如下

demo03.png

    .vertical-inner{
        width: 100%;
        height:20px;
        font-size: 24px;
        position: absolute;
        text-align: center;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
    }

既然提到了 position, 那么就顺带将 position 的可选值介绍一下。一般来说，只要我们不将 position 的值设置为 static， 我们就可以称元素是被摆放了位置的，就可以为其指定 top, bottom, left, right。下面来看看 position 的可选值。

• static : 默认值。设置的 top, bottom, left, right 都会被忽略，也就是没有任何效果。

• absolute : 元素将从其原始布局位置删除，并通过定位属性相对于其最靠近的父位置定位。
• fixed : 元素将从其原始布局位置删除，并相对于窗口定位。
• relative : 不同于 absolute 和 fixed, 元素保持在原始布局位置，而设置的 left, bottom, left, right 属性只是将元素在原始位置进行微调。

3. 网页设计中，颜色是一个非常重要的工具，因为颜色可以改变一个人的心情，从而改变其做出的一系列决定。所以，我们需要掌握好颜色的使用，适度的使用颜色。
   
   demo04.png
   
   很多人容易犯得一个错误就是利用灰色(#ccc) 去代替一个具有透明度的黑色 (rgba(0,0,0,.2)) 。它们两个看起来一样，但是仅在背景为白色的时候！看看下面这个例子。
   
   demo05.png
   
   在白色背景下，两种效果确实看不出来明显差异，但是一旦背景颜色不再为白色，差异就十分明显了。

浏览器重默认的字体颜色是 #000， 我认为这个颜色对所有人来说都是很直观的，但是有些情况下我们用 #333 去代替它可能会有更好的效果。为什么这么说呢？如果我们网页的背景是纯白色，而字体是纯黑色，这种强烈的视觉对比效果可能产生视觉假象或眼睛疲劳。还有一个更重要的原因是，我们可以将 #000 用来突出重点的内容。

4. 在网页排版中，我们可能会经常用 letter-spacing 和 text-align 属性， 但是这两个属性之间的合作并不完美，因为间距被添加到每个字母的右边，这样再利用 text-align 可能就不是完美居中了，可以利用 padding-left 来弥补这一点。
   .example{
   background-image: -webkit-linear-gradient(top left, #723362, #9d223c);
   background-image: -o-linear-gradient(top left, #723362, #9d223c);
   background-image: linear-gradient(to bottom right, #723362, #9d223c);
   background-color: #9d223c;
   color: #fff;
   padding: 1em 0;
   font-weight: 300;
   font-size: 1.8em;
   text-transform: uppercase;
   text-align: center;
   letter-spacing: .4em;
   padding-left: .4em
   }
   效果如下。
   

   demo06.png
   
   在网页设计当中，我们可以通过改变相邻文字的 font-weight 和 font-style 属性达到突出的目的，比如说下面这样。
   .example{
   width: 480px;
   height: 140px;
   margin: 50px auto;
   background-color: #fff;
   color: #000;
   font-size: 1.5em;
   border: 15px solid #000;
   text-align: center;
   padding-top: 2.8em;
   }

    .content{
        letter-spacing: .4em;
        padding-left: .4em;
        font-weight: 700;
        text-transform: uppercase;
    }
   
    .author{
        font-size: .7em;
        font-weight: 300;
        color: #888;
        font-style: italic;
        letter-spacing: .12em;
        padding-left: .12em;
    }
   

demo07.png

好了，本篇文章就到这里。如有疑问，可在下方留言或者与我私聊。