成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS頁面布局筆記

CoderDock / 3601人閱讀

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

居中布局 水平居中

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

水平垂直居中

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

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;}
多列布局 定寬-自適應 float+margin 
.left{float:left; width:100px;}
.right{margin-left:120px;}
float+margin+fix

外層在包裹一個容器

.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;}
不定寬-自適應 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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111112.html

相關(guān)文章

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

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

    hizengzeng 評論0 收藏0

  • CSS學習筆記(八) 頁面布局之三欄-固定寬度布局

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

    eechen 評論0 收藏0

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

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

    nevermind 評論0 收藏0

  • 前端面試筆記 - 性能

    摘要：頁面中元素的布局是相對的，因此一個元素的布局發(fā)生變化，會聯(lián)動地引發(fā)其他元素的布局發(fā)生變化。對于有位置重疊的元素的頁面，這個過程尤其重要，因為一旦圖層的合并順序出錯，將會導致元素顯示異常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...

    JouyPub 評論0 收藏0

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

    摘要：引言最近想將這幾個月做過的東西組件化，然后首先想到的是編碼規(guī)范化本文只涉及命名規(guī)范，搬來了造好的輪子。舉例對齊樣式使用對齊目標的英文名稱。舉例注意事項一律小寫盡量用英文不加中杠和下劃線盡量不縮寫，除非一看就明白的單詞。 引言：最近想將這幾個月做過的東西組件化，然后首先想到的是 編碼規(guī)范化！本文只涉及 CSS 命名規(guī)范，搬來了Alloyteam 造好的輪子。可能并不完全適用，在以后...

    stormjun 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<