成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS頁(yè)面布局筆記

CoderDock / 3545人閱讀

摘要：居中布局水平居中父元素和子元素的寬度都未知優(yōu)點(diǎn)兼容性好缺點(diǎn)子元素文本繼承了屬性，子元素要額外加優(yōu)點(diǎn)只需要設(shè)置子元素的樣式優(yōu)點(diǎn)居中子元素不會(huì)對(duì)其他元素產(chǎn)生影響缺點(diǎn)是的屬性，存在兼容性問(wèn)題優(yōu)點(diǎn)只需要設(shè)置父元素的樣式缺點(diǎn)兼容性問(wèn)

居中布局 水平居中

父元素和子元素的寬度都未知

inline-block + text-ailgn 
.child{display:inline-block;}
.parent{text-align:center;}

優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：子元素文本繼承了text-align屬性，子元素要額外加text-align:left;

table + margin 
.child{display:table; margin:0 auto;}

優(yōu)點(diǎn)：只需要設(shè)置子元素的樣式

absolute + transform 
.parent{position:relative;}
.child{position:absolute; left:50%; transform: translateX(-50%);

優(yōu)點(diǎn)：居中子元素不會(huì)對(duì)其他元素產(chǎn)生影響
缺點(diǎn)：transform是CSS3的屬性，存在兼容性問(wèn)題

flex + justify-content 
.parent{display:flex; justify-content:center;}

優(yōu)點(diǎn)：只需要設(shè)置父元素的樣式
缺點(diǎn)：兼容性問(wèn)題

flex + margin 
.parent{display:flex;}
.child{margin:0 auto;}
垂直居中

父容器和子容器的高度都未知

table-cell + vertical-align 
.parent{display:table-cell; vertical-align:middle;}

優(yōu)點(diǎn)：兼容性好

absolute + transform 
.parent{position:relative;}
.child{position:absolute; top:50%; transform:translateY(-50%);}

優(yōu)點(diǎn)：子元素不會(huì)干擾其他元素
缺點(diǎn)：兼容性

flex + align-item 
.parent{display:flex; align-items:center;}

優(yōu)點(diǎn)：只需要設(shè)置父元素
缺點(diǎn)：兼容性問(wèn)題

水平垂直居中

父容器和子容器的高度都未知

inline-block + text-align + table-cell + vertical-align 
.parent{text-align:center; display:table-cell; vertical-align:middle;}
.child{display: inline-block;}
absolute + transform 
.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
flex + justify-content + align-item 
.parent{display:flex; justify-content:center; align-items:center;}
多列布局 定寬-自適應(yīng) float+margin 
.left{float:left; width:100px;}
.right{margin-left:120px;}
float+margin+fix

外層在包裹一個(gè)容器

.left{float:left; width:100px; position: relative;}
.right-fix{float:right; width:100%; margin-left:-100px;}
.right{margin-left:120px;}

兼容性很好，但是多了層right-fix的結(jié)構(gòu)

float+overflow 
.left{float:left; width:100px; margin-right: 20px;}
.right{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;}
.left{width:100px; margin-right:20px;}
.right{flex:1;}
不定寬-自適應(yīng) float + overflow 
.left{float:left; margin-right:20px;}
.right{overflow:hidden;}
table 
.parent{display:table; width:100%;}
.left,.right{display:table-cell;}
.left{width:0.1%; padding-right:20px;}
flex 
.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111112.html

相關(guān)文章

  • 《CSS世界》筆記一：流/元素/尺寸

    摘要：一流體布局引出的幾種網(wǎng)頁(yè)布局方式布局方式描述特點(diǎn)場(chǎng)景靜態(tài)布局，傳統(tǒng)設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實(shí)現(xiàn)的各類布局效果。 下一篇：《CSS世界》筆記二：盒模型四大家族 寫(xiě)在前面 初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時(shí)候除了工作，其他時(shí)間基本都在這本書(shū)里了，因?yàn)樗拇_吸引人。之前看過(guò)《CSS揭密》...

    hizengzeng 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(八) 頁(yè)面布局之三欄-固定寬度布局

    摘要：示例添加這一行規(guī)則結(jié)果就會(huì)變成這樣我們把這種現(xiàn)象稱為浮動(dòng)滑移，可以使用三種方法來(lái)預(yù)防發(fā)生從設(shè)定的元素寬度中減去添加的水平外邊距邊框和內(nèi)邊距的寬度和。當(dāng)我們?nèi)∠催x該屬性時(shí)，欄就會(huì)由于欄的推擠產(chǎn)生了浮動(dòng)滑移，移位到欄下方。 1.布局前的認(rèn)知 1.1 三種基本方案 多欄布局有三種基本的實(shí)現(xiàn)方案：固定寬度、流動(dòng)、彈性。 固定寬度。布局的大小不會(huì)隨用戶調(diào)整瀏覽器窗口大小而變化，一般是 ...

    eechen 評(píng)論0 收藏0

  • 【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（4） 布局與定位 介紹

    摘要：內(nèi)聯(lián)元素在水平方向上相互挨著，總體上會(huì)從左上方流向右下方。，增加元素，設(shè)置屬性，兩個(gè)內(nèi)聯(lián)元素并排擺放，但只有左右方向有。還能與其它內(nèi)聯(lián)元素并排。 寫(xiě)在前面：作為一個(gè)剛開(kāi)始寫(xiě)技術(shù)博客的新手，看到有人收藏了文章，寫(xiě)作動(dòng)力又猛增了。這應(yīng)該就是寫(xiě)技術(shù)博客的好處之一：能給自己增加成就感和驅(qū)動(dòng)力。最近關(guān)于css布局和定位相關(guān)內(nèi)容整理地有點(diǎn)慢，因?yàn)橥瑫r(shí)在做freecodecamp上的題，所以節(jié)奏有點(diǎn)...

    nevermind 評(píng)論0 收藏0

  • 前端面試筆記 - 性能

    摘要：頁(yè)面中元素的布局是相對(duì)的，因此一個(gè)元素的布局發(fā)生變化，會(huì)聯(lián)動(dòng)地引發(fā)其他元素的布局發(fā)生變化。對(duì)于有位置重疊的元素的頁(yè)面，這個(gè)過(guò)程尤其重要，因?yàn)橐坏﹫D層的合并順序出錯(cuò)，將會(huì)導(dǎo)致元素顯示異常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...

    JouyPub 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(十二) CSS命名規(guī)范

    摘要：引言最近想將這幾個(gè)月做過(guò)的東西組件化，然后首先想到的是編碼規(guī)范化本文只涉及命名規(guī)范，搬來(lái)了造好的輪子。舉例對(duì)齊樣式使用對(duì)齊目標(biāo)的英文名稱。舉例注意事項(xiàng)一律小寫(xiě)盡量用英文不加中杠和下劃線盡量不縮寫(xiě)，除非一看就明白的單詞。 引言：最近想將這幾個(gè)月做過(guò)的東西組件化，然后首先想到的是 編碼規(guī)范化！本文只涉及 CSS 命名規(guī)范，搬來(lái)了Alloyteam 造好的輪子?？赡懿⒉煌耆m用，在以后...

    stormjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<