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