不會(huì)CSS的后端不是好的程序猿

JS 對(duì)于后端小伙伴來說不算難點(diǎn)，能夠順手的使用，涉及到 CSS 就會(huì)有點(diǎn)懵逼了。為了讓后端同事更愉快的玩轉(zhuǎn) CSS，做一個(gè)好的切圖仔，下面我將講一些如何提升自己的 CSS 技巧，幫助后端同事快速還原 PSD。

前端頁(yè)面的書寫順序

1. 先看設(shè)計(jì)稿
2. 編寫 HTML 代碼
3. 編寫 CSS 代碼
4. 編寫 JS 代碼

今天我們主要關(guān)注編寫 CSS 代碼，在寫 CSS 代碼時(shí)，我們需要從PSD中拿到各種數(shù)據(jù)，如何精準(zhǔn)的拿到這些數(shù)據(jù)，保證頁(yè)面能夠像素級(jí)還原呢？

PSD切圖

打開PSD，我們看到一個(gè)PSD里面有很多的智能參考線，設(shè)計(jì)師在設(shè)計(jì)的過程中，根據(jù)某些模塊給出適當(dāng)?shù)闹悄軈⒖季€，幫助前端同事更好的去切圖。
如果我們發(fā)現(xiàn)要切的圖沒有參考線，那我們可以手動(dòng)加，智能參考線有助于我們更精準(zhǔn)的丈量元素的尺寸，比如寬高、內(nèi)邊距、外邊距、行高等。

Photoshop快捷鍵

Photoshop常用快捷鍵?http://www.ip138.com/photoshop/、https://helpx.adobe.com/cn/photoshop/using/default-keyboard-shortcuts.html

兩種切圖方法

第一種：使用切片工具
1.使用切片工具劃分好你要切的模塊
2.點(diǎn)擊'存儲(chǔ)為web所有格式'，在存儲(chǔ)之前可以修改圖片的品質(zhì)來改變文件的大小。
3.在存儲(chǔ)時(shí)切片有三種選擇方式，按照自己的需要選擇。

第二種：使用矩形選擇工具
1.使用矩形選擇工具選中要切的模塊
2.ctrl+shift+c合并拷貝圖層
3.ctrl+n新建文檔
4.ctrl+v粘貼圖層，保存。

選中圖層

切換到移動(dòng)工具
alt+鼠標(biāo)右鍵
或
ctrl+鼠標(biāo)左鍵
注：選擇有組與圖層兩個(gè)選項(xiàng)，根據(jù)自己的需要選擇，一般我們選中圖層。

自由變化選區(qū)

選中圖層，ctrl+t自由變化選區(qū)。
設(shè)置欄包括x/y,w/h，度等選項(xiàng)。

放大縮小

alt+滑輪

查看圖層或模塊的寬高

方式一：點(diǎn)擊圖層的縮略圖+ctrl,可在信息項(xiàng)里面看到圖層的寬高。
方式二：ctrl+T自由變化圖層大小，也可以在信息項(xiàng)里看到圖層的寬高。
方式三：使用矩形選擇工具量。

修改字體、顏色等。

設(shè)計(jì)師做完了psd圖后，有時(shí)我們需要自己改動(dòng)一些細(xì)節(jié)。
選中圖層后，點(diǎn)擊圖層的縮略圖，可以直接修改顏色。
或直接調(diào)為前景色或后景色。ctrl+delete(后景色)，alt+delete(后景色)

隱藏與顯示圖層或組。

隱藏：alt+點(diǎn)擊眼睛圖標(biāo)，即只顯示或隱藏當(dāng)前圖層、組。

上面簡(jiǎn)單的所有了切圖，還有一些更高級(jí)的，比如圖片雪碧，圓角，陰影和蒙版等。在切圖的時(shí)候，我們已經(jīng)想到了怎么寫好HTML代碼，這時(shí)寫好HTML代碼。

編寫CSS代碼。

1. CSS樣式重置

首先引入一個(gè)CSS重置樣式，這樣子可以幫助我們統(tǒng)一各個(gè)元素在不同瀏覽器之間的差異。

