????作為一個原生開發(fā)，越來越感覺到自身所掌握的技能，已經(jīng)無法在當(dāng)今的社會大環(huán)境中生存下去了。因此，是時候掌握一些其他技術(shù)了，我選擇的方向就是H5，也是為了能夠融入大前端這個組織之中。
????在剛接觸H5的相關(guān)開發(fā)工作時，令我最頭疼的就是H5的頁面布局，往往一個控件的位置都能浪費大半天的時間。不過也是應(yīng)為我沒有對css的布局方法進(jìn)行系統(tǒng)的學(xué)習(xí)，在最近系統(tǒng)學(xué)習(xí)了其布局方式之后，就覺得做起頁面來輕松多了。這里就來做個簡單的總結(jié)，希望對初學(xué)者能有所幫助。
CSS的三大特性
在此之前需要小伙伴自己去了解一下css的選擇器是個什么玩意兒。
繼承性：
作用: 給父元素設(shè)置一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性
注意點:
1.并不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性才可以繼承
2.在css的繼承中不僅僅是兒子可以繼承, 只要是后代都可以繼承
3.繼承性中的特殊性
??3.1a標(biāo)簽的文字顏色和下劃線是不能繼承的
??3.2h標(biāo)簽的文字大小是不能繼承的
應(yīng)用場景:
一般用于設(shè)置網(wǎng)頁上的一些共性信息, 例如網(wǎng)頁的文字顏色, 字體,文字大小等內(nèi)容
body{}
層疊性：
作用: 層疊性就是css處理沖突的一種能力
注意點:
層疊性只有在多個選擇器選中"同一個標(biāo)簽", 然后又設(shè)置了"相同的屬性", 才會發(fā)生層疊性
優(yōu)先級：
作用:當(dāng)多個選擇器選中同一個標(biāo)簽, 并且給同一個標(biāo)簽設(shè)置相同的屬性時, 如何層疊就由優(yōu)先級來確定
判斷的三種方式
1.間接選中就是指繼承
??如果是間接選中, 那么就是誰離目標(biāo)標(biāo)簽比較近就聽誰的
2.相同選擇器(直接選中)
??如果都是直接選中, 并且都是同類型的選擇器, 那么就是誰寫在后面就聽誰的
3.不同選擇器(直接選中)
??如果都是直接選中, 并且不是相同類型的選擇器, 那么就會按照選擇器的優(yōu)先級來層疊
??id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)
!important 用于提升某個直接選中標(biāo)簽的選擇器中的某個屬性的優(yōu)先級的, 可以將被指定的屬性的優(yōu)先級提升為最高。
CSS盒模型
意思就是在HTML中，所有的標(biāo)簽都是一個盒子。
如上圖：
寬高：內(nèi)容所在的區(qū)域
內(nèi)邊距(padding)：內(nèi)容到邊框的區(qū)域
邊框（border）：盒子的框框。
外邊距(margin)：盒子與盒子之間的距離。
注意點：
1.設(shè)置內(nèi)邊距之后, 標(biāo)簽占有的寬度和高度會發(fā)生變化。
2.設(shè)置內(nèi)邊距之后, 內(nèi)邊距也會有背景顏色。
3.外邊距的那一部分是沒有背景顏色的。
4.在默認(rèn)布局的垂直方向上, 默認(rèn)情況下外邊距是不會疊加的, 會出現(xiàn)合并現(xiàn)象, 誰的外邊距比較大就聽誰的。
設(shè)置padding和border之后想要保持盒子元素的寬度和高度不變
在實際開發(fā)中，我們經(jīng)常會有這種需求，需要設(shè)置一個元素的寬高為100*100，而且內(nèi)邊距為10，這時候我們可能會直接設(shè)置width/height=100，padding=10，這時候就會發(fā)現(xiàn)不是你想要的效果，你會發(fā)現(xiàn)你元素的寬高應(yīng)該是120，在這里就應(yīng)該了解一下以下的幾個概念：
在盒模型中的寬高有三種情況：
內(nèi)容的寬度和高度：就是通過width/height屬性設(shè)置的寬度和高度。
元素的寬度和高度：邊框+內(nèi)邊距+width/height。（設(shè)置背景色的時能看到的東西）
元素空間的寬度和高度：外邊距+邊框+內(nèi)邊距+width/height。
看了上面的東西之后，我們應(yīng)該做如下設(shè)置：
width/height=80
padding=10
這樣就是我們想看到的效果了。
在css3之后，多了一個box-sizing屬性，
box-sizing:content-box 元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容寬高
box-sizing:border-box 元素的寬高 = width/height的寬高
因此在之后在設(shè)置padding和border之后想要保持盒子元素的寬度和高度不變，就可以設(shè)置box-sizing為border-box。
水平居中
設(shè)置盒子中存儲的文字/圖片水平居中：
text-align: center
讓盒子自己水平居中：
margin:0 auto;
清空默認(rèn)邊距
在css中，很多標(biāo)簽有自己的默認(rèn)邊距，如果在自己不清楚的情況下，可能就會讓自己陷入沉思，為啥我這個兩個元素之間沒有邊距，他兩就是不貼在一塊兒呢？
所以在開發(fā)中，我們首先要做的就是要清空默認(rèn)的邊距：
1、通過通配符選擇器，選中所有標(biāo)簽，設(shè)置其margin/padding為0。簡單粗暴，性能不好。
*{
margin: 0;
padding: 0;
}
2、使用網(wǎng)上大神總結(jié)好的方法：
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
直接復(fù)制鏈接中的css屬性就好。
最后還有一點要說的就是，明明將邊距設(shè)置為0了，為啥兩個標(biāo)簽之前還是有邊距呢？
比如下面的一段代碼：
<div>
<span>行內(nèi)元素</span>
<span>行內(nèi)元素</span>
</div>
我們的想法應(yīng)該是：兩個元素應(yīng)該是相連的，但是你得到的結(jié)果卻是下面的樣式：
內(nèi)心是不是崩潰了，淡定淡定，這個中間的空隙是因為換行符造成的，只需要修改為下面的寫法就OK了。
<div>
<span>行內(nèi)元素</span><span>行內(nèi)元素</span>
</div>
CSS中的布局方法
在css里中的布局方法，大概有以下4中。
- 標(biāo)準(zhǔn)流
- 浮動流
- 定位流
- 伸縮布局（flex）
標(biāo)準(zhǔn)流：
瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式。
在css中，所有的標(biāo)簽分為三類，分別是塊級元素和行內(nèi)元素及行內(nèi)塊級元素。
塊級元素
獨自占據(jù)一行，可以設(shè)置寬高。
行內(nèi)元素
不會獨自占據(jù)一行，但是不能設(shè)置寬高。
行內(nèi)塊級元素
以上兩種方式很明顯滿足不了在現(xiàn)實開發(fā)中的需求，比如，div做為一個塊級元素，如果不能兩個放在一行不就很難受么？
因此，為了元素能夠設(shè)置寬高、同時又別獨自占領(lǐng)一行的空間，就出現(xiàn)了行內(nèi)塊級元素。
在css中可以通過設(shè)置display來修改其類型：
block 塊級
inline 行內(nèi)
inline-block 行內(nèi)塊級
在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
垂直排版：如果元素是塊級元素, 那么就會垂直排版
水平排版：如果元素是行內(nèi)元素/行內(nèi)塊級元素, 那么就會水平排版
浮動流：
浮動流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個元素左對齊或者右對齊。
通過設(shè)置 float: left/right; 來確定元素是左浮動還是右浮動，浮動流中并居中對齊, 也就是沒有center這個取值。
你可能想問，可以通過浮動，讓元素居中么？我這邊沒有發(fā)現(xiàn)這種操作哦。
另外：
在浮動流中是不區(qū)分塊級元素/行內(nèi)元素/行內(nèi)塊級元素的，所有及元素都可以設(shè)置寬高，所有元素都是可以進(jìn)行水平排版的。
浮動元素的脫標(biāo)
這是啥意思呢?直接看一下下面的代碼吧：
.box1{
/* float: left; */
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 150px;
height: 150px;
background-color: blue;
}
<div class="box1"></div>
<div class="box2"></div>
上面代碼所呈現(xiàn)的結(jié)果應(yīng)該很好理解的：
現(xiàn)在我們將紅色的改成浮動流就會出現(xiàn)下面的結(jié)果：
我是這樣理解的，這個標(biāo)準(zhǔn)流和浮動流就相當(dāng)于畫布上的兩個層級，如圖所示，
在這兩個層級中浮動流在上，標(biāo)準(zhǔn)流在下：
隱藏這兩個元素具體過程會分為下面幾步：
1、紅色的元素為浮動流布局，因此紅色的元素會繪制在浮動流層級的第一個位置。
2、藍(lán)色的元素為標(biāo)準(zhǔn)流布局，因此藍(lán)色的元素會繪制在標(biāo)準(zhǔn)流層級的第一個位置。
這個就是浮動元素的脫標(biāo)。
浮動元素的排序規(guī)則、字圍現(xiàn)象、貼靠現(xiàn)象
大伙看一下下面代碼所呈現(xiàn)出的樣式：
.box1{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
}
.box3{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4{
float: left;
width: 200px;
height: 200px;
background-color: tomato;
}
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
在這個實例中有以下幾個知識點：
浮動元素排序規(guī)則
- 左浮動的排在左邊，右浮動的排在右邊，按順序排列。
- 浮動元素浮動之后的位置, 由浮動元素浮動之前在標(biāo)準(zhǔn)流中的位置來確定。
第一點很好理解，這里要注意的是第二點，看了上面的文章可能會有同學(xué)認(rèn)為標(biāo)準(zhǔn)流和浮動流完全無關(guān)，兩類布局元素，在不同的層級進(jìn)行各自的布局，通過上面的例子，可以發(fā)現(xiàn)，很明顯不是這樣子的，就如上面第二點所描述的。浮動元素的布局，還是會受標(biāo)準(zhǔn)流布局的影響的。
如下圖所示，標(biāo)準(zhǔn)流中的元素會將浮動流布局層級分割為一塊一塊的。
字圍現(xiàn)象
我們通過觀察圖中的元素4，我們可以發(fā)現(xiàn)他的文本內(nèi)容并沒有被浮動元素所遮擋。浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現(xiàn)象。
貼靠現(xiàn)象
在浮動流中，元素默認(rèn)是并排排列的，如下圖
最開始時元素1后面是元素2最后是元素3；
這時我們不斷增加元素3的寬度，當(dāng)它的寬度超過父視圖時，就會換行顯示；
換行之后繼續(xù)增加3的寬度，當(dāng)它的寬度再次超過父視圖時，就會繼續(xù)換行顯示；
最后，當(dāng)元素3達(dá)到父視圖的邊緣時，繼續(xù)增加元素3的寬度，就算超出父視圖的寬，也不會再改變位置了。
清除浮動
在標(biāo)準(zhǔn)流中，子元素是可以撐起父視圖的高度的，但是在浮動流中是不可以的，這是如果需要實現(xiàn)標(biāo)準(zhǔn)流中的效果，就需要清除浮動，清除浮動的方式有很多，這里就只介紹一種：
設(shè)置父元素的overflow: hidden;屬性即可。
overflow: hidden;除了有清除浮動的作用之外，還有以下兩種作用：
1、可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉；
2、可以通過overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來。
定位流：
定位流中又可以分為下面幾類
- 相對定位
- 絕對定位
- 固定定位
- 靜態(tài)定位
相對定位
這個布局要注意的地方就是元素是相對于自己在標(biāo)準(zhǔn)流中的位置進(jìn)行布局的，也就是說坐標(biāo)原點為元素在標(biāo)準(zhǔn)流中左上角那個位置的。
相對定位是不脫離標(biāo)準(zhǔn)流的，并且會占用在標(biāo)準(zhǔn)流中的位置，因此當(dāng)給相對定位的元素設(shè)置margin/padding等屬性的時會影響到標(biāo)準(zhǔn)流的布局。
在相對定位中同一個方向（left/right、top/bottom）上的定位屬性只能使用一個。
我們弄個圖理解一下，
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 20px;
left: 20px;
margin-top: 20px;
}
.box3{
background-color: blue;
}
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
上圖中，綠色的元素在標(biāo)準(zhǔn)流中的布局位置，應(yīng)當(dāng)是在綠色框框者的那部分。改為相對定位并設(shè)置相關(guān)屬性之后，就會相對于綠色框進(jìn)行偏移。
絕對定位
絕對定位是脫離標(biāo)準(zhǔn)流的。
絕對定位中的坐標(biāo)原點怎么確立是要掌握的關(guān)鍵，坐標(biāo)原點確立的過程是這樣的，會在自己的祖先視圖中找到一個離自己最近的且為定位流（相對、絕對、固定）的元素，以該元素的左上角為坐標(biāo)原點。如果沒有找到符合條件的元素，則以body的左上角為坐標(biāo)原點。
如果以body為參考元素的話，是以網(wǎng)頁首屏的寬度和高度作為參考坐標(biāo)的。
在實際開發(fā)中，我們在使用絕對定位時，一般會設(shè)置其父元素為相對定位的方法，來確定該元素在父視圖中的位置。
絕對定位的元素水平居中
只需要設(shè)置絕對定位元素的left:50%;
然后再設(shè)置絕對定位元素的 margin-left: -元素寬度的一半px;
固定定位
固定定位可以讓元素不隨著滾動條的滾動而滾動。
固定定位是脫離標(biāo)準(zhǔn)流的。
靜態(tài)定位
這個就是默認(rèn)值。
伸縮布局（flex）
這個網(wǎng)上有很詳細(xì)的文章做教程的，我這里就只是簡單總結(jié)一下：
在伸縮布局中首先要了解的就是flex布局的主軸與側(cè)軸，主軸與側(cè)軸永遠(yuǎn)是垂直的，默認(rèn)情況下主軸是從左到右的。
flex-direction: 用于修改主軸起點的位置。
row: 從左到右 默認(rèn)值。
row-reverse: 從右到左。
column: 從上至下。
column-reverse: 從下至上。
主軸
justify-content:主軸上的對齊方式
flex-start:放在前邊(主軸的起點位置)
flex-end:放在后邊(主軸的終點位置)
center:放在中間
space-between:兩個元素之間的間隙等分。
space-around:每個元素左右都有等分的間隙。
在設(shè)置對齊方式時，元素的布局其實是分兩布處理的，
1、按照主軸方向布局元素；
2、按照對齊方式對元素位置調(diào)整。
側(cè)軸
align-items:側(cè)軸上的對齊方式
flex-start:放在上邊(側(cè)軸的起點位置)
flex-end:放在下邊(側(cè)軸的終點位置)
center:放在中間
baseline:讓所有元素的基線在一條直線上對齊(關(guān)于基線的概念大家可以自己去百度一下)
stretch:讓所有的元素的高度變?yōu)閭?cè)軸的高度(元素不可設(shè)置高度，如果某元素設(shè)置了高度，那么就不會被拉伸)
當(dāng)我們想單獨設(shè)置伸縮布局中某個子元素在側(cè)軸上的布局時，可以通過修改align-self來實現(xiàn)。
align-self:所有取值都和align-items一樣，只是align-self是作用于當(dāng)前元素的，align-items是作用于所有子元素的。
換行
默認(rèn)情況下如果伸縮容器的一行放不下所有的元素, 那么系統(tǒng)會自動等比壓縮所有的元素
flex-wrap:通過設(shè)置該屬性可以控制是否換行。
nowrap:默認(rèn)值，不換行進(jìn)行等比壓縮。
wrap:放不下就換行顯示。
wrap-reverse:放不下就換行 , 以行為單位進(jìn)行反轉(zhuǎn)。（本來在第一行的會放在最后一行，這是什么操作...）
align-content:設(shè)置發(fā)生換行之后的元素在側(cè)軸上的對齊方式
flex-start: 放在上面(側(cè)軸的起點位置)
flex-end: 放在下面(側(cè)軸的終點位置)
center: 放在中間
space-between: 換行之后在側(cè)軸上兩端對齊
space-around: 換行之后在側(cè)軸上環(huán)繞對齊
stretch: 以行為單位進(jìn)行拉伸, 拉伸的部分以空白填充, 保證拉伸之后所有的行加起來能夠填滿側(cè)軸
排序、擴(kuò)充、縮小、寬度
order:從小到大的排序, 越小的顯示在越前面, 越大的顯示在越后面。
flex-grow:默認(rèn)是0及不進(jìn)行伸縮；只有在所有元素的寬度總和小于容器的寬時才會生效。
計算公式：
剩余空間寬度 = 伸縮容器寬度 - 所有元素的寬度總和
每一份的大小 = 剩余空間寬度/總的份數(shù)
元素的真實寬度 = 當(dāng)前元素的寬度 + 需要的份數(shù)的寬度（width + flex-grow*每一份的大小）
flex-shrink:默認(rèn)是1，只有在所有元素的寬度總和大于容器的寬時才會生效。
溢出的寬度 = 所有元素的寬度總和 - 伸縮容器寬度
權(quán)重值 = 所有元素（元素的份數(shù) * 當(dāng)前元素的寬度）的和
元素的真實寬度 = 當(dāng)前元素的寬度 - (溢出的寬度 * 當(dāng)前伸縮項的寬度 * 當(dāng)前伸縮項需要的份數(shù) / 權(quán)重值 )
flex-basis:在伸縮布局中，可以通過設(shè)置該屬性來確定元素的寬。
擴(kuò)充或縮小的是寬度還是高度，要根據(jù)當(dāng)前主軸的方向來確定的。主軸是水平方向的修改的就是寬度，主軸是垂直方向的，修改的就是高度。
本文到這里就結(jié)束了，希望可以給大家學(xué)習(xí)css提供幫助。
