摘要:到此,我們了解常見的布局解決方案,這些只是參考,一樣的布局實現(xiàn)方式多種多樣。主要就使用從很久很久以前起,我們就拋棄了布局頁面,但是異常強大等屬性目前兼容性較差傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器轉(zhuǎn)自常見布局解決方案
水平居中布局 1.margin + 定寬
Demo
相必是個前端都見過,這定寬的水平居中,我們還可以用下面這種來實現(xiàn)不定寬的
2. table + marginDemo
display: table 在表現(xiàn)上類似 block 元素,但是寬度為內(nèi)容寬。
無需設(shè)置父元素樣式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要調(diào)整為 兼容性佳(甚至可以兼容 IE 6 和 IE 7) 寬度固定 相比于使用transform ,有兼容性更好 絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。 transform 為 CSS3 屬性,有兼容性問題 只需設(shè)置父節(jié)點屬性,無需設(shè)置子元素 flex有兼容性問題 兼容性好(IE 8以下版本需要調(diào)整頁面結(jié)構(gòu)至 table 強大的absolute對于這種小問題當(dāng)然也是很簡單的 絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。 transform 為 CSS3 屬性,有兼容性問題 如果說absolute強大,那flex只是笑笑,因為,他才是最強的。。。但它有兼容問題 絕對定位脫離文檔流,不會對后續(xù)元素的布局造成影響。 transform 為 CSS3 屬性,有兼容性問題 兼容性好 只需設(shè)置父節(jié)點屬性,無需設(shè)置子元素 蛋疼的兼容性問題 1.float + margin left right right IE 6 中會有3像素的 BUG,解決方法可以在 .left 加入 margin-left:-3px 當(dāng)然也有解決這個小bug的方案如下: left right right 此方法不會存在 IE 6 中3像素的 BUG,但 .left 不可選擇, 需要設(shè)置 .left {position: relative} 來提高層級。 注意此方法增加了不必要的 HTML 文本結(jié)構(gòu)。 left right right 設(shè)置 overflow: hidden 會觸發(fā) BFC 模式(Block Formatting Context)塊級格式上下文。BFC是什么呢。用通俗的來講就是,隨便你在BFC 里面干啥,外面都不會受到影響 。此方法樣式簡單但不支持 IE 6 left right right table 的顯示特性為每列的單元格寬度和一定等與表格寬度。 table-layout: fixed 可加速渲染,也是設(shè)定布局優(yōu)先。table-cell 中不可以設(shè)置 margin 但是可以通過 padding 來設(shè)置間距 left right right 低版本瀏覽器兼容問題 性能問題,只適合小范圍布局 1 2 3 4 此方法可以完美兼容 IE8 以上版本 1 2 3 4 強大簡單,有兼容問題 1 2 3 4 table 的特性為每列等寬,每行等高可以用于解決此需求 left right right left right right 注意這里實際上使用了 align-items: stretch,flex 默認(rèn)的 align-items 的值為 stretch left right right 此方法為偽等高(只有背景顯示高度相等),左右真實的高度其實不相等。 兼容性較好。 到此,我們了解常見的布局解決方案,這些只是參考,一樣的布局實現(xiàn)方式多種多樣。主要就使用position、flex 、table(從很久很久以前起,我們就拋棄了table布局頁面,但display: table;是異常強大)、float等屬性目前flex兼容性較差 傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器 文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/50840.html 摘要:高度模型淺識為的簡寫,簡稱為塊級格式化上下文,為瀏覽器渲染某一區(qū)域的機制,中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用,但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警
一勞永逸的搞定 flex 布局
尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候,看到 float 屬性不... 摘要:問題已知高度,寫出三欄布局,其中左右兩欄寬度各位,中間自適應(yīng)回答效果示例解決方案浮動絕對定位彈性布局表格布局網(wǎng)格布局。方案二絕對定位將和的都設(shè)置脫離文檔流,給的設(shè)置左右兩邊距離即左右兩邊盒子的實際寬度。
問題:
已知高度,寫出三欄布局,其中左右兩欄寬度各位200px,中間自適應(yīng)showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1... 摘要:到此,我們了解常見的布局解決方案,這些只是參考,一樣的布局實現(xiàn)方式多種多樣。主要就使用從很久很久以前起,我們就拋棄了布局頁面,但是異常強大等屬性目前兼容性較差傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器轉(zhuǎn)自常見布局解決方案
水平居中布局
1.margin + 定寬
Demo
.child {
width: 100px;
margin: 0 auto;
}
... 閱讀 1523·2021-09-22 15:35 閱讀 2005·2021-09-14 18:04 閱讀 876·2019-08-30 15:55 閱讀 2449·2019-08-30 15:53 閱讀 2680·2019-08-30 12:45 閱讀 1203·2019-08-29 17:01 閱讀 2577·2019-08-29 15:30 閱讀 3514·2019-08-29 15:09
3.inline-block + text-align
同水平居中,這也可以用margin-top實現(xiàn),原理水平居中
水平垂直居中
1. absolute + transform
傲嬌的程序員應(yīng)該放棄太低版本的瀏覽器
我們在學(xué)會一列定寬,一列自適應(yīng)的布局后也可以方便的實現(xiàn) 多列定寬,一列自適應(yīng) 多列不定寬加一列自適應(yīng) 這里我們不一一講解,大家自行嘗試,也可以鞏固前面學(xué)習(xí)的
等高布局
1.table
2.flex
轉(zhuǎn)自:CSS常見布局解決方案相關(guān)文章
前端-CSS3&H5
常見的面試問題:【CSS】已知高度,寫出三欄布局
CSS常見布局解決方案
發(fā)表評論
0條評論
starsfun
男|高級講師
TA的文章
閱讀更多
基于主機名的虛擬主機服務(wù)怎么實現(xiàn)-虛擬主機怎么登陸圖解?
LAMP Web一鍵安裝腳本 – Linux服務(wù)器安裝Apache/MySQL/PHP網(wǎng)站環(huán)境
字蛛font-spider報錯,<web font not found>,碰到的最新問題
布局總結(jié)-水平居中布局的實現(xiàn)
兩列自適應(yīng)布局方案整理
JavaScript的數(shù)據(jù)類型及其檢測
前端面試題1(HTML篇)
偽類和偽元素的區(qū)別