CSS 常見的css布局

2021-09-06 07:42:02 字數 1562 閱讀 1238

1、單列布局

主要使用max-width屬性樣式實現，使用max-width是為了當螢幕小於2000px時不出現滾動條
2、兩列自適應布局

兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式，為了觸發ie瀏覽器的haslayout屬性，需設定zoom:1

2.1、使用float+overflow:hidden 實現（注意渲染順序，如果側邊欄在右邊，應在html標籤中先寫側邊欄，在寫主內容）

left


right


right
2.2、flex布局實現（不相容ie9及ie9-）

2.3、grid柵格布局

3、三欄布局

中間自適應寬度，旁邊固定寬度

3.1、聖杯布局（注意，dom結構必須是先寫中間列，這樣實現中間列可以優先載入）



left


right
三個部分都設定為左浮動，否則左右兩邊內容上不去，就不可能與中間列同一行，設定center的寬度為100%(實現中間列內容自適應)，會導致left與right擠到下一行，設定margin-left為負值讓left和right部分回到與center部分同一行，設定父容器的padding-left和padding-right，讓左右兩邊留出間隙，設定相對定位，讓left和right部分移動到兩邊，設定乙個大數值的padding-bottom，再設定相同數值的負的margin-bottom，以及設定overflow:hidden把溢位背景切掉，實現等高布局。

3.2、雙飛翼布局

解決了聖杯布局錯亂問題，實現了內容與布局的分離

雙飛翼布局


left


right
三個部分都設定為左浮動，然後設定center的寬度為100%，此時，left和right部分會跳到下一行；設定margin-left為負值讓left和right部分回到與center部分同一行，center部分增加乙個內層div，並設margin: 0 200px；設定乙個大數值的padding-bottom，再設定相同數值的負的margin-bottom，以及設定overflow:hidden把溢位背景切掉，實現等高布局。

4、粘連布局

有一塊內容，當的高度足夠長的時候，緊跟在後面的元素會跟在元素的後面。當元素比較短的時候(比如小於螢幕的高度),這個元素能夠「粘連」在螢幕的底部

粘連布局


粘連布局


footer
footer要使用margin為負來確定自己的位置，在main區域需要設定 padding-bottom。這也是為了防止負 margin 導致 footer 覆蓋任何實際內容。

CSS常見布局

一 聖杯布局 雙飛翼布局 布局特點 左右兩欄固定寬度，中間部分自適應 三列等高 實現乙個左邊100px右邊150px中間自適應的布局 先來看看效果圖 這是top 這是left 這是content 這是多行高度！這是right 這是foot 過程說明 1.先寫乙個基本布局 2.將中間left cont...

CSS常見布局

1.1使用inline block和text align parent.child1.2使用margin 0 auto實現 child1.3使用絕對定位實現 parent child margin left的負值為盒子寬度的一半 1.4使用flex布局實現 parent2.1使用vertical a...

css常見布局

一列布局 1.一列布局 不是自適應 header 頁頭 main 主體內容 footer 頁尾 2.一列寬度自適應布局 要想寬度自適應，只需要按照百分比來設定寬度，內容就可以根據瀏覽器視窗自動調節大小。下例中寬度是自適應的，而高度不是自適應的。頁頭主體內容 頁尾 3.單列經典布局 頁頭左列 右列頁尾...