<div class="parent"> <div class="child">Demo</div></div><style> .child { width: 100px; margin: 0 auto; }</style>
相必是個前端都見過,這定寬的水平居中,我們還可以用下面這種來實(shí)現(xiàn)不定寬的
<div class="parent"> <div class="child">Demo</div></div><style> .child { display: table; margin: 0 auto; }</style>
display: table
在表現(xiàn)上類似 block
元素,但是寬度為內(nèi)容寬。
無需設(shè)置父元素樣式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要調(diào)整為 <table>
<div class="parent"> <div class="child">Demo</div></div><style> .child { display: inline-block; } .parent { text-align: center; }</style>
兼容性佳(甚至可以兼容 IE 6 和 IE 7)
<div class="parent"> <div class="child">Demo</div></div><style>.parent { position: relative; } .child { position: absolute; left: 50%; width: 100px; margin-left: -50px; /* width/2 */ } </style>
寬度固定
相比于使用transform
,有兼容性更好
<div class="parent"> <div class="child">Demo</div></div><style> .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); }</style>
絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。
transform
為 CSS3
屬性,有兼容性問題
<div class="parent"> <div class="child">Demo</div></div><style> .parent { display: flex; justify-content: center; }</style>
只需設(shè)置父節(jié)點(diǎn)屬性,無需設(shè)置子元素
flex有兼容性問題
<div class="parent"> <div class="child">Demo</div></div><style> .parent { display: table-cell; vertical-align: middle; }</style>
兼容性好(IE 8以下版本需要調(diào)整頁面結(jié)構(gòu)至 table
強(qiáng)大的absolute對于這種小問題當(dāng)然也是很簡單的
<div class="parent"> <div class="child">Demo</div></div><style> .parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }</style>
絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。
transform
為 CSS3
屬性,有兼容性問題
同水平居中,這也可以用margin-top
實(shí)現(xiàn),原理水平居中
如果說absolute
強(qiáng)大,那flex
只是笑笑,因?yàn)?,他才是最?qiáng)的。。。但它有兼容問題
<div class="parent"> <div class="child">Demo</div></div><style> .parent { display: flex; align-items: center; }</style>
<div class="parent"> <div class="child">Demo</div></div><style> .parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }</style>
絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。
transform
為 CSS3
屬性,有兼容性問題
<div class="parent"> <div class="child">Demo</div></div><style> .parent { text-align: center; display: table-cell; vertical-align: middle; } .child { display: inline-block; }</style>
兼容性好
<div class="parent"> <div class="child">Demo</div></div><style> .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /*垂直居中*/ }</style>
只需設(shè)置父節(jié)點(diǎn)屬性,無需設(shè)置子元素
蛋疼的兼容性問題
1.float margin
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div></div><style> .left { float: left; width: 100px; } .right { margin-left: 100px /*間距可再加入 margin-left */ }</style>
IE 6
中會有3像素
的 BUG,解決方法可以在 .left
加入 margin-left:-3px
當(dāng)然也有解決這個小bug的方案如下:
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div></div><style> .left { float: left; width: 100px; } .right-fix { float: right; width: 100%; margin-left: -100px; } .right { margin-left: 100px /*間距可再加入 margin-left */ }</style>
此方法不會存在 IE 6
中3像素
的 BUG,但 .left
不可選擇, 需要設(shè)置 .left {position: relative}
來提高層級。 注意此方法增加了不必要的 HTML 文本結(jié)構(gòu)。
傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div></div><style> .left { float: left; width: 100px; } .right { overflow: hidden; }</style>
設(shè)置 overflow: hidden
會觸發(fā) BFC 模式(Block Formatting Context)塊級格式上下文。BFC是什么呢。用通俗的來講就是,隨便你在BFC 里面干啥,外面都不會受到影響 。此方法樣式簡單但不支持 IE 6
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div></div><style> .parent { display: table; width: 100%; ; } .left { display: table-cell; width: 100px; } .right { display: table-cell; /*寬度為剩余寬度*/ }</style>
table
的顯示特性為每列的單元格寬度和一定等與表格寬度。 可加速渲染,也是設(shè)定布局優(yōu)先。
table-cell
中不可以設(shè)置 margin
但是可以通過 padding
來設(shè)置間距
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div></div><style> .parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; }</style>
低版本瀏覽器兼容問題
性能問題,只適合小范圍布局
我們在學(xué)會一列定寬,一列自適應(yīng)的布局后也可以方便的實(shí)現(xiàn) 多列定寬,一列自適應(yīng) 多列不定寬加一列自適應(yīng) 這里我們不一一講解,大家自行嘗試,也可以鞏固前面學(xué)習(xí)的
<div class="parent"> <div class="column"> <p>1</p> </div> <div class="column"> <p>2</p> </div> <div class="column"> <p>3</p> </div> <div class="column"> <p>4</p> </div></div><style> .parent { margin-left: -20px; } .column { float: left; width: 25%; padding-left: 20px; box-sizing: border-box; }</style>
此方法可以完美兼容 IE8 以上版本
<div class="parent"> <div class="column"> <p>1</p> </div> <div class="column"> <p>2</p> </div> <div class="column"> <p>3</p> </div> <div class="column"> <p>4</p> </div></div><style> .parent { display: flex; } .column { flex: 1; } .column .column { /* 相鄰兄弟選擇器 */ margin-left: 20px; }</style>
強(qiáng)大簡單,有兼容問題
<div class='parent-fix'> <div class="parent"> <div class="column"> <p>1</p> </div> <div class="column"> <p>2</p> </div> <div class="column"> <p>3</p> </div> <div class="column"> <p>4</p> </div> </div></div><style> .parent-fix { margin-left: -20px; } .parent { display: table; width: 100%; /*可以布局優(yōu)先,也可以單元格寬度平分在沒有設(shè)置的情況下*/ ; } .column { display: table-cell; padding-left: 20px; }</style>
table
的特性為每列等寬,每行等高可以用于解決此需求
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div></div><style> .parent { display: table; width: 100%; ; } .left { display: table-cell; width: 100px; } .right { display: table-cell /*寬度為剩余寬度*/ }</style>
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div></div><style> .parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; }</style>
注意這里實(shí)際上使用了 align-items: stretch
,flex
默認(rèn)的 align-items
的值為 stretch
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div></div><style> .parent { overflow: hidden; } .left, .right { padding-bottom: 9999px; margin-bottom: -9999px; } .left { float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; }</style>
此方法為偽等高(只有背景顯示高度相等),左右真實(shí)的高度其實(shí)不相等。 兼容性較好。
到此,我們了解常見的布局解決方案,這些只是參考,一樣的布局實(shí)現(xiàn)方式多種多樣。主要就使用position、flex 、table
(從很久很久以前起,我們就拋棄了table
布局頁面,但display: table
;是異常強(qiáng)大)、float
等屬性目前flex
兼容性較差 傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器
轉(zhuǎn)自:CSS常見布局解決方案