上來就是干!
css左右布局(兩欄布局)
使用inline-block實(shí)現(xiàn)左右布局,原理:inline無法設(shè)置寬高,只占有內(nèi)容寬高的空間,block可以設(shè)置寬高,單,會(huì)單獨(dú)占據(jù)一行空間,inline-block介于inline與block之間,可以設(shè)置寬高且只占有設(shè)置寬高的空間.
代碼實(shí)現(xiàn):
代碼部分
實(shí)際效果
inline-block問題 : 兩個(gè)inline-block之間會(huì)出現(xiàn)間隙,解決方法:可以通過負(fù)margin解決或在書寫html時(shí)讓兩個(gè)元素之間連續(xù)書寫,沒有隔行都可以解決.
使用float實(shí)現(xiàn)左右布局,原理:float作用于元素,讓元素脫離文檔流,實(shí)現(xiàn)在html中的浮動(dòng),它有兩個(gè)屬性,left跟right,簡(jiǎn)單理解就是可以讓元素在左邊還是右邊,而且左浮找左浮,右浮找右浮,根據(jù)這兩個(gè)屬性,就能解決左右布局問題了.
代碼部分
實(shí)現(xiàn)效果
float進(jìn)階: 1.包裹性,浮動(dòng)元素包含內(nèi)容都進(jìn)行浮動(dòng)? 2 . 破壞性,浮動(dòng)元素不會(huì)被父級(jí)包裹,就會(huì)導(dǎo)致父級(jí)的高度塌陷,解決方法就是給父級(jí)清除浮動(dòng)? 3. 視覺占位 雖然脫離的文檔流,因?yàn)槭瞧矫嬲宫F(xiàn),在視覺上我們會(huì)看到浮動(dòng)元素遮擋了文檔流元素,解決仍是是清除浮動(dòng).
使用position:absolute+margin左右布局,原理:position：absolute也具有浮動(dòng)的屬性,給元素設(shè)置position：absolute,可以讓其脫離文檔流,但是position：absolute不具有浮動(dòng)貼靠的特性,因此兩個(gè)元素position：absolute會(huì)導(dǎo)致重合,解決方式:右邊的元素負(fù)margin為左邊元素的寬度.
代碼部分
實(shí)現(xiàn)效果
css左中右布局(三欄布局)
使用table,父元素添加display:table,子元素均添加display:table-cell,中間部分不給寬.
代碼部分
展示效果
使用position,左邊的元素進(jìn)行l(wèi)eft:0定位,右邊的元素進(jìn)行right:0定位,中間的元素不設(shè)置寬,margin負(fù)值為左邊元素的寬度.
代碼部分
展示效果
使用float布局,一個(gè)元素想做浮動(dòng),一個(gè)元素向右浮動(dòng),中間的元素不給寬,給高即可.
代碼部分
展示部分
當(dāng)然還有其他例如:flex布局,grid布局等等,接下來學(xué)習(xí)到,在陸續(xù)補(bǔ)充...
