三種方式搞定CSS的雙列布局

左邊一列固定，右邊一列自動填滿

left：float：left 和固定寬度 width：300px

right：margin-left：300px

>

#left,
#right
#left
#right
style
>
>
"left"
>
固定列：左邊div
>
"right"
>
自適應列：右邊div
>
body
>

left：float：left 和固定寬度 width：300px

right：overflow：hidden

>

#left,
#right
#left
#right
style
>
>
"left"
>
固定列：左邊div
>
"right"
>
自適應列：右邊div
>
body
>

利用table**標籤沒有設定寬度的列會自動填滿剩餘寬度的特性

parent：width：100% display：table

left：display：table-cell 和 固定列寬

right：display：table-cell

>

#parent
#left,
#right
#left
#right
style
>
>
"parent"
>
"left"
>
固定列：左邊div
>
"right"
>
自適應列：右邊div
>
div>
body
>

parent: 設定flex、主軸方向、元素沿主軸排列方式

left:設定固定寬度

right:設定100%寬度 自動填滿剩餘

>

#parent
#left,
#right
#left
#right
style
>
>
"parent"
>
"left"
>
固定列：左邊div
>
"right"
>
自適應列：右邊div
>
div>
body
>

CSS的三種布局模式

css常見的三種布局模式有 流動模型 flow 浮動模型 float 層模型 layer 1 塊狀元素自上而下占行 塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100 實際上，塊狀元素都會以行的形式佔據位置。2 行內元素從左到右 在流動模型下，內聯元...

CSS三 CSS的三種引入方式

css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。一 行內樣式 使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用，在測試的時候可以使用。例如 我是p標籤 二 內部樣式表 在style標籤中書寫css style標籤寫在head標籤中。示例 例...

CSS三 CSS的三種引入方式

css的引入方式共有三種 行內樣式 內部樣式表 外部樣式表。一 行內樣式 使用style屬性引入css樣式。示例 直接在html標籤中設定的樣式 實際在寫頁面時不提倡使用，在測試的時候可以使用。例如 我是p標籤 二 內部樣式表 在style標籤中書寫css style標籤寫在head標籤中。示例 例...