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

前端頁面的書寫順序

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

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

PSD切圖

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

Photoshop快捷鍵

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

兩種切圖方法

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

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

選中圖層

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

自由變化選區(qū)

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

放大縮小

alt+滑輪

查看圖層或模塊的寬高

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

修改字體、顏色等。

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

隱藏與顯示圖層或組。

隱藏：alt+點擊眼睛圖標，即只顯示或隱藏當前圖層、組。

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

編寫CSS代碼。

1. CSS樣式重置

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

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;}

移動重置代碼：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. 樣式的級聯(lián)

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

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

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

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

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

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

首先，它將檢查它試圖渲染的元素是否具有定義顏色值的內(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>

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

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

重要樣式

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

3. 繼承和非繼承屬性

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

繼承的屬性

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

非繼承屬性

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

4. 特異性和順序評估

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

CSS選擇器

一.基本CSS選擇器

有標記選擇器、類別選擇器、ID選擇器3種：

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

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

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

二.復(fù)合選擇器

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

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

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

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

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

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

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ī)則，對于組合選擇器，使用四元素組計算特異性:

對于內(nèi)嵌樣式，將第一個項目增加1
1 0 0 0

對于每個ID，將第二個項目增加1
0 1 0 0

對于每個類，偽類或?qū)傩詫⒌谌齻€項目增加1
0 0 1 0

對于每個元素或偽元素，將第4項增加1
0 0 0 1

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

1. 盡量保持選擇器的特異性盡可能低，因為它們更易于理解和維護。
2. 通常，建議在樣式表中組織選擇器，使其具有更高的特異性。
3. 避免使用ID選擇器，因為它們難以覆蓋。
4. 嘗試使用命名約定，如 BEM,BEMIT 或 SUIT 。

5.認識CSS單位

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

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

rem?是 CSS3 新增的一個相對單位(root em，根 em)，使用 rem 為元素設(shè)定字體大小時，仍然是相對大小， 但相對的只是 HTML 根元素。默認瀏覽器大小字體是 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; /*下標字*/
vertical-align:super; /*上標字*/
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; /*文字右對齊*/  
text-align:left; /*文字左對齊*/
text-align:center; /*文字居中對齊*/
text-align:justify; /*文字分散對齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對齊*/
vertical-align:bottom; /*垂直向下對齊*/
vertical-align:middle; /*垂直居中對齊*/
vertical-align:text-top; /*文字垂直向上對齊*/
vertical-align:text-bottom; /*文字垂直向下對齊*/

二、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)頁默認*/
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; /*向上對齊*/
background-position : buttom; /*向下對齊*/
background-position : left; /*向左對齊*/
background-position : right; /*向右對齊*/
background-position : center; /*居中對齊*

布局

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

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

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

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

前端知識太靈活多變，框架一年甚至幾個月大變血一次

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

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

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

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(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像素的空間。讓我們設(shè)置總寬度為250像素的元素:

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

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

box-sizing

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

content-box（默認）

布局所占寬度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疊加

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

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

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

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

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

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

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

塊級元素列表

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

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

display屬性

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

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

2.1）block 塊元素

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

2.2）inline 元素

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

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

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

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

2.4）display小結(jié)

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

BFC相關(guān)知識

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

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

哪些元素會生成 BFC

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

float屬性

3.1 浮動相關(guān)知識

float屬性的取值：

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

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

3.2 父元素高度塌陷問題

為什么要清除浮動，父元素高度塌陷 解決父元素高度塌陷問題：一個塊級元素如果沒有設(shè)置height，其height是由子元素撐開的。對子元素使用了浮動之后，子元素會脫離標準文檔流，也就是說，父級元素中沒有內(nèi)容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。

3.3 清除浮動的方法

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

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

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

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

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

方法六：父級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屬性定位

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

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

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

relative（相對定位）

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

absolute（絕對定位）

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

且如果元素為塊級元素（display屬性值為block)，那么它的寬度也會由內(nèi)容撐開。因為：

默認文檔流中塊級元素如果沒有設(shè)置寬度屬性，會自動填滿整行。

fixed(固定定位)

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

常見布局

如何居中一個元素

總結(jié)

切圖：

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

CSS編寫

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

布局

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

參考鏈接

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