為了方便你的閱讀,你可以先看整個(gè)文章的提綱,挑著看,選著看,這樣更節(jié)省時(shí)間,如果對(duì)各類的標(biāo)簽都比較熟悉,閱讀起來會(huì)更方便
1.了解布局必須要的基礎(chǔ)
1.元素的三種顯示模式
塊級(jí) , 行內(nèi), 行內(nèi)塊
2.css3的三大特性
繼承,優(yōu)先,層疊性
3.盒子外擴(kuò)和內(nèi)減模型
2.布局手段
浮動(dòng)
定位布局
伸縮布局
布局的本質(zhì)(個(gè)人理解) :
所有的標(biāo)簽都是盒子
而盒子的模式有3種不同的顯示模式,有橫著走的,有豎著走的
而盒子還有2種模型,內(nèi)減外擴(kuò),一個(gè)變胖,一個(gè)變瘦
了解了盒子個(gè)性,再了解css3的特性就能弄明白很多了
1.布局必須要的基礎(chǔ)
元素的三種模式
在學(xué)習(xí)的過程中呢,我一直是把三種模式當(dāng)成三種不同性格的人去看待,對(duì)人說人話,對(duì)鬼說鬼話,其實(shí)跟盒子的對(duì)話也是如此,除了行內(nèi)塊元素和行內(nèi)元素的組合不是預(yù)料之內(nèi)的,其他元素的組合都還是在意料之中~
因此主要向大家說一下我對(duì)行內(nèi)塊和行內(nèi)元素組合的理解,不過先簡(jiǎn)單的介紹下各類模式下元素顯示的特點(diǎn)
塊級(jí)元素
總是從新的一行開始
寬高,邊距都可以控制
默認(rèn)寬度是容器100%
可以容納其他塊元素
塊級(jí)元素最聽話的盒子,可控度極高
行內(nèi)元素
靠?jī)?nèi)容撐大,不可以設(shè)置寬高,但是水平方向的padding和margin可以設(shè)置
和他相鄰的兄弟一行上顯示
默認(rèn)寬度是自己的寬度
只能容納文本或其他行內(nèi)元素
我理解起來就是一句話,內(nèi)容多大,我多大.一身功夫全靠撐,可控性較低,因?yàn)闊o(wú)法設(shè)置寬高,只可控制左右內(nèi)外邊距
行內(nèi)塊元素
和相鄰的行內(nèi)塊元素,在一行上顯示,但是之間會(huì)有空白間隙
默認(rèn)寬度是自身內(nèi)容的寬度
寬高,內(nèi)外邊距都可以控制
最典型的行內(nèi)塊,像img,input等等,行內(nèi)塊有個(gè)很有意思的特點(diǎn),就是中間會(huì)有一個(gè)間隙,就像下圖截屏的那個(gè)樣子,原因是當(dāng)行內(nèi)元素之間有“回車”立宜、“tab”彩届、“空格”時(shí)就會(huì)出現(xiàn)間隙俩檬。但是如何把他去掉呢,有2比較個(gè)最簡(jiǎn)單的方法,當(dāng)然直接采用浮動(dòng)也是可以的,或者切換盒子的顯示模式,改為塊級(jí)元素
把相鄰的行內(nèi)塊的代碼塊放在一行上顯示,就可以去掉這個(gè)間隙了
套一個(gè)父盒子,設(shè)置父盒子的font-size:0
最容易出問題的行內(nèi)與行內(nèi)塊組合,最讓人頭疼
這是因?yàn)橄竦湫偷膇nput , img這些行內(nèi)塊標(biāo)簽和和行內(nèi)標(biāo)簽在行內(nèi)垂直方向默認(rèn)是以基線（baseline）對(duì)齊的，圖片基線在圖片底部，而文字基線卻在文字中點(diǎn)偏下的位置，所以才會(huì)顯示成上圖的樣子漾岳。
解決方案
vertical-align屬性,垂直對(duì)齊狸臣，它只針對(duì)于行內(nèi)元素或者行內(nèi)塊元素莹桅， 通常用來控制圖片/表單與文字的對(duì)齊。
vertical-align : baseline |top |middle |bottom
//頂部對(duì)齊(設(shè)置給行內(nèi)塊元素)
vertical-align : top ;
//垂直居中
vertical-align : middle ;
//底部對(duì)齊
vertical-align : bottom ;
css三大特性
了解特性可以解決很多css3中出現(xiàn)的奇怪問題
-
繼承性
- 子承父業(yè),子元素會(huì)繼承父元素的屬性,你會(huì)繼承你老爹的財(cái)產(chǎn)一樣去理解就好
-
優(yōu)先性
- 主要是要了解不同標(biāo)簽的權(quán)重不一樣,這個(gè)特性會(huì)讓布局的時(shí)候bug出現(xiàn)頻次加多,通常表現(xiàn)為選擇器不生效
一張表格足以理解各類選擇器的權(quán)重問題
|繼承的貢獻(xiàn)值 |0,0,0,0 |
|--|--|
| 每個(gè)標(biāo)簽的貢獻(xiàn)值(div) | 0,0,0,1 |
| 每個(gè)類,偽類的貢獻(xiàn)值(.box) |0,0,1,0 |
| 每個(gè)id的貢獻(xiàn)(#box) | 0,1,0,0 |
| 每個(gè)行內(nèi)樣式的貢獻(xiàn)| 1,0,0,0 |
| 每個(gè)!important的貢獻(xiàn) | 無(wú)窮大 |
-
層疊性
- 很好理解,就是css代碼是從上往下執(zhí)行,后面的樣式如果和前面的樣式重疊,那后面的樣式就會(huì)覆蓋前面的樣式
盒子的外擴(kuò)和內(nèi)減模型
學(xué)習(xí)盒子模型的時(shí)候烛亦，盒子真實(shí)寬高計(jì)算方式如下：
真實(shí)寬高 = 設(shè)置寬高 + border + padding诈泼；這種方式，我們成為外擴(kuò)模型煤禽。受一個(gè)屬性控制：box-sizing铐达；其實(shí)盒子主要有兩種模型,一種是外擴(kuò),另外一種是內(nèi)減,看代碼就很好理解了
1.box-sizing：content-box;（外擴(kuò)模型）
div {
box-sizing: content-box;
width: 200px;
height: 200px;
border: 50px solid red;
}
該模型為默認(rèn)值，盒子的真實(shí)寬高 = 設(shè)置的寬高 + border + padding檬果。
2.box-sizing：border-box;（內(nèi)減模型）
div {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 50px solid red;
}
該模型下瓮孙，border與padding會(huì)首先去壓縮內(nèi)容區(qū)的空間唐断，寬高為設(shè)置寬高。如果里面的內(nèi)容全部被壓縮完了,才會(huì)向外擴(kuò)展
#布局手段
1.浮動(dòng)
剛學(xué)浮動(dòng)的時(shí)候,反正我是一臉懵逼,不知道盒子到底怎么了,是不是感冒了,不聽話,各種浮動(dòng)帶來的影響讓人錯(cuò)不及防,直到最后,理解了2句話,就慢慢開始了解浮動(dòng)了,現(xiàn)在把它分享給你
浮動(dòng)的目的是為了讓多個(gè)盒子在一行上顯示
頁(yè)面是一個(gè)魚塘,而浮動(dòng)的元素像飄在水上面的魚,沒浮動(dòng)的元素在水底(標(biāo)準(zhǔn)流盒子在浮動(dòng)盒子底下)
//不浮動(dòng) | 左浮動(dòng) | 右浮動(dòng)
選擇器 { float: none | left | right; }
上面張圖已經(jīng)很形象的說明浮動(dòng)了,不過還需要有一個(gè)注意的點(diǎn):
float屬性會(huì)隱性改變?cè)氐膁isplay屬性為inline -block(行內(nèi)塊) 而且中間沒有間隙
當(dāng)然,其實(shí)浮動(dòng)的初始目的是為了做文字環(huán)繞效果的,所以避免不了浮動(dòng)在做布局的時(shí)候會(huì)帶來一些影響
清楚浮動(dòng)
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問題杭抠。清除浮動(dòng)之后脸甘， 父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度。父級(jí)有了高度偏灿，就不會(huì)影響下面的標(biāo)準(zhǔn)流了
方法1:給父親添加overflow屬性方法
給父級(jí)添加： overflow為 hidden| auto| scroll 都可以實(shí)現(xiàn)丹诀。
-----------------------------------------
方法2:使用after偽元素清除 (推薦)
.clearfix:after {
content: ""; display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
} /* IE6、7 專有 */
----------------------------------------
方法3:使用雙偽元素清除浮動(dòng)
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
2.定位(position)
定位 = 定位模式 + 邊偏移
選擇器 { position: 屬性值; }
先看定位模式
1.靜態(tài)定位(static)
相當(dāng)于默認(rèn)定位,靜態(tài)定位就是沒有定位,但是也算定位....好繞
沒有邊偏移,沒法用position屬性動(dòng)來動(dòng)去
2.相對(duì)定位(relative)
相對(duì)定位的邊偏移,相對(duì)于自己原來在標(biāo)準(zhǔn)流中位置來移動(dòng)的 , 這個(gè)定位的盒子還是標(biāo)準(zhǔn)流,在魚塘底下的
后面的盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)待它翁垂。
3.絕對(duì)定位(需要搭配父親一起使用)(absolute)
絕對(duì)定位是元素以帶有定位的父級(jí)元素來移動(dòng)位置, 父元素沒有定位忿墅，則以瀏覽器為準(zhǔn)定位
完全脫標(biāo) —— 完全不占位置 , 也就是浮在魚塘最上面的盒子
4.固定定位(fixed)
完全脫標(biāo) —— 完全不占位置,也是浮起來的
只認(rèn)瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設(shè)置元素的位置；
跟父元素沒有任何關(guān)系沮峡；單獨(dú)使用的
不隨滾動(dòng)條滾動(dòng)
IE 6 等低版本瀏覽器不支持固定定位
子絕父相
子絕父相的搭配使用是比較多的,子級(jí)是絕對(duì)定位,脫標(biāo),浮在水面上
父級(jí)是相對(duì)定位,標(biāo)準(zhǔn)流占有位子,老老實(shí)實(shí)躺在池塘底部
理解:子元素在標(biāo)準(zhǔn)流的父親的懷里隨心所欲~
再看邊偏移
簡(jiǎn)單來說就是上下左右
3.盒模型Flex布局
盒模型也叫彈性布局,這個(gè)布局的手段就就很牛逼了,雖然布局手段沒有誰(shuí)強(qiáng)誰(shuí)弱,主要看適用的場(chǎng)景(但是彈性布局真的是心中的老大哥)
他主要做了啥了?
加buff , 加buff , 加buff , 讓盒子變得異常的強(qiáng)大和聽話,就像是一位將軍,在指揮上千個(gè)將士排兵布陣一樣~
強(qiáng)大到他可以合理的去分配每一個(gè)盒子,就像是在戰(zhàn)場(chǎng)上讓士兵合理的分配站位一樣
伸縮布局三要素:
子元素
主軸
次軸
舉幾個(gè)簡(jiǎn)單的例子
我要你們每個(gè)人寬度一樣,占滿盒子
.box{
width: 1000px;
height: 200px;
margin: 50px auto;
border: 2px solid #000;
/* 伸縮布局(彈性布局)：給盒子加buff */
display: flex;
}
.box>div{
flex: 1;
/* 子元素寬度比例為1 */
}
設(shè)為 Flex 布局以后疚脐，子元素的float、clear和vertical-align屬性將失效邢疙。
主軸與次軸一定是垂直的棍弄，如果把主軸方向改為垂直，次軸方向自動(dòng)變成水平
默認(rèn)主軸向右
主軸排列方向:(flex-direction)
row:默認(rèn)值： 主軸水平 疟游，從左往右
flex-direction: row;
主軸水平 呼畸，從右往左
flex-direction: row-reverse;
主軸垂直 ，從上往下
flex-direction: column;
主軸垂直 颁虐，從下往上
flex-direction: column-reverse;
主軸排列方式
默認(rèn)：左對(duì)齊
justify-content: flex-start;
右對(duì)齊
justify-content: flex-end;
居中對(duì)齊
justify-content: center;
兩端對(duì)齊：每一個(gè)盒子中間的間距相同
justify-content: space-between;
每一個(gè)盒子兩邊間距相同（平均）
justify-content: space-around;
主軸換行(flex-wrap)
生效前提: 子元素一行放不下
默認(rèn)是不換行,如果一行放不下,會(huì)把子元素進(jìn)行等比例縮放
<div class="box">
<div style="background-color:green;font-size: 20px">1</div>
<div style="background-color:pink">2</div>
<div style="background-color:hotpink">3</div>
<div style="background-color:purple">4</div>
<div style="background-color:blue">5/div>
<div style="background-color:yellowgreen">6</div>
<div style="background-color:gold">7</div>
<div style="background-color:skyblue">8</div>
</div>
.box{
width: 1000px;
height: 300px;
margin: 50px auto;
border: 2px solid #000;
display: flex;
}
.box>div{
width: 200px;
height: 100px;
}
執(zhí)行效果:(等比例縮放)
換行:
a.默認(rèn)值：不換行
flex-wrap: nowrap;
允許換行：第一行在上方
flex-wrap: wrap;
反向換行：第一行在下方
flex-wrap: wrap-reverse;
換行(wrap)
次軸排列方式
- 注意點(diǎn)：主軸與次軸一定是垂直的蛮原，如果把主軸方向改為垂直，次軸方向自動(dòng)變成水平
頂部對(duì)齊
align-items: flex-start;
底部對(duì)齊
align-items: flex-end;
居中對(duì)齊
align-items: center;
默認(rèn)值：平鋪鋪滿. 前提是不能設(shè)置高度
align-items: stretch;
文字基線對(duì)齊
align-items: baseline;
多行排列方式(align-content)
注意點(diǎn)：一行不起作用另绩，只對(duì)多行起作用
直接上代碼演示
.box{
width: 1000px;
height: 250px;
margin: 50px auto;
border: 2px solid #000;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
//添加的align-content 放這里
}
.box>div{
width: 200px;
height: 100px;
}
<div class="box">
<div style="background-color:green;font-size: 20px">1</div>
<div style="background-color:pink">2</div>
<div style="background-color:hotpink">3</div>
<div style="background-color:purple">4</div>
<div style="background-color:blue">5</div>
<div style="background-color:yellowgreen">6 </div>
<div style="background-color:gold">7</div>
<div style="background-color:skyblue">8</div>
</div>
頂部對(duì)齊
align-content: flex-start;
底部對(duì)齊
align-content: flex-end;
居中對(duì)齊
align-content: center;
兩端對(duì)齊：中間間距相等
align-content: space-between;
間距相等： 中間行的間距就是邊緣的2倍
align-content: space-around;
行平鋪
align-content: stretch;
頂對(duì)齊:
居中對(duì)齊:
兩端對(duì)齊:
間距相等
行平鋪
當(dāng)然,在伸縮布局中還有很多更多強(qiáng)大的屬性和布局方式,強(qiáng)烈推薦大家可以看一下阮一峰老師寫的flex布局~
如果有寫的錯(cuò)誤的地方,還望多指正~
