《拾人牙慧--圣杯布局》

思路:

1.div排列,center;left;right;

2.对上述3个div进行左浮动(float:left),通过设置margin-left为负值,使得left,right两个盒子上浮。

3.为避免left,right覆盖center,在包裹盒子上设置padding预留空间。

4.通过相对定位,将left,rigth移到预留位置(padding)。

重点,难点:

margin-left负值上浮的理解;

.left{margin-left:-100%

}   //理解为left的左边框,相对父盒子右边框的距离即可。(可能不太准确,但容易理解)

.right{margin-left:-200px;

} (取值为盒子宽度);

relative移动left,right;(还犯迷糊了,left是相对左框的距离,所以left为正值向右移,left为负值,向左移。忘了很可耻,特此钉在耻辱柱上。)




©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,546评论 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,049评论 1 45
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,844评论 0 11
  • ——白话玩词牌 苑中野花,小小思念啊。清风过檐下,痴痴望,晚霞如画。石板篱笆,也无人说话,别离她,却离她。空候深牵...
    干煸马鲛鱼阅读 1,469评论 1 2