PC重置代碼：http://js.3conline.com/pconline/common/css/zt_base.2.0.css

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0; padding:0;}
html{-webkit-text-size-adjust:none;}
body{background:#4f90d2; font:12px/2em Microsoft Yahei,tahoma,HELVETICA; text-align:center;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img{border:none; vertical-align:top}
i,em{font-style:normal;}
input,select,option,textarea{font-size:12px;}
a{text-decoration:none;} a:hover{text-decoration:underline;}

/* function */
noscript,.spanclass,.pannel,.hidden{display:none;}
.show,.block{display:block;}
.mark,.fl,.mark-sub,.fr{display:inline;}
.mark,.fl{float:left;} .mark-sub,.fr{float:right;}
.fs-14{font-size:14px;} .fs-16{font-size:16px;}
.clear{clear:both; height:0; line-height:0; font-size:0; overflow:hidden;}
.clearfix{*zoom:1} .clearfix:after{content:"\20"; clear:both; height:0; display:block; overflow:hidden;}

移動(dòng)重置代碼：http://js.3conline.com/common/css/wapzt_base_rem.1.0.css

@charset "utf-8";
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body{line-height:1.5;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){input{line-height:normal!important;}}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}

2. 樣式的級(jí)聯(lián)

瀏覽器如何確定應(yīng)將哪些樣式應(yīng)用于某個(gè)元素有一套嚴(yán)格的規(guī)則。 這些基本特征稱為級(jí)聯(lián)，繼承和特異性。

級(jí)聯(lián)是CSS的基本特征。 它是一種定義如何組合源自不同源的屬性值的算法。 正如其名稱所強(qiáng)調(diào)的那樣，它位于CSS的核心：層疊樣式表

瀏覽器使用以下順序查找屬性值。

1. 內(nèi)聯(lián)樣式 - 使用元素上的style全局屬性定義的樣式
2. 嵌入式樣式 - 在樣式元素中定義的樣式
3. 外部樣式 - 使用鏈接元素導(dǎo)入的樣式
4. 用戶樣式 - 由瀏覽器的用戶提供
5. 瀏覽器樣式 - 瀏覽器應(yīng)用的默認(rèn)樣式

例如，為一個(gè)元素選擇文本的顏色。

瀏覽器將需要為CSS顏色屬性找到一個(gè)值。

首先，它將檢查它試圖渲染的元素是否具有定義顏色值的內(nèi)聯(lián)樣式，如下所示：

<a?style="color:red"?href="http://www.w3cschool.cn">Visit the website</a>

如果沒有內(nèi)聯(lián)樣式，瀏覽器將查找包含適用于元素的樣式的樣式元素，如下所示：

<style type="text/css">
a  {
   color: red;
}
</style>

如果沒有這樣的樣式元素，瀏覽器會(huì)查看通過鏈接元素加載的樣式表。
如果仍然找不到顏色屬性，則使用默認(rèn)的瀏覽器樣式。

屬性的前三個(gè)來源（內(nèi)聯(lián)樣式，嵌入樣式和樣式表）統(tǒng)稱為作者樣式。
用戶樣式表中定義的樣式稱為用戶樣式，瀏覽器定義的樣式稱為瀏覽器樣式。

重要樣式

您可以通過將屬性值標(biāo)記為重要來覆蓋正常的級(jí)聯(lián)順序。
通過對(duì)聲明附加！important?，可以將單個(gè)值標(biāo)記為重要。

3. 繼承和非繼承屬性

繼承概念不同于級(jí)聯(lián)，它基本上是在DOM中CSS屬性如何從父級(jí)傳遞給子級(jí)的過程。
并非所有屬性都會(huì)自動(dòng)繼承。 以下是CSS屬性的完整參考以及它們是否被繼承 。
最常用屬性的一些示例：

繼承的屬性

• 顏色 (color)
• 字體系列 (font-family)
• 字體大小 (font-size)
• 字體樣式 (font-style)
• 字體重量 (font-weight)
• 文本對(duì)齊 (text-align)

非繼承屬性

• 背景 (background)
• 邊界 (border)
• 余量 (margin)
• 填充 (padding)
• 顯示 (display)
• 浮動(dòng) (float)
• 寬度 (width)
• 高度 (height)

4. 特異性和順序評(píng)估

