面試常見css布局以及解決方法

結構：

class
="box"
>
class
="son"
>
div>
div>

.box .son

結構

class
="box1"
>
div>
class
="box2"
>
div>

.box1 .box2

class
="box"
>
class
="box1"
>
div>
class
="box2"
>
div>
div>

.box .box1 .box2

.box1 .box2

聖杯布局結構： main是中間部分必須放在文件流的最起前邊優先渲染

class
="contaer"
>
class
="main"
>
div>
class
="left"
>
div>
class
="right"
>
div>
div>

1，給左中右設定左浮動但是 mian部分的寬度為100% 所以左右元素不會上去

2，給left 乙個margin-left = -100% right 的margin-left : -200px (這裡是right盒子的寬度)

3，這時由於main的左右部分被擋住只好給contaer padding值把main擠出來

4，這樣做之後左右盒子也被擠過來了所以需要給兩個盒子新增定位相對於自己把盒子定在左右兩邊

.contaer .left, .right .left .right .main

在學習完flex 後聖杯布局就很簡單了

結構：

class
="contaer"
>
class
="main"
>
maindiv
>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>

樣式：

.contaer .main .left, .right .left

雙飛翼布局：去掉了聖杯布局中的定位和padding 但是需要在main加入乙個p標籤然後給p標籤margin

結構：

class
="contaer"
>
class
="main"
>
>
mainp
>
div>
class
="left"
>
leftdiv
>
class
="right"
>
rightdiv
>
div>

樣式：

.left, .right .left .right .main /* 給p新增margin*/

p

雙飛翼布局和聖杯布局的區別：

除了結構上的差別聖杯布局中當頁面很小的時候 main 會被擠下來但是雙飛翼布局不會 flex布局也不會

class
=>
class
="main"
>
main
div>
div>
class
="footer"
>
div>

* html, body .main .footer

class
=>
div>
class
="footer"
>
div>

* html body .footer

常見的響應式布局解決方法

由於裝置的解析度不同，我們就用響應式布局來解決裝置解析度不同的問題，常見的解決方法有px視口查詢百分比 rem 和vw vh等方法來實現響應式布局。接下來介紹下個種方法。一 px和視口布局視口定義了pc網頁在移動端的預設布局行為，因為通常pc的解析度較大，布局視口預設為980px。也就是說在不...

CSS布局自適應高度解決方法

這是乙個比較典型的三行二列布局，每列高度事先並不能確定哪列的高度的相同，是每個設計師追求的目標，按一般的做法，大多採用背景圖填充加js指令碼的方法使列的高度相同，本文要介紹的是採用容器溢位部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。先看 wrap sideleft,s...

面試常見css布局以及解決方法

常見的響應式布局解決方法

CSS布局自適應高度解決方法

CSS布局自適應高度解決方法

相關推薦