負(fù)邊距在讓元素產(chǎn)生偏移和 position:relative有什么區(qū)別柏卤？
負(fù)margin會(huì)使相鄰的浮動(dòng)元素后inline-block元素產(chǎn)生偏移，而position:relative則不會(huì)影響抖拴。
使用負(fù)margin形成三欄布局有什么條件燎字？
- 三欄全部浮動(dòng)。
- 渲染順序?yàn)橹凶笥摇?/li>
- 左右欄寬度固定。
圣杯布局的原理是怎樣的? 簡(jiǎn)述實(shí)現(xiàn)圣杯布局的步驟候衍。
使用負(fù)margin使浮動(dòng)元素上移笼蛛，父容器加padding實(shí)現(xiàn)。
- 設(shè)置三欄元素浮動(dòng)蛉鹿；
- 用負(fù)margin是左右兩欄上移伐弹，左邊欄margin-left設(shè)置-100%，右邊欄設(shè)置margin-left為負(fù)的自身寬度榨为。
- 父容器設(shè)置padding為左右兩欄固定寬度惨好，使父容器撐大。
- 使用
position:relative調(diào)整左右兩欄位置随闺。
雙飛翼布局的原理? 實(shí)現(xiàn)步驟?
在圣杯布局的基礎(chǔ)上日川，不再設(shè)置父容器padding撐開寬度，在中間欄建一個(gè)字div矩乐，設(shè)置盒子的margin實(shí)現(xiàn)龄句。
- 設(shè)置三欄元素浮動(dòng)；
- 用負(fù)margin是左右兩欄上移散罕，左邊欄margin-left設(shè)置-100%分歇，右邊欄設(shè)置margin-left為負(fù)的自身寬度。
- 在主欄里面再加上一個(gè)子div欧漱。在子div里面設(shè)置左右margin的值(大于等于左右兩欄的寬度) 职抡。
