<div
class
="body"
>
<
div
class
="header"
>
div>
<
div
class
="section"
>
<
div
class
="left"
>
div>
<
div
class
="right"
>
div>
div>
<
div
class
="footer"
>
div>
div>
整個父元素相對定位，導航高固定，內容區域絕對定位，通過定位屬性實現高度自適應。
html,body.header.section.footer
利用 flex flex-direction：column屬性，使元素自上往下排列，flex:1佔據除規定元素外的所有位置
html,body.body.header.section.footer
父元素相對定位，左側left絕對定位確定自適應高度並左對齊。右側right通過絕對定位自適應高度和寬度
html,body.body.header.section.left.right
左側left使用浮動，浮動元素半脫離文件流，與近鄰元素位置重疊但不會與鄰近元素內部文件重疊
html,body.body.header.section.left.right
左浮動，右產生bfc，利用bfc與float元素重疊的特徵
flex-direction: column布局自上而下，flex:1讓section布滿除header外的所有區域。section設定flex，預設從左往右排列，flex:1讓right布滿除left外的所有區域
.body.header.section.left.right
<div
class
="body"
>
<
div
class
="header"
>
div>
<
div
class
="section"
>
<
div
class
="left"
>
div>
<
div
class
="center"
>111
div>
<
div
class
="right"
>
div>
div>
div>
.header.section.left.center.right
.body.header.section.left.center.right
section 在left和right元素後
.body.header.section.left.center.right
CSS 常用布局
1.寬度100 自適應視窗寬度 content content 只是定義了寬度為100 背景為白色與body色加以區分 footer footer 2.寬度100 最小定寬780px content content 只是定義了寬度為100 背景為白色與body色加以區分 這個布局中我們使用了min ...
css常用布局
單列布局長這個樣子，主要有兩種 普通單欄，通欄的單欄布局 比較簡單，設定 定寬 水平居中即可 頭部 內容尾部 執行結果鏈結描述 瀏覽器寬度超過960px時，外margin出現。當收縮瀏覽器寬度，小於960px時，margin為0，出現滾動條。執行結果鏈結描述 在header 和footer上再包裹一...
css常用布局
以下居中布局均以不定寬為前提，定寬情況包含其中 1 水平居中 a inline block text align tips 此方案相容性較好，可相容至ie8，對於ie567並不支援inline block，需要使用css hack進行相容 b table margin tips 此方案相容至ie8，...