在CSS中，可以通過其類，ID或?qū)傩砸愿鞣N方式選擇元素。 因此，當(dāng)某個(gè)元素具有由樣式表中放置的幾個(gè)不同選擇器應(yīng)用的不同規(guī)則時(shí)，瀏覽器如何確定要應(yīng)用哪些選擇器的樣式？

CSS選擇器

一.基本CSS選擇器

有標(biāo)記選擇器、類別選擇器、ID選擇器3種：

1.標(biāo)記選擇器
每一種HTML標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱，如h1,p,div等等

2.類別選擇器
類別選擇器的名稱可以由用戶自定義
格式如下：.class{color:green;font-size:20px;}

3.ID選擇器
與類別選擇器相試
格式如下：#id{color:green;font-size:20px;}

二.復(fù)合選擇器

就是兩個(gè)或者多個(gè)基本選擇器，通過不同方式連接而成的選擇器

1.“交集”選擇器：由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集，其中第一必須是標(biāo)記選擇器，第二個(gè)必須是類別選擇器或者ID選擇器，兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫
如：h3.class{color:red;font-size:23px;} div#special{...} 注意兩者間沒有空隔

2.“并集”選擇器：同時(shí)選中各個(gè)基本選擇器所選擇的范圍，任何形式的選擇器都可以，并集選擇器是多個(gè)選擇器通過逗號(hào)連接而成的，
格式如:h1,h2,h3{color:red;font-size:23px;} 注意中間是有逗號(hào)分隔

三.后代選擇器
如：p span{color: red;} span{color: blue;}

四.子選擇器
也就是只有對(duì)直接后代有影響的選擇器，而對(duì)“孫子”以及對(duì)個(gè)層的后代不產(chǎn)生作用。
p>span{color:blue;}

如果有兩個(gè)樣式應(yīng)用于在同一級(jí)別定義的元素，并且它們都包含瀏覽器正在尋找的CSS屬性的值。
要決定使用哪個(gè)值，瀏覽器會(huì)評(píng)估每個(gè)樣式的特異性，并選擇最具體的值。
瀏覽器通過計(jì)算四個(gè)不同的特征來確定樣式的特異性：

1. 內(nèi)聯(lián)樣式

<ul?style="list-style-type:none"></ul>

1. 樣式選擇器中的id值的數(shù)量

#users-chart { }
#main-nav { }

1. 選擇器中的類、偽類和屬性的數(shù)量

.container { }
.list-item:first-child { }
[href^='https://'] { }

1. 選擇器中元素名稱和偽元素的數(shù)量

div { }
p::after { }

根據(jù)以上規(guī)則，對(duì)于組合選擇器，使用四元素組計(jì)算特異性:

對(duì)于內(nèi)嵌樣式，將第一個(gè)項(xiàng)目增加1
1 0 0 0

對(duì)于每個(gè)ID，將第二個(gè)項(xiàng)目增加1
0 1 0 0

對(duì)于每個(gè)類，偽類或?qū)傩詫⒌谌齻€(gè)項(xiàng)目增加1
0 0 1 0

對(duì)于每個(gè)元素或偽元素，將第4項(xiàng)增加1
0 0 0 1

加上有一個(gè)important 就更加棘手了，那么如何處理這些特異性呢？

1. 盡量保持選擇器的特異性盡可能低，因?yàn)樗鼈兏子诶斫夂途S護(hù)。
2. 通常，建議在樣式表中組織選擇器，使其具有更高的特異性。
3. 避免使用ID選擇器，因?yàn)樗鼈冸y以覆蓋。
4. 嘗試使用命名約定，如 BEM,BEMIT 或 SUIT 。

5.認(rèn)識(shí)CSS單位

px?像素(Pixel)。絕對(duì)單位。像素 px 是相對(duì)于顯示器屏幕分辨率而言的，是一個(gè)虛擬長(zhǎng)度單位，是計(jì)算 機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果 px 要換算成物理長(zhǎng)度，需要指定精度 DPI。

em?是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置， 則相對(duì)于瀏覽器的默認(rèn)字體尺寸。它會(huì)繼承父級(jí)元素的字體大小，因此并不是一個(gè)固定的值。

rem?是 CSS3 新增的一個(gè)相對(duì)單位(root em，根 em)，使用 rem 為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小， 但相對(duì)的只是 HTML 根元素。默認(rèn)瀏覽器大小字體是 1rem=16px 。

