负边距、三栏布局（12）
2016-11-29 本文已影响8人
吴晗君
问答
一、负边距在让元素产生偏移时和position: relative有什么区别?
- 元素使用负margin偏移时，相邻元素也会跟着它移动。而position:relative移动时，相邻元素保持原来的地方不变。
- 因为relative元素本身的文档流位置还是被自己给占据。而负margin则是确确实实改变了文档流的位置。
-
设置了负margin的元素（即使该元素同时设置了relative）相对于定位元素在下。设置了float的元素也在relative的下面（很奇怪）
relative上margin下
负margin
position:relative
二、使用负 margin 形成三栏布局有什么条件?
- 三栏都要有同向浮动
- 侧栏宽度固定，主块自适应。
- 设置合适的负margin的值
- 用合适的方法使得三栏分离，如侧栏相对定位，或者主区块内部设置区块来收缩使其分离。
三、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。
- 原理：
- 浮动：浮动是和负margin等同重要的，并不是因为负margin的特性，下面的负margin浮动块才会跑上去。原因就在于浮动的基本特性：浮动的元素在父容器会并排排列，直到该行满了才会到下一行。
- 负margin：作用是先大致定位，负margin加上浮动特性可以覆盖使其在其他浮动块元素上。
- 父元素padding：给子元素块留出移动的空间。
- position:relative小范围微调位置。（这个时候我们又发现relative的元素是在最上面一层的）
- 步骤
- 三栏都要设置同向浮动，左浮右浮都可以。这时候因为主区块设置的宽度是100%所以另两个都被挤在下面。
- 这时候我们设置负margin，一个margin:-100%,另一个设置侧栏固定宽度。（这个100%相对的是父容器的宽度，如果我们设置父容器固定宽度，那main区域宽度就不会自适应了。main块宽度设置的就是100%父元素宽度）
- 给父元素设置左右padding以便于接下来两个侧边栏块用相对定位微调位置。
- 用position:relative小范围偏移即可。
四、双飞翼布局的原理? 实现步骤?
- 实现步骤：
-
先写好body部分，主区块必须放在上面优先被浏览器渲染。侧栏被优先渲染的话，因为之前没有浮动元素，我们设置了负margin它只会往左或右一直跑而不会上去。
body部分
-
定义好宽高颜色等css样式，并且让3栏都浮动
大致
-
两侧边栏设置负margin，使得三栏排列在一行上，但我们发现两侧边栏覆盖住了主区块。
设置负margin
-
这时候我们在main块里设置的content块就起作用了，我们给它设置高度和外边距和颜色。并且设置左右margin值（值的大小为左右侧边栏的宽度）
主区块
- 原理：侧栏负margin加三栏同向浮动使其并排排列，主栏区域设置div块添加左右margin使得侧栏块得以显示。
- 双飞翼和圣杯区别：圣杯用相对定位来分离主区块和侧栏，双飞翼则是给主区块内部添加块级元素。
-
忘记清浮动了，应该用clearfix
清除浮动
