CSS頁面布局筆記

CoderDock 發布于2019-08-28 18:14 / 3517人閱讀

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

居中布局 水平居中

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

inline-block + text-ailgn

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

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

table + margin

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

優點：只需要設置子元素的樣式

absolute + transform

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

優點：居中子元素不會對其他元素產生影響
缺點：transform是CSS3的屬性，存在兼容性問題

flex + justify-content

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

優點：只需要設置父元素的樣式
缺點：兼容性問題

flex + margin

.parent{display:flex;}
.child{margin:0 auto;}

垂直居中

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

table-cell + vertical-align

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

優點：兼容性好

absolute + transform

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

優點：子元素不會干擾其他元素
缺點：兼容性

flex + align-item

.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;}

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的結構

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;}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111112.html

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

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

hizengzeng 2019-08-30 15:54 評論0 收藏0
CSS學習筆記(八) 頁面布局之三欄-固定寬度布局

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

eechen 2019-08-28 18:03 評論0 收藏0
【零基礎入門】 css學習筆記（4）布局與定位介紹

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

nevermind 2019-08-30 15:53 評論0 收藏0
前端面試筆記 - 性能

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

JouyPub 2019-08-23 14:50 評論0 收藏0
CSS學習筆記(十二) CSS命名規范

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

stormjun 2019-08-28 18:04 評論0 收藏0