浮動布局
絕對定位布局
固定定位fixed
絕對定位absolute
實現橫向兩列布局
能夠實現橫向多列布局
常見的布局有以下幾種: 單列水平居中布局, 一列定寬一列自適應布局, 兩列定寬一列自適應布局, 兩側定寬中間自適應三列布局。
重點介紹一下常見的三列布局之: 聖杯布局和雙飛翼布局。
兩者都屬於三列布局，是一種很常見的頁面布局方式，三列一般分別是子列sub、主列main和附加列extra，其中子列一般是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列一般是廣告等額外資訊，居右且寬度固定。
聖杯布局
body
.container
.main
.sub
.extra
float: left;
width: 100%;
}.main
.sub
.extra
總結:todo:
width: 100%;
display: flex;
min-width: 600px;
} .sub
.main
.extra
使用請參考:
響應式布局是指，網頁可以自動識別裝置螢幕寬度，根據不同的寬度採用不同的css的樣式，從而達到相容各種裝置的效果。
響應式布局使用**查詢(css3 media queries), 根據不同螢幕解析度採用不同css規則, 使用方式如下:
@media screen and (max-width:1024px)CSS 布局方式
由全球資訊網聯盟制定的一系列標準，包括 在css中存在三種定位機制 標準文件流特點 塊級元素特點 行級元素特點 注意 塊級元素和行級元素都是盒子模型 盒子模型 網頁布局的基石,由4部分組成 盒子模型的三維立體結構 盒子模型尺寸 盒子模型尺寸 邊框 外邊距 內邊距 盒子中的內容尺寸 注意 區別在於內容...
css 網頁布局方式
1.網頁布局方式 其實就是指瀏覽器是如何對網頁中的元素進行排版的。1 標準流 文件流 普通流 排版方式 2 在css中將元素分為三種，分別是 塊級元素 行內元素 行內塊級元素 3 在標準流中有兩種排版方式，一種是垂直排序，一種是水平排序 垂直排序 如果元素是塊級元素，那麼就會垂直排版 水平排序 如果...
CSS常見布局方式
如下 child1 child2 clearfix after給兩個子元素新增float，然後給它們的父元素新增clearfix類用於清除浮動。child1 child2 child3 設定main寬度為100 再設定兩個側欄的寬度。設定 負邊距，child2設定 負左邊距 為100 child3設...