- 负边距在让元素产生偏移时和position: relative有什么区别?
负边距让元素偏移的时候，该元素不再占据原来的空间
position: relative让元素偏移时候，该元素仍就占据原来的空间
- 使用负 margin 形成三栏布局有什么条件?
都使用float:left
- 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
一、我们需要做的是中间一块预先加载 左右两边固定
css
*{margin: 0;padding:0;font-size:40px}
.center{width:100%;height: 500px;background: red} /* 宽度设置100%来自适应*/
.left{width: 100px;height: 500px;background:green;}
.right{width: 200px;height: 500px;background: blue;}
body
<div class="wapper">
<div class="center">center</div> <!--先写center预先加载-->
<div class="left">left</div>
<div class="right">right</div>
</div>
Paste_Image.png
二利用float和负margin把left和right浮动上去
css
*{margin: 0;padding:0;font-size: 40px;}
.center{width:100%;height: 500px;background: red} /* 宽度设置100%来自适应*/
.left{width: 100px;height: 500px;background:green;margin-left:-100%; }
.right{width: 200px;height: 500px;background: blue;margin-left:-200px; }
.center,.left,.right{float: left;}
body
<div class="wapper">
<div class="center">center</div> <!--先写center预先加载-->
<div class="left">left</div>
<div class="right">right</div>
</div>
Paste_Image.png
center里面内容看不到了我们需要把内容显现出来
css
*{margin: 0;padding:0;font-size: 40px;}
.wapper{padding-right: 200px;padding-left: 100px;}/*利用父级padding属性把内容压缩到正确的位置 */
.center{width:100%;height: 500px;background: red} /* 宽度设置100%来自适应*/
.left{width: 100px;height: 500px;background:green;margin-left:-100%;right:100px; }
.right{width: 200px;height: 500px;background: blue;margin-left:-200px;left:200px; }
.center,.left,.right{float: left;position: relative;} /*需要利用position: relative;位置变但是仍旧占据空间的特性 */
body
<div class="wapper">
<div class="center">center</div> <!--先写center预先加载-->
<div class="left">left</div>
<div class="right">right</div>
</div>
Paste_Image.png
- 双飞翼布局的原理? 实现步骤?
前面跟圣杯布局都是一样
css
*{margin: 0;padding:0;font-size: 40px;}
.center{width:100%;height: 500px;background: red} /* 宽度设置100%来自适应*/
.left{width: 100px;height: 500px;background:green;margin-left:-100%; }
.right{width: 200px;height: 500px;background: blue;margin-left:-200px; }
.center,.left,.right{float: left;}
body
<div class="wapper">
<div class="center">center</div> <!--先写center预先加载-->
<div class="left">left</div>
<div class="right">right</div>
</div>
Paste_Image.png
我们需要让内容显现出来
css
*{margin: 0;padding:0;font-size: 40px;}
.center{width:100%;height: 500px;background: red} /* 宽度设置100%来自适应*/
.left{width: 100px;height: 500px;background:green;margin-left:-100%; }
.right{width: 200px;height: 500px;background: blue;margin-left:-200px; }
.center,.left,.right{float: left;}
.inner{margin-left:100px;margin-right:200px;} /*内容用一个div包裹使用margin来撑开左右间距*/
body
<div class="wapper">
<div class="center"><div class="inner">center</div></div> <!--先写center预先加载-->
<div class="left">left</div>
<div class="right">right</div>
</div>
Paste_Image.png
本教程版权归菲龍探雲和饥人谷所有，转载须说明来源
