css中的常見布局面試題

雙飛翼和聖杯布局區別可參考：

一、固定布局

二、自適應布局

寬度隨著網頁大小的改變而改變；

三、常見型別

1、兩列布局：

1.1 左邊寬度固定，右邊寬度自適應（左邊浮動，下乙個元素就會佔據位置，併排一行）

.main 

/*左邊設定固定寬度以及左浮動（為了不佔一行）*/.left 
/*右邊設定自適應寬度，最小寬度，margin-left，把左邊固定寬度的元素的位置留出來就好了*/
.right 複製**

html：

"main">"left">

"right">
複製**

1.2、右邊寬度固定，左邊寬度自適應：左右都浮動（左邊自適應元素設定外層div 100%寬度，這樣會佔一行，然後裡層設定右邊的margin，把右邊元素位置空出來）

//左邊父級設定100%寬度，左浮動.left-fa //左邊子元素設定margin-right.left /*右邊固定寬度的元素左浮動，和margin-left負的本身大小*/.right 複製**

2、三列布局

2.1 定位法：（左右邊設定絕對定位，設定乙個最外級div（給父級設定relative，相對最外層定位)）

.main 

/*左邊固定元素定位*/.left
/* 中間自適應，設定的margin左右距離為左右二邊固定寬度元素的 大小*/.center-fa.center
.right
複製**

html:

"main">"left">

"center-fa"> "center">
"right">
複製**

2.1 雙飛翼布局（對比聖杯如何呢？？）：（三欄都浮動，中間自適應元素設定外層div 100%寬度，以防獨佔一行，裡層需要設定左右固定二欄的margin寬度，把左右二欄的位置空出來；另外，三欄排成一排，左右二欄需要設定負margin自身寬度）

.main .left.center-fa.center

.right
複製**

html:

"main">"left">

"center-fa">"center">
"right">
複製**

css中的常見布局面試題

雙飛翼和聖杯布局區別可參考 一 固定布局 二 自適應布局 寬度隨著網頁大小的改變而改變 三 常見型別 1 兩列布局 1.1 左邊寬度固定，右邊寬度自適應 左邊浮動，下乙個元素就會佔據位置，併排一行 main 左邊設定固定寬度以及左浮動 為了不佔一行 left 右邊設定自適應寬度，最小寬度，margi...

常見的div布局面試題

題目1 如何讓乙個子元素在父元素裡水平垂直居中？方法1.box child div 方法2 box child div 方法3 box child div 方法4 box child div 方法5 box child div 題目2 高度已知，分為三欄，左右各300px,中間自適應？方法1 浮動布...

經典布局面試題

問題描述 實現乙個div垂直居中,其距離螢幕左右兩邊各10px,其高度始終是寬度的50 同時div中有乙個文字a，文字需要水平垂直居中。doctype html en utf 8 document title html,body 設定div佔滿整個body，為了設定寬度為高度的一半做的輔助工作 wi...