最外層大的功能區(qū)塊要使用 id 選擇器。像?class="header"、class="title"、class=footer?這些 class 的名稱太常見了离福，如果在css 中這樣定義樣式?.header{margin: 10px}很容易出現(xiàn)誤傷，因為這個 class 很有可能在其他地方也被使用炼蛤。正確的寫法是最外層功能區(qū)塊用 id:?<div id="header"></div> <div id="footer"></div>妖爷。
命名要能體現(xiàn)功能,比如 像?header、footer倒還好理朋，根據(jù)名字我知道它在頁面的作用絮识，但像?title、text1嗽上、text2讓人不明所以次舌。如何命名呢？最簡單的方法是看看頁面上對應(yīng)區(qū)塊是有什么作業(yè)兽愤，然后翻譯成英文彼念，用中橫線鏈接即可。比如id="services"浅萧、class="contact-wrap"逐沙。
對于一個單詞不好表示的命名用中橫線而不是下劃線連接,全小寫(這雖然不是強(qiáng)制規(guī)定，但有這個意識容易養(yǎng)成好的代碼習(xí)慣)洼畅。比如footer-wrap
去除無用標(biāo)簽吩案。 比如 items 的父容器只寫了個 div，這樣很不合適帝簇。要不把這個 div 加個 class 或者 id徘郭，讓它體現(xiàn)一定功能靠益。要不直接把這個 div 去掉。
根據(jù)頁面功能去寫樣式残揉。比如上面代碼中寫了兩個?.items?胧后，每個 items 里面包含兩個產(chǎn)品。代碼作者的意思可能是因為頁面上該區(qū)域有兩行抱环，每行兩個元素绩卤。但實際上這樣寫不但出現(xiàn)了很多無用標(biāo)簽，讓語義化也大打折扣江醇，在現(xiàn)實實現(xiàn)的時候也很麻煩。 正常的寫法是一個 ul,下面4個 li何暇，設(shè)置浮動陶夜，換行自己會換的。
樣式無重用裆站。比如上例中条辟，text1-wrap和text2-wrap的功能是類似的，都是讓區(qū)塊居中宏胯。我們可以用一個text-wrap代替即可羽嫡。
<body>
<div id="header">
<div class="layout">這是標(biāo)題</div>
??? </div>
??? <div id="product-desp">
??????? <div class="layout">這是大段描述</div>
??? </div>
??? <div id="service-desp">
??????? <div class="layout">這也是大段描述</div>
??? </div>
??? <div id="product-title">
??????? <div class="layout">這是中間某段標(biāo)題</div>
??? </div>
??? <div id="products">
??????? <div class="layout">
??????????? <ul class="items">
??????????????? <li>這是產(chǎn)品1</li>
??????????????? <li>這是產(chǎn)品2</li>
??????????????? <li>這是產(chǎn)品3</li>
??????????????? <li>這是產(chǎn)品4</li>
??????????? <ul>
??????? </div>
??? </div>
??? <div id="footer">
??????? <div class="layout">footer</div>
??? </div>
</body>
對于下面這種并列卡片的展示很多同學(xué)使用 inline-block，其實最建議大家使用浮動肩袍，副作用小并且兼容性好杭棵。
這個例子看起來簡單，實際上涉及很多知識點(diǎn)氛赐，浮動魂爪、清除浮動、外邊距合并艰管、BFC 取消外邊距合并滓侍、負(fù)邊距、盒模型寬度計算)
在使用浮動的時候需要注意下面幾個點(diǎn)：
下面是實現(xiàn)方式
高度
一般來說缸浦，元素的高度由子元素或者 padding 自動撐開夕冲，不需要給元素添加固定高度height(可以試想加入給容器添加了固定高度，里面的內(nèi)容發(fā)生變化了怎么辦)餐济。當(dāng)然有些場景下可以給元素添加固定高度耘擂，一般是針對高度在任何情況下都不需要變的場景，比如頂部導(dǎo)航條絮姆，或者上圖張卡片的高度(卡片某些卡片高度發(fā)生變化會導(dǎo)致浮動錯亂)醉冤。
居中
居中最場景的問題是絕對居中的濫用秩霍。前面課程里講了水平垂直絕對居中的寫法，很多同學(xué)在寫頁面時只要看到了類似水平垂直居中就使用絕對居中(absolute+負(fù) margin)蚁阳。實際上只有很有限的場景才使用絕對居中铃绒，比如父容器不寬高不固定，子元素需要在父親內(nèi)容絕對居中螺捐。
大部分情況下垂直居中只需要設(shè)置margin 或者 padding 填充即可颠悬，文字水平居中用?text-align:center， 塊級元素水平居中用margin-left:auto; margin-right: auto定血。
?
