摘要:一居中布局居中布局水平居中寬度自適應(yīng)變成行內(nèi)塊元素,讓元素寬度自適應(yīng),不繼承父元素寬度變成元素,可以讓元素寬度自適應(yīng),不繼承父元素寬度定位,可以讓元素寬度自適應(yīng),不繼承父元素寬度或者垂直居中高度自適應(yīng)變成類似元素定位,
一、居中布局
水平居中(寬度自適應(yīng))居中布局
1.inline-block + text-align
.child{ display:inline-block; /*變成行內(nèi)塊元素,讓元素寬度自適應(yīng),不繼承父元素寬度;*/ } .parent{ text-align: center; }
2.table + margin
.child{ display: table; /*變成table元素,可以讓元素寬度自適應(yīng),不繼承父元素寬度;*/ margin: 0 auto; }
3.absolute + transform
.parent{ position: relative; } .child{ position: absolute; /*定位,可以讓元素寬度自適應(yīng),不繼承父元素寬度;*/ transform: translateX(-50%); left: 50%; }
4.flex + justify-content
.parent{ display: flex; justify-content: center; } /*或者*/ .parent{ display: flex; } .child{ margin: 0 auto; }垂直居中(高度自適應(yīng))
1.table-cell + vertical-align
.parent{ display: table-cell; /*變成類似td元素*/ vertical-align: middle; }
2.absolute + transform
.parent{ position: relative; } .child{ position: absolute; /*定位,可以讓元素寬度自適應(yīng),不繼承父元素寬度;*/ top: 50%; transform: translateY(-50%); }
3.flex + align-items
.parent{ display: flex; align-items: center; }水平垂直居中
inline-block + text-align + table-cell + vertical-align
.parent{ text-align: center; display: table-cell; vertical-align: middle; } .child{ display: inline-block; }
2.absolute + transform
.parent{ position: relative; } .child{ position: absolute; /*定位,可以讓元素寬度自適應(yīng),不繼承父元素寬度;*/ top: 50%; left: 50%; transform: translate(-50%, -50%); }
3.flex + align-items + justify-content
.parent{ display: flex; align-items: center; justify-content: center; }二、多列布局
左邊定寬,右邊自適應(yīng)left
right
right
float + margin
.left{ width: 100px; float: left; } .right{ margin-left: 120px; }
float + overflow
/*和1方法表現(xiàn)的效果一樣*/ .left{ width: 100px; float: left; } .right{ margin-left: 20px; overflow: hidden; }
table
.parent{ display: table; width: 100%; table-layout: fixed; } .left,.right{ display: table-cell; } .left{ width: 100px; padding-right: 20px; }
flex
.parent{ display: flex; } .right{ flex: 1; } .left{ width: 100px; }
absolute
.parent{ position: relative; } .right{ position: absolute; left: 100px; right: 0; } .left{ width: 100px; }左邊不定寬,右邊自適應(yīng)
float + overflow
.left{ float: left; } .right{ margin-left: 20px; overflow: hidden; }
table
.parent{ display: table; width: 100%; } .left,.right{ display: table-cell; } .left{ width: 0.1%; } .left{ padding-left: 10px; }
flex
.parent{ display: flex; } .right{ flex: 1; } .left{ margin-right: 20px; }三、等寬布局
//假如是n個child1
2
3
4
table
.parent-fix{ margin-left: -20px; } .parent{ display: table; width: 100%; table-layout: fixed; } .child{ display: table-cell; padding-left: 20px; }
flex
.parent{ display: flex; } .child{ flex: 1; } .child+.child { margin-left: 20px; }四、等高布局
left
right
right
table
.parent{ display: table; width: 100%; table-layout: fixed; } .left,.right{ display: table-cell; } .left{ width: 100px; border-right: 20px solid transparent; background-clip: padding-box; }
flex
.parent{ display: flex; } .right{ flex: 1; } .left{ width: 100px; margin-right: 20px; }
float
//部分UI框架采用的就是這種方式, .parent{ overflow: hidden; } .left{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left,.right{ padding-bottom: 9999px; margin-bottom: -9999px; }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/106569.html
摘要:層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性,一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎(chǔ)指南,包含使用的好處介紹個方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止,我已經(jīng)收集了100多個精通CSS的資源,它們能讓你更好地掌握CSS技巧,使你的布局設(shè)計脫穎而出。 CSS3 資源 20個學(xué)習(xí)CSS3的有用資源 C...
摘要:經(jīng)過半年的打磨,正式發(fā)布,主要是新增了一些常用組件,并使用命名,為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時的列數(shù)自適應(yīng)。主要是對于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候,看...
摘要:在正式前端一些小細(xì)節(jié)前端掘金英文原文,翻譯未來的太讓人興奮了一方面,是全新的頁面布局方式另一方面,是酷炫的濾鏡顏色等視覺效果。老司機(jī)教你更好的進(jìn)行編程個技巧前端掘金并不總是容易處理。 CSS3 實(shí)現(xiàn)文字流光漸變動畫 - 前端 - 掘金來自百度前端技術(shù)學(xué)院的實(shí)踐任務(wù):有趣的鼠標(biāo)懸浮模糊效果,參考:http://ife.baidu.com/course/d...,用CSS3實(shí)現(xiàn)了一下,順便...
摘要:本周于上海閉幕,掘金和知乎上都有對應(yīng)的實(shí)錄和問答,但會議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應(yīng)的實(shí)錄和問答,但會議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應(yīng)的實(shí)錄和問答,但會議的視頻目前都還沒放出來,有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主,有業(yè)界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范,可以結(jié)合自身團(tuán)隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
閱讀 2542·2021-10-11 10:58
閱讀 1020·2019-08-29 13:58
閱讀 1661·2019-08-26 13:32
閱讀 830·2019-08-26 10:40
閱讀 3255·2019-08-26 10:18
閱讀 1755·2019-08-23 14:18
閱讀 1105·2019-08-23 10:54
閱讀 435·2019-08-22 18:39