CSS常用屬性

一 CSS文字屬性：

color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設(shè)置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標(biāo)字*/
vertical-align:super; /*上標(biāo)字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字右對(duì)齊*/  
text-align:left; /*文字左對(duì)齊*/
text-align:center; /*文字居中對(duì)齊*/
text-align:justify; /*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對(duì)齊*/
vertical-align:bottom; /*垂直向下對(duì)齊*/
vertical-align:middle; /*垂直居中對(duì)齊*/
vertical-align:text-top; /*文字垂直向上對(duì)齊*/
vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/

二、CSS邊框空白

padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白

三：CSS邊界樣式

margin-top:10px; /_上邊界_/
margin-right:10px; /_右邊界值_/
margin-bottom:10px; /_下邊界值_/
margin-left:10px; /_左邊界值_/

四、CSS背景樣式

background-color:#F5E2EC; /*背景顏色*/  
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁(yè)默認(rèn)*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/

background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對(duì)齊*/
background-position : buttom; /*向下對(duì)齊*/
background-position : left; /*向左對(duì)齊*/
background-position : right; /*向右對(duì)齊*/
background-position : center; /*居中對(duì)齊*

布局

這部分可能是后端同事比較頭庝的問題：

• 想讓某個(gè)元素居中，網(wǎng)上找了半天也沒有一個(gè)好的方法？
• 加個(gè)了float：left怎么整個(gè)頁(yè)面都亂套了？
• 怎么讓這個(gè)元素?fù)Q行，怎么讓那個(gè)元素不換行？
• 怎么把這幾個(gè)div橫向排列不換行？
• 看別人的代碼滿屏都是div，眼花繚亂？
• 書了看了，網(wǎng)上的教程也跟著學(xué)了，為什么等到自己要真正開始寫的時(shí)候卻寫不出來，那么多標(biāo)簽、那么多css樣式，要用哪個(gè)？

針對(duì)這些問題，我個(gè)人的總結(jié)如下：

前端知識(shí)基本靠實(shí)踐和經(jīng)驗(yàn)，而這恰恰是經(jīng)典書籍所欠缺的，書本上都是介紹基本概念，每一個(gè)標(biāo)簽、每一個(gè)樣式的使用，而實(shí)際頁(yè)面需要多方面結(jié)合；

前端知識(shí)太靈活多變，框架一年甚至幾個(gè)月大變血一次

總之，就是后臺(tái)開發(fā)寫前端很難，思維模式差別很大。雖然大多數(shù)人認(rèn)為寫后臺(tái)的才是真的的抵達(dá)技術(shù)巔峰，每天接觸的是服務(wù)器、數(shù)據(jù)庫(kù)、高并發(fā)、海量、TCP、黑客。但是卻被前端的標(biāo)簽、樣式弄得死去活來。

接下來我們就來理解幾個(gè)和布局相關(guān)的概念

• 理解盒子模型。width、height、margin、padding、bodder
• position屬性定位
• float屬性
• display屬性
• 行內(nèi)元素和塊級(jí)元素

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語(yǔ)是用來設(shè)計(jì)和布局時(shí)使用。
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：

不同部分的說明：
Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

下面的例子中的元素的總寬度為300px：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

讓我們自己算算：
300px (寬)

• 50px (左 + 右填充)
• 50px (左 + 右邊框)
• 50px (左 + 右邊距)

= 450px

試想一下，你只有250像素的空間。讓我們?cè)O(shè)置總寬度為250像素的元素:

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

最終元素的總寬度計(jì)算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計(jì)算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

box-sizing

CSS3中新增了一種盒模型計(jì)算方式：box-sizing熟悉。盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計(jì)算元素寬高的區(qū)別如下：

content-box（默認(rèn)）

布局所占寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

布局所占寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

margin疊加

外邊距疊加是一個(gè)相當(dāng)簡(jiǎn)單的概念。 但是，在實(shí)踐中對(duì)網(wǎng)頁(yè)進(jìn)行布局時(shí)， 它會(huì)造成許多混淆。 簡(jiǎn)單的說， 當(dāng)兩個(gè)或更多個(gè)垂直邊距相遇時(shí)， 它們將形成一個(gè)外邊距。這個(gè)外邊距的高度等于兩個(gè)發(fā)生疊加的外邊距的高度中的較大者。但是注意只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距疊加。 行內(nèi)框、 浮動(dòng)框或絕對(duì)定位框之間的外邊距不會(huì)疊加。

一般來說， 垂直外邊距疊加有三種情況：

元素自身疊加 當(dāng)元素沒有內(nèi)容（即空元素）、內(nèi)邊距、邊框時(shí)， 它的上下邊距就相遇了， 即會(huì)產(chǎn)生疊加（垂直方向）。 當(dāng)為元素添加內(nèi)容、 內(nèi)邊距、 邊框任何一項(xiàng)， 就會(huì)取消疊加。
相鄰元素疊加 相鄰的兩個(gè)元素， 如果它們的上下邊距相遇，即會(huì)產(chǎn)生疊加。
包含（父子）元素疊加 包含元素的外邊距隔著 父元素的內(nèi)邊距和邊框， 當(dāng)這兩項(xiàng)都不存在的時(shí)候， 父子元素垂直外邊距相鄰， 產(chǎn)生疊加。 添加任何一項(xiàng)即會(huì)取消疊加。

行內(nèi)元素和塊級(jí)元素

相信大家都接觸過這兩個(gè)概念了，那我問一個(gè)問題，為什么要搞清楚這兩個(gè)概念，很簡(jiǎn)單明確知道哪些標(biāo)簽是行內(nèi)元素、哪些標(biāo)簽是塊級(jí)元素對(duì)布局有直接影響。主要區(qū)別是：

行內(nèi)元素只是行內(nèi)的元素，不換行
塊級(jí)元素是一個(gè)元素沾滿一行，如果兩個(gè)塊級(jí)元素寫在一起（比如兩個(gè)div），默認(rèn)是分兩行展示，除非設(shè)置float或者display（后面會(huì)講到），此外塊級(jí)元素還可以設(shè)置邊距（盒子模型屬性）。
行內(nèi)元素設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效。

因此，判斷一個(gè)位置到底是用行內(nèi)元素還是塊級(jí)元素很明顯的一個(gè)判斷方法就是是否需要換行或者是否需要設(shè)置長(zhǎng)寬和上下邊框/距。 首先選用行內(nèi)元素，比如在一行中有一個(gè)文字需要變顏色/加粗，那么直接用行內(nèi)元素span即可。

塊級(jí)元素列表

<address>?定義地址
<caption>?定義表格標(biāo)題
<dd>?定義列表中定義條目
<div>?定義文檔中的分區(qū)或節(jié)
<dl>?定義列表
<dt>?定義列表中的項(xiàng)目
<fieldset>?定義一個(gè)框架集
<form>?創(chuàng)建 HTML 表單
<h1>?定義最大的標(biāo)題
<h2>?定義副標(biāo)題
<h3>?定義標(biāo)題
<h4>?定義標(biāo)題
<h5>?定義標(biāo)題
<h6>?定義最小的標(biāo)題
<hr>?創(chuàng)建一條水平線
<legend>?元素為 fieldset 元素定義標(biāo)題
<li>?標(biāo)簽定義列表項(xiàng)目
<noframes>?為那些不支持框架的瀏覽器顯示文本，于 frameset 元素內(nèi)部
<noscript>?定義在腳本未被執(zhí)行時(shí)的替代內(nèi)容
<ol>?定義有序列表
<ul>?定義無(wú)序列表
<p>?標(biāo)簽定義段落
<pre>?定義預(yù)格式化的文本
<table>?標(biāo)簽定義 HTML 表格
<tbody>?標(biāo)簽表格主體（正文）
<td>?表格中的標(biāo)準(zhǔn)單元格
<tfoot>?定義表格的頁(yè)腳（腳注或表注）
<th>?定義表頭單元格
<thead>?標(biāo)簽定義表格的表頭
<tr>?定義表格中的行

行內(nèi)元素列表
<a>?標(biāo)簽可定義錨
<abbr>?表示一個(gè)縮寫形式
<acronym>?定義只取首字母縮寫
<b>?字體加粗
<bdo>?可覆蓋默認(rèn)的文本方向
<big>?大號(hào)字體加粗
<br>?換行
<cite>?引用進(jìn)行定義
<code>?定義計(jì)算機(jī)代碼文本
<dfn>?定義一個(gè)定義項(xiàng)目
<em>?定義為強(qiáng)調(diào)的內(nèi)容
<i>?斜體文本效果
<img>?向網(wǎng)頁(yè)中嵌入一幅圖像
<input>?輸入框
<kbd>?定義鍵盤文本
<label>?標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）
<q>?定義短的引用
<samp>?定義樣本文本
<select>?創(chuàng)建單選或多選菜單
<small>?呈現(xiàn)小號(hào)字體效果
<span>?組合文檔中的行內(nèi)元素
<strong>?語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容
<sub>?定義下標(biāo)文本
<sup>?定義上標(biāo)文本
<textarea>?多行的文本輸入控件
<tt>?打字機(jī)或者等寬的文本效果
<var>?定義變量

display屬性

display 樣式?jīng)Q定了元素的展現(xiàn)形式。

對(duì)于后端小伙伴來說，除了 none 外，只需要再了解三個(gè)值就足夠用了，它們分別是 block，inline-block，inline。

2.1）block 塊元素

塊元素在瀏覽器中展示時(shí)，通常會(huì)以新行來開始（和結(jié)束）。

2.2）inline 元素

行內(nèi)（inline）元素會(huì)在一行內(nèi)從左向右排布，如果一行排滿了，會(huì)往下一行堆疊。

2.3）inline-block 行內(nèi)塊

行內(nèi)塊元素既可以設(shè)置高寬，又可以像行內(nèi)元素一樣并排排列。

常見的行內(nèi)塊元素有 img input button select等。

2.4）display小結(jié)

各個(gè)元素都有自己默認(rèn)的 display 屬性，但我們可以給元素設(shè)置 display 屬性覆蓋默認(rèn)的屬性。
比如給 div 設(shè)置 display: inline-block，就可以讓塊兒并排排列了。給 span 設(shè)置 display:inline-block，就可以設(shè)置高寬了。

BFC相關(guān)知識(shí)

定義：BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有 Block-level box 參 與， 它規(guī)定了內(nèi)部的 Block-level Box 如何布局，并且與這個(gè)區(qū)域外部毫不相干。
BFC布局規(guī)則
BFC 就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

BFC這個(gè)元素的垂直方向的邊距會(huì)發(fā)生重疊，垂直方向的距離由margin決定，取最大值
BFC 的區(qū)域不會(huì)與浮動(dòng)盒子重疊（清除浮動(dòng)原理）。
計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

哪些元素會(huì)生成 BFC

根元素
float 屬性不為 none
position 為 absolute 或 fixed
display 為 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不為 visible

float屬性

3.1 浮動(dòng)相關(guān)知識(shí)

float屬性的取值：

left：元素向左浮動(dòng)。
right：元素向右浮動(dòng)。
none：默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。
浮動(dòng)的特性：

浮動(dòng)元素會(huì)從普通文檔流中脫離，但浮動(dòng)元素影響的不僅是自己，它會(huì)影響周圍的元素對(duì)齊進(jìn)行環(huán)繞。
不管一個(gè)元素是行內(nèi)元素還是塊級(jí)元素，如果被設(shè)置了浮動(dòng)，那浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，可以設(shè)置它的width和height，因此float常常用于制作橫向配列的菜單，可以設(shè)置大小并且橫向排列。

3.2 父元素高度塌陷問題

為什么要清除浮動(dòng)，父元素高度塌陷 解決父元素高度塌陷問題：一個(gè)塊級(jí)元素如果沒有設(shè)置height，其height是由子元素?fù)伍_的。對(duì)子元素使用了浮動(dòng)之后，子元素會(huì)脫離標(biāo)準(zhǔn)文檔流，也就是說，父級(jí)元素中沒有內(nèi)容可以撐開其高度，這樣父級(jí)元素的height就會(huì)被忽略，這就是所謂的高度塌陷。

3.3 清除浮動(dòng)的方法

方法1：給父級(jí)div定義 高度 原理：給父級(jí)DIV定義固定高度（height），能解決父級(jí)DIV 無(wú)法獲取高度得問題。 優(yōu)點(diǎn)：代碼簡(jiǎn)潔 缺點(diǎn)：高度被固定死了，是適合內(nèi)容固定不變的模塊。（不推薦使用）

方法二：使用空元素，如<div class="clear"></div> (.clear{clear:both}) 原理：添加一對(duì)空的DIV標(biāo)簽，利用css的clear:both屬性清除浮動(dòng)，讓父級(jí)DIV能夠獲取高度。 優(yōu)點(diǎn)：瀏覽器支持好 缺點(diǎn)：多出了很多空的DIV標(biāo)簽，如果頁(yè)面中浮動(dòng)模塊多的話，就會(huì)出現(xiàn)很多的空置DIV了，這樣感覺視乎不是太令人滿意。（不推薦使用）

方法三：讓父級(jí)div 也一并浮起來 這樣做可以初步解決當(dāng)前的浮動(dòng)問題。但是也讓父級(jí)浮動(dòng)起來了，又會(huì)產(chǎn)生新的浮動(dòng)問題。 不推薦使用

方法四：父級(jí)div定義 display:table 原理：將div屬性強(qiáng)制變成表格 優(yōu)點(diǎn)：不解 缺點(diǎn)：會(huì)產(chǎn)生新的未知問題。（不推薦使用）

方法五：父元素設(shè)置 overflow：hidden、auto； 原理：這個(gè)方法的關(guān)鍵在于觸發(fā)了BFC。在IE6中還需要觸發(fā) hasLayout（zoom：1） 優(yōu)點(diǎn)：代碼簡(jiǎn)介，不存在結(jié)構(gòu)和語(yǔ)義化問題 缺點(diǎn)：無(wú)法顯示需要溢出的元素（亦不太推薦使用）

方法六：父級(jí)div定義 偽類:after 和 zoom?http://nicolasgallagher.com/micro-clearfix-hack/

.clearfix:after, .clearfix:before{
    display:table;
    content:"";
}
.clearfix:after{
    clear:both;
}
.clearfix {*zoom:1;} //照顧IE6，IE7就可以了

position屬性定位

元素在頁(yè)面中的布局遵守一套文檔流的方式，默認(rèn)的定位屬性值為static。它其實(shí)是未被設(shè)置定位的。

元素如果被定位了，那么它的top,left,bottom,right值就會(huì)生效，能設(shè)置定位的屬性是relative,absolute和fixed。

需要注意的另一點(diǎn)是被定位的元素層次(z-index)會(huì)得到提高。

relative（相對(duì)定位）

設(shè)置了相對(duì)定位之后，通過修改top,left,bottom,right值，元素會(huì)在自身文檔流所在位置上被移動(dòng)，其他的元素則不會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。

absolute（絕對(duì)定位）

設(shè)置了絕對(duì)定位之后，元素脫離文檔流，其他的元素會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。元素偏移是相對(duì)于是它最近的設(shè)置了定位屬性（position值不為static）的元素。

且如果元素為塊級(jí)元素（display屬性值為block)，那么它的寬度也會(huì)由內(nèi)容撐開。因?yàn)椋?/p>

默認(rèn)文檔流中塊級(jí)元素如果沒有設(shè)置寬度屬性，會(huì)自動(dòng)填滿整行。

fixed(固定定位)

設(shè)置了固定定位之后，元素相對(duì)的偏移的參考是可視窗口，即使頁(yè)面滾動(dòng)，元素仍然會(huì)在固定位置。

常見布局

如何居中一個(gè)元素

總結(jié)

切圖：

1. Photoshop快捷鍵
2. 切圖方法
3. 參考線
4. 信息圖
5. 行高和間距

CSS編寫

1. 樣式重置
2. 樣式級(jí)聯(lián)
3. 樣式繼承和非繼承
4. 特異性和順序評(píng)估

布局

1. 理解盒子模型。
2. 行內(nèi)元素和塊級(jí)元素
3. display屬性
4. float屬性
5. position屬性定位
6. 常用布局：垂直居中對(duì)齊

參考鏈接

https://10clouds.com/blog/css-backend-developers/
https://juejin.im/post/5a954add6fb9a06348538c0d
https://leohxj.gitbooks.io/front-end-database/
https://juejin.im/post/5a954add6fb9a06348538c0d