CSS认识8

负边距在让元素产生偏移时和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

本教程版权归菲龍探雲和饥人谷所有，转载须说明来源

CSS认识8

推荐阅读更多精彩内容