目標
按照Sketch設(shè)計稿，實現(xiàn)一個完整的頁面功偿，希望你學完這一些列課程后盆佣，能夠系統(tǒng)地掌握CSS往堡，真正玩轉(zhuǎn)CSS
課程內(nèi)容
首先下載素材文件（Windows用戶可以下載pdf版）
用Sketch打開文件后（可能會出現(xiàn)找不到字體的問題，字體下載）共耍，你可以通過commad + 1 將Artboard縮放至視口大小虑灰。
按住control + L可以顯示出柵格系統(tǒng)，柵格系統(tǒng)可以幫你快速排版痹兜。
如果你不熟悉sketch穆咐，想了解更多，同時不占用你寫代碼的時間字旭，可以看看這篇用Sketch制作登錄頁面的教程对湃。
我們之后會單獨推送一期sketch的教程，現(xiàn)在還是主要關(guān)注代碼遗淳。
準備工作
新建一個html文件和css文件
├── css
│ └── style.css
└── index.html
頁面模版
還記得在HTML的課程中拍柒，為了保持代碼的一致性并節(jié)省時間，保存的html模板么
大多數(shù)編輯器都允許你按照自己的風格定制模板
如果你用的atom屈暗，參考atom代碼補全snippets配置拆讯。
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>CSS Lesson 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
利用browser-sync實時刷新頁面
為了省去每次修改代碼后都要手動刷新頁面，我習慣使用browser-sync監(jiān)聽文件养叛，自動刷新瀏覽器
- 安裝Browsersync
npm install -g browser-sync - 運行Browsersync
browser-sync start --server --files index.html --files "css/*.css"
引入normalize.css
Normalize.css种呐，保證默認元素在不同瀏覽器上變現(xiàn)一致。
Normalize.css 只是一個很小的CSS文件弃甥，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性爽室。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的潘飘、為HTML5準備的優(yōu)質(zhì)替代方案〉羧保——來卜录，讓我們談一談 Normalize.css
導航頁面
根據(jù)設(shè)計稿，我們把整個頁面分為三個部分眶明，頭部艰毒、內(nèi)容區(qū)域、頁腳
<header class = "site__header">
</header>
<main class = "site__main">
</main>
<footer class = "site__footer">
</footer>
用BEM作為CSS的命名規(guī)范搜囱，雖然site__header丑了點丑瞧，但是在你代碼越來越多的時候，這個東西可以讓你的代碼沒那么混亂
BEM
BEM 其實很簡單蜀肘，有點面向?qū)ο缶幊痰囊馑及硇冢贿^比OOP還簡單直接扮宠。只要記住西乖，BEM是由Block(塊)，Element(元素)获雕，Modifier(修飾符)組成楣颠，__連接Element睁冬，--連接Modifier脚线；你把代碼按照模塊來組織。舉個例子：
.person{}
.person__avatar{}
.person__avatar--round{}
我們有一個person的Block攀例，每個人都有頭像船逮、名字、描述之類的粤铭，所以我們用到.person__element挖胃；頭像我們可能需要方的、圓的……都需要對這些進行單獨設(shè)置梆惯，所以這時候?qū)γ總€元素就用到Modifier酱鸭。代碼非常扁平是不是，如果按照我們以前的寫法垛吗，可能就是這樣：
.person{}
.person .avatar{}
.round{}
好像除了長一點凹髓，沒什么區(qū)別呀！
那現(xiàn)在加一個動物怯屉，加個狗吧：
.dog{}
.dog .avatar{}
.round{}
現(xiàn)在有個人養(yǎng)了一條狗扁誓，我們的HTML是這樣：
<div class = "person">
<div class = "avatar"></div> <!-- 人頭 -->
…
<!-- dog -->
<div class = "dog">
<div class = "avatar round"> <!-- 狗腦 -->
</div>
</div>
有沒有暈乎乎的感覺防泵，這兩個avatar是一樣的還是不一樣的，到底應(yīng)用了哪條樣式蝗敢，還有沒有公共的樣式+_+捷泞？（模塊這個東西看起來很懸，不同人理解可能也有偏差寿谴，但是你只要用著舒服就行了锁右，寫多了，你就知道到底怎么按模塊化來寫代碼了）
完成導航
HTML結(jié)構(gòu)
<header class="site__header">
<nav class="navbar">
<a class="navbar__brand" href="#">Company Logo</a>
<ul class="navbar__nav list-nostyle">
<li><a href="#">Platform</a></li>
<li><a href="#">About</a></li>
<li><a class="active" href="#">Sign Up</a></li>
</ul>
</nav>
</header>
運行
browser-sync start --server --files 'index.html' --files "css/*.css"
好了讶泰，改點樣式讓它看來好看點
- 給導航設(shè)置一個固定高度
- 去掉
li默認的樣式 - 左右布局
/* list with no style
========================================================================== */
/**
* 1. remove the margin and padding
* 2. remove list style
*/
.list-nostyle{
margin: 0;
padding: 0;
}
.list-nostyle li{
list-style: none;
}
/* site header
========================================================================== */
.site__header{
height: 70px;
}
.navbar{
padding: 15px 20px;
}
.navbar__brand{
float: left;
}
.navbar__nav{
float: right;
}
.navbar__nav li{
display: inline-block;
}
首先咏瑟，我們?yōu)轫撁荚O(shè)置了一個70px的高度
通過浮動來實現(xiàn)Logo左對齊，導航右對齊
因為<li>是塊級元素痪署，所以會產(chǎn)生換行码泞，我們把li設(shè)置成inline-block，在同一行顯示
<a>標簽我們一般更習慣不要下劃線狼犯，而是通過顏色來突出是鏈接余寥，所以我們把<a>標簽的下劃線統(tǒng)一去掉：
a{
text-decoration: none;
}
現(xiàn)在你看到的應(yīng)該是這樣：
inline-block空格的問題
現(xiàn)在回去看看，有個問題需要處理一下：
PlatForm悯森，About宋舷，Sign Up之間為什么會有間隙？**
使用了inline-block瓢姻，inline-block會表現(xiàn)得像文字排版一樣祝蝠，<li>和<li>之間存在空白符，所以最后產(chǎn)生了一個空格
有各種奇奇怪怪的方法可以解決這個問題幻碱，這里我只給出我平常用得最多的兩個方法：
-
設(shè)置font-size: 0;（如果瀏覽器設(shè)置了最小字體大小要跪绎狭。。褥傍。）
ul{ font-size: 0; } li{ display: inline-block; font-size: 1rem; } -
去掉標簽之間的空白符
<li>…</li><li>…</li><li>…</li>
喜歡哪個方法就用哪個儡嘶，快自己把這個bug修復(fù)了
美化導航樣式
.navbar__brand, .navbar__nav li a{
display: inline-block;
box-sizing: border-box;
height: 40px;
padding: 8px 24px 8px 24px;
border: 1px solid #ccc;
line-height: 22px;
}
這里加了邊框方便調(diào)試：
-
為了能夠設(shè)置在垂直方向上的高度(
padding-top/bottom, margin-top/bottom, height)：我們設(shè)置行內(nèi)元素<a>display為inline-block行內(nèi)元素是就像水一樣，垂直方向上設(shè)置高度都沒用摔桦，所以有時候需要設(shè)置為
inline-block或block社付。
有個形象的比喻承疲，inline=>水邻耕，inline-block=>果凍，block=>石頭 -
設(shè)置
box-sizing為border-box默認情況下燕鸽，元素的height只包括內(nèi)容區(qū)域兄世。但是我們經(jīng)常需要加入border或者padding，元素的高度的實際高度是
padding + border + height啊研，每次你都需要減去padding和border御滩。除了計算麻煩之外鸥拧，用百分比設(shè)置高度的時候，你經(jīng)常會遇到內(nèi)容區(qū)域溢出的問題：<style> html,body{ height: 100%; width:100%; } .container{ padding: 0 20px; } </style> </head> <body> <div class="container"> Hello World </div> </body>[站外圖片上傳中……(4)]
-
通過
line-height進行垂直居中：
css中水平居中很簡單削解，但是垂直居中就不好做了富弦。通過設(shè)置line-height等于height可以讓文字垂直居中。關(guān)于居中的問題氛驮，參考[譯]CSS居中完全指南：http://www.voyax.me/2016/04/19/譯-CSS居中完全指南/最后還有一個大坑Ｍ蠊瘛！矫废！
[站外圖片上傳中……(5)]
為啥navbar高度沒有撐開Ｕ电汀！蓖扑！好吧唉铜，都是float的錯，float導致元素溢出了文檔流律杠，從而父元素的高度不會隨著float元素高度的變化而適應(yīng)潭流。
單從float的角度說，有兩個思路：
- 將父元素變成BFC
- 清除浮動
代碼如下：
通過overflow觸發(fā)BFC
.navbar::after{
overflow: hidden;
}
clearfix（關(guān)于clearfix的討論俩功，看看stackoverflow上的這個討論）
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
總結(jié)
這一章主要帶著你踩踩坑幻枉，介紹了幾個開發(fā)中經(jīng)常遇到的問題。下一張我們看看在實際開發(fā)中诡蜓，如果從零開始組織你的代碼熬甫，同時逐步完成這個頁面。
