1.1使用inline-block和text-align
.parent.child1.2使用margin:0 auto實現
.child1.3使用絕對定位實現
.parent1.4使用flex布局實現.child /*
margin-left的負值為盒子寬度的一半
*/
.parent2.1使用vertical-align
.parent.child2.2使用絕對定位實現
.parent.child /*2.3使用flex實現margin-top的負值為盒子高度的一半
*/
.parent3.1使用inline-block,text-align和vertical-align
.parent.child3.2使用絕對定位實現
.parent.child /*3.3使用flex實現margin-top的負值為盒子高度的一半,margin-left的負值為盒子寬度的一半
*/
.parent1. 聖杯布局：三列布局，左右定寬，中間寬度自適應；中間欄要在瀏覽器中優先展示渲染；允許任意列的高度最高。
html：
<(1) 基礎樣式div
class
="header"
>header
div>
<
div
class
="container"
>
<
div
class
="main"
>main
div>
<
div
class
="left"
>left
div>
<
div
class
="right"
>right
div>
div>
<
div
class
="footer"
>footer
div>
(2) 三列均設定左浮動
(3) 清除浮動
(4) 讓left和right上移
left列和right列已經上移，但是可以看見，此時main已被遮蓋。
(5) 解決遮蓋問題
給.containter左右內邊距，大小分別為left列的寬和right列的寬。
.container然後利用相對定位，將left列和right列定位到兩側空白處。
.left.right遮擋問題已解決，main可見啦。
至此，聖杯布局已完成，中間列寬度自適應。
2. 雙飛翼布局：三列布局，左右定寬，中間寬度自適應；中間欄要在瀏覽器中優先展示渲染；允許任意列的高度最高。
雙飛翼布局和聖杯布局基本一樣，不同之處在於解決遮蓋問題的方式不同。
雙飛翼布局在main元素中新增了乙個子元素content，並給這個子元素設定margin-left和margin-right，以至於content裡的內容不被遮蓋。
雙飛翼布局也完成了，個人感覺比聖杯布局更簡潔；完整**就不上了，很簡單的，不熟悉的可以動手試試哦。
CSS常見布局
一 聖杯布局 雙飛翼布局 布局特點 左右兩欄固定寬度，中間部分自適應 三列等高 實現乙個左邊100px右邊150px中間自適應的布局 先來看看效果圖 這是top 這是left 這是content 這是多行高度！這是right 這是foot 過程說明 1.先寫乙個基本布局 2.將中間left cont...
css常見布局
一列布局 1.一列布局 不是自適應 header 頁頭 main 主體內容 footer 頁尾 2.一列寬度自適應布局 要想寬度自適應，只需要按照百分比來設定寬度，內容就可以根據瀏覽器視窗自動調節大小。下例中寬度是自適應的，而高度不是自適應的。頁頭主體內容 頁尾 3.單列經典布局 頁頭左列 右列頁尾...
CSS 常見的css布局
1 單列布局 主要使用max width屬性樣式實現，使用max width是為了當螢幕小於2000px時不出現滾動條 2 兩列自適應布局 兩列自適應布局是指一列由內容撐開，另一列撐滿剩餘寬度的布局方式，為了觸發ie瀏覽器的haslayout屬性，需設定zoom 1 2.1 使用float over...