用html/css 怎樣寫出頁(yè)面呢，看到每個(gè)頁(yè)面都有很多html標(biāo)簽和css 修飾屬性，難免會(huì)被嚇到。其實(shí)我們只要從整體到細(xì)節(jié)，即頁(yè)面結(jié)構(gòu)到元素來(lái)理解頁(yè)面是如何組合在一起的，就可以入門。

頁(yè)面是如何組合在一起的

首先頁(yè)面是由html 標(biāo)簽組成的，每個(gè)標(biāo)簽都代表一個(gè)盒子（如下圖），盒子有外邊距、邊框、內(nèi)邊距、內(nèi)容寬高等屬性。

box.png

1. 標(biāo)簽之間可以嵌套
2. display，決定標(biāo)簽是否獨(dú)占一行，或者由自身寬高決定所占位置
3. position，標(biāo)簽在頁(yè)面位置原本是從上到下排列，但可以改變

比如，下面代碼

<div class='border-show'>
    div 
</div>
<div class='border-show'>
    div 
</div>
<span class='border-show'>span</span>
<span class='border-show'>span</span>

<style>
   .border-show {
       border: 1px solid #000;
       margin: 50px;
       padding: 1px;
   }
</style>

效果如下，

div_span.png

display 屬性規(guī)定元素應(yīng)該生成的框的類型，明顯div 該屬性值為block，span 是inline（這是默認(rèn)值）?？梢酝ㄟ^(guò)修改display 來(lái)改變div 框的類型，常用屬性值如，block/inline-block/flex。常用的塊級(jí)元素有div p form ul ol li等，行內(nèi)元素span strong等。

position 屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型，常用的有：

1. static，默認(rèn)值，就是按照從上到下的順序排列頁(yè)面元素
2. fixed，指該元素，脫離原本的從上到下的順序，只以瀏覽器窗口為參照物，通過(guò) left/top/right/bottom 來(lái)控制和瀏覽器的相對(duì)位置。stickly 類似
3. relative，指該元素，相對(duì)從上到下的原本位置進(jìn)行移動(dòng)，通過(guò)left/top/right/bottom 來(lái)控制。注意，元素相對(duì)定位移動(dòng)之后，原來(lái)所占位置不會(huì)消失。
4. absolute，指該元素，相對(duì)于第一個(gè)含（position：除static 外）的父元素進(jìn)行移動(dòng)

left/top/right/bottom 的正負(fù)值含義如下圖

position.png

用什么布局寫頁(yè)面

利用靜態(tài)、相對(duì)、固定的定位方法，加上flex 彈性布局就可以用html/css 寫出頁(yè)面

1. 學(xué)習(xí)flex 彈性布局可以參照flex 布局語(yǔ)法篇--by 阮一峰
2. 學(xué)完語(yǔ)法之后，強(qiáng)烈建議動(dòng)手實(shí)現(xiàn)骰子的布局，你會(huì)發(fā)現(xiàn)剛剛的理解并不是這么準(zhǔn)確
3. 接下來(lái)也可以用flex 布局去實(shí)現(xiàn)常用的頁(yè)面布局，如柵格系統(tǒng)、圣杯布局、垂直居中等

整體到細(xì)節(jié)

理解了頁(yè)面的布局，就應(yīng)該去熟悉一下css 在頁(yè)面元素細(xì)節(jié)地方是怎樣控制的。比如css 選擇器、css偽類、css3的新特性

1. css 系統(tǒng)了解
2. css 屬性參考手冊(cè)
3. mozilla.org

我用html+css 簡(jiǎn)單實(shí)現(xiàn)了一下blog 的首頁(yè)面，效果如下圖，勿噴。這是源碼

html+css.png

這就是一些關(guān)于html/css 寫頁(yè)面的體會(huì)，歡迎大家給我留言，提建議，指出錯(cuò)誤，一起討論學(xué)習(xí)技術(shù)的感受！