-
负边距在让元素产生偏移时和position: relative有什么区别?
答：
负边距让元素位移:会影响其他元素的位置，导致影响文档流。
Paste_Image.png
position:relative;不会改变该元素在文档流中原本位置，也不会影响其他元素位置，所以文档流结构不受影响。
Paste_Image.png
- 使用负 margin 形成三栏布局有什么条件?
答：- 三个元素都在父元素中处于float：left
- 中间栏宽度自适应为100%
- 左边栏的margin-left值设置为-100%，右边栏margin-left值设置为负的自身宽度。
- 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
答：原理：利用浮动和负margin实现三栏布局，再用相对定位调整两边的侧栏。-
创建父容器div，和三栏的div。注意顺序：中间内容栏应排在第一方便渲染。
Paste_Image.png
-
设定父容器的左右padding值分别为左右侧边栏的宽度.设置两个盒子的负margin，左侧为-100%，右侧为负其自身宽度。
Paste_Image.png
-
设定父容器和左右侧边栏position:relative;,调整他们的位置，使他们位于两侧。
Paste_Image.png
-
- 双飞翼布局的原理? 实现步骤?
答：和圣杯原理一致，不同的是，在上述的中间区块中在建一个区块进行调节。- 写出页面结构，父容器包裹左右侧边栏和中间内容栏
- 三个容器都设置浮动，并且父容器要清除浮动，中间栏宽度设100%
- 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%
-
在中间容器的内部增加一个div来包裹内容，设置这个div的左边距和右边距为两个侧边栏的宽度，从而给两边的侧边栏空出位置。
Paste_Image.png
网友评论