多欄布局的三種實現方案
固定寬度，流動，彈性
原則上應該控制布局寬度，而讓內容決定布局高度
固定寬度布局
解決設定margin,padding或border後元素寬度變寬的方法
（1）設定box-sizing屬性為border-box。存在相容性問題，可以使用膩子指令碼ployfill來解決。
（2）在元素寬度中減去對應的寬度
（3）給容器內部的元素應用內邊距和邊框。前提是內部元素沒有設定寬度。比如設定乙個沒有寬度的div包裹容器裡的所有元素，然後再設定這個div的邊距。注：如果內部容器的上下邊框不可見，內部div的上下邊距會疊加。
使用子星選擇符，比如section>*來設定邊距，可以達到不用div包裹就能設定元素內邊距和邊框的效果。
使用子星選擇符的缺點：
（1）子元素中設定邊距只能用margin-top這種指定只
（2）存在效能問題，在子元素較多的情況下
預防過大元素,包括大，長url，以及包含內容過多的元素
例如（1）可以設定最大寬度
img
（2）設定父元素的overflow:hidden;
為了避免過長的單詞在撐大較窄的元素，可以設定word-wrap:break-word;
三欄-中欄流動布局
負外邊距實現
設定最外層的包裹層min-width:600px;max-width:1100px;
用乙個div包裹三欄，再用乙個div包裹左中欄，設定包裹左中欄的右邊距margin-right:-210px。設定中欄的寬度自適應，並設定中欄的右邊距margin-right:210px
應用人造欄技術，可以在視覺上讓各欄的高度相同
原理：在包裹各欄的父元素上，應用與各欄同寬的背景顏色與背景色
**實現
display屬性有table-row table-cell table,table-cell屬性能夠直接讓塊級元素併排顯示
直接設定display屬性為table-sell，瀏覽器會自動補全和等屬性
缺點：ie7中並不支援
多行多欄布局
在大量標籤重複的情況下，使用id標記每個模組能夠提高可讀性
注意：作為欄的元素只能設定水平方向的邊距，而將垂直方向的邊距設定在欄上，原因是父元素沒有上下邊框時，子元素的上下間距會摺疊。
彈性布局flex
（1）設定主軸方向 flex-direction | 設定換行 flex-wrap
（2）flex-flows是flex-direction（row | column）和 flex-wrap（nowrap）的簡寫
（3）主軸對齊方式 justify-content
（4）側軸對齊方式 align-content 對齊伸縮行 | align-items | align-self（設定單獨的乙個容器，可用來覆蓋align-items的屬性）注：層級關係align-content>align-items>align-self
（5）顯示順序 order：number 未設定預設為0
（6）flex-grow 按比率放大 | flex-shrink 按比率縮小 | flex-basis 伸縮專案主軸的起始數值
css3學習筆記
1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...
CSS3學習筆記
一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...
css3學習筆記
1，transition是過度效果，一般是和hover一起用，transition的屬性有height，width常用屬性，在hover裡面就是會覆蓋原來的屬性，屬性由逗號間隔，各個屬性之間沒有先後關係，webkit transition width 2s ease in,height 2s,web...