CSS 设计（一）

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

当提及布局的时候，我们会想到 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
从以上效果来看，我们可以总结两点。一，对于设置为 block 的元素而言，需要独占一行。二，设置为 inline 的元素虽然其 padding， border 都生效了，但是只有左右方向影响了其布局，而上下方向不影响实际布局。

其实，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
不利用这个属性，我们当然也有其它方式设置居中，比如说 - 首先为元素设置 position 属性，再为元素设置值相同的 top 和 bottom，然后指定元素的高度，最后将 margin-top 和 margin-bottom 的值设置为 auto，这样就可以达到垂直居中的效果。
.vertical-outer{
position: relative;
width: 480px;
height: 320px;
background-color: rgba(102,102,102,.3);
}

    .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 属性只是将元素在原始位置进行微调。

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

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

在网页排版中，我们可能会经常用 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

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