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

center
left
right
CSS认识8_第1张图片
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

center
left
right
CSS认识8_第2张图片
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

center
left
right
CSS认识8_第3张图片
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

center
left
right
CSS认识8_第4张图片
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

center
left
right
CSS认识8_第5张图片
Paste_Image.png

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

你可能感兴趣的