-
box-sizing屬性讓我們可以控制盒子模型尺寸的計(jì)算方式陶衅，它有兩個(gè)可選的值鳍置，分別是content-box和border-box.
- border-box : 實(shí)際寬高 = 指定寬高
- content-box : 實(shí)際寬高 = 指定寬高 + padding + border
對(duì)于兩個(gè)相同的盒子模型恤溶，它們的 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;
}
它們的效果如下
- 當(dāng)提及布局的時(shí)候冯挎，我們會(huì)想到
display屬性杀饵，它的三個(gè)可選值是我們不得不去關(guān)心的莽囤。
- block : 寬度由父元素決定，高度由內(nèi)容決定切距。當(dāng)然也可以手動(dòng)設(shè)定元素的寬高朽缎。
- inline : 寬度高度均由內(nèi)容決定，而且手動(dòng)指定的寬高也不起作用谜悟。
- inline-block : 寬高均有內(nèi)容決定话肖，可以手動(dòng)設(shè)置寬高。
下面來測試一下 block 和 inline赌躺，CSS 代碼如下狼牺。
.block{
display: block;
border: 1px solid #000;
padding: 16px;
}
.inline{
display: inline;
border: 1px solid #000;
padding: 16px;
}
效果如下
從以上效果來看，我們可以總結(jié)兩點(diǎn)礼患。一是钥，對(duì)于設(shè)置為
block 的元素而言掠归，需要獨(dú)占一行。 二悄泥，設(shè)置為 inline 的元素雖然其 padding虏冻， border 都生效了，但是只有左右方向影響了其布局弹囚，而上下方向不影響實(shí)際布局厨相。
其實(shí)，display 還有其它可選值鸥鹉，比如 table蛮穿，其實(shí)它和 inline-block 是類似的，不同的是它可以配合 table-cell 輕易的設(shè)置垂直居中效果毁渗。比如下面這樣践磅。
<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;
}
效果如下
不利用這個(gè)屬性，我們當(dāng)然也有其它方式設(shè)置居中灸异，比如說 - 首先為元素設(shè)置
position 屬性府适，再為元素設(shè)置值相同的 top 和 bottom， 然后指定元素的高度肺樟，最后將 margin-top 和 margin-bottom 的值設(shè)置為 auto檐春，這樣就可以達(dá)到垂直居中的效果。.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 的值設(shè)置為 static， 我們就可以稱元素是被擺放了位置的蹦狂，就可以為其指定 top, bottom, left, right誓篱。下面來看看 position 的可選值。
- static : 默認(rèn)值凯楔。設(shè)置的 top, bottom, left, right 都會(huì)被忽略窜骄，也就是沒有任何效果。
- absolute : 元素將從其原始布局位置刪除摆屯，并通過定位屬性相對(duì)于其最靠近的父位置定位邻遏。
- fixed : 元素將從其原始布局位置刪除，并相對(duì)于窗口定位虐骑。
- relative : 不同于 absolute 和 fixed, 元素保持在原始布局位置准验，而設(shè)置的 left, bottom, left, right 屬性只是將元素在原始位置進(jìn)行微調(diào)。
- 網(wǎng)頁設(shè)計(jì)中廷没，顏色是一個(gè)非常重要的工具糊饱，因?yàn)轭伾梢愿淖円粋€(gè)人的心情，從而改變其做出的一系列決定颠黎。所以另锋，我們需要掌握好顏色的使用滞项，適度的使用顏色。
demo04.png
很多人容易犯得一個(gè)錯(cuò)誤就是利用灰色(#ccc) 去代替一個(gè)具有透明度的黑色 (rgba(0,0,0,.2)) 夭坪。它們兩個(gè)看起來一樣文判，但是僅在背景為白色的時(shí)候！看看下面這個(gè)例子室梅。
demo05.png
在白色背景下戏仓，兩種效果確實(shí)看不出來明顯差異，但是一旦背景顏色不再為白色亡鼠，差異就十分明顯了赏殃。
瀏覽器重默認(rèn)的字體顏色是 #000， 我認(rèn)為這個(gè)顏色對(duì)所有人來說都是很直觀的拆宛，但是有些情況下我們用 #333 去代替它可能會(huì)有更好的效果嗓奢。為什么這么說呢？如果我們網(wǎng)頁的背景是純白色浑厚，而字體是純黑色，這種強(qiáng)烈的視覺對(duì)比效果可能產(chǎn)生視覺假象或眼睛疲勞根盒。還有一個(gè)更重要的原因是钳幅，我們可以將 #000 用來突出重點(diǎn)的內(nèi)容。
-
在網(wǎng)頁排版中炎滞，我們可能會(huì)經(jīng)常用
letter-spacing和text-align屬性敢艰， 但是這兩個(gè)屬性之間的合作并不完美，因?yàn)殚g距被添加到每個(gè)字母的右邊册赛，這樣再利用text-align可能就不是完美居中了钠导，可以利用padding-left來彌補(bǔ)這一點(diǎn)。
.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
在網(wǎng)頁設(shè)計(jì)當(dāng)中牡属，我們可以通過改變相鄰文字的font-weight和font-style屬性達(dá)到突出的目的，比如說下面這樣扼睬。
.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; }
好了逮栅，本篇文章就到這里。如有疑問窗宇，可在下方留言或者與我私聊措伐。
