div+css三栏式布局
2016-03-19 01:04
423 查看
最近组队报名参加了百度前端技术学院,里面有针对学习前端各个不同阶段的任务,然后在git上推送自己写的任务代码,也可以查看别人的代码,通过这种方式来相互学习。然后我选了几个任务,其中就有一个是div+css三栏式布局的。由于以前自学的时候过于笼统,然后许多东西就是一知半解,很多时候就是为了效果而去写代码,并不很清楚原理是什么,也没有对不同的方法进行分类和总结,但参加了这个之后,看到许多别人写的用不同的方法实现效果的代码以及别人提的一些学习建议,才真正意识到这个问题的严重性。下面,就从这次的div+css三栏式布局开始总结吧。
三栏式布局里面也有很多种,一般由子列,主列和附加列构成,这次要实现的是中间自适应宽度+两边固定宽度+父元素的高度由子元素中最大高度决定。
我是这样实现的:将left和right分别浮动到左边和右边,然后content设置左右外边距。必须注意的是left和right部分要写在content的前面,先把位置占好,才不会被content挤出去。
后来学长说到了圣杯布局和双飞翼布局,下面我们一起来看看这两种实现三栏式布局的方法。
2.实现:先将left和right都设为浮动,然后将left和right利用负外边距分别定为到左边和右边——此时left和right已经到了正确的位置但它们会将content覆盖,然后给容器container添加左右内边距从而让content定位正确——此时会发现left和right的位置也随容器内边距变化而变化了,然后给left和right设置相对定位——此时当浏览器大小改变时left和right会移动,最后在容器中设置min-width完成。值得注意的是content在left和right的前面。最终代码:
2.实现:先将content和left和right设为浮动,然后将left和right利用负外边距分别定为到左边和右边,然后在content外面包裹一个width:100%的div,然后设置content的左右外边距。最终代码:
这就是自己在这个任务中学到的,希望自己能一直坚持这种方式,让自己对web前端的学习更深入,对知识的了解更透彻。
三栏式布局里面也有很多种,一般由子列,主列和附加列构成,这次要实现的是中间自适应宽度+两边固定宽度+父元素的高度由子元素中最大高度决定。
我是这样实现的:将left和right分别浮动到左边和右边,然后content设置左右外边距。必须注意的是left和right部分要写在content的前面,先把位置占好,才不会被content挤出去。
圣杯布局:
1.特点:主要内容列先加载;不需要清楚浮动。2.实现:先将left和right都设为浮动,然后将left和right利用负外边距分别定为到左边和右边——此时left和right已经到了正确的位置但它们会将content覆盖,然后给容器container添加左右内边距从而让content定位正确——此时会发现left和right的位置也随容器内边距变化而变化了,然后给left和right设置相对定位——此时当浏览器大小改变时left和right会移动,最后在容器中设置min-width完成。值得注意的是content在left和right的前面。最终代码:
双飞翼布局:
1.特点:主要内容列先加载;不需要清楚浮动2.实现:先将content和left和right设为浮动,然后将left和right利用负外边距分别定为到左边和右边,然后在content外面包裹一个width:100%的div,然后设置content的左右外边距。最终代码:
这就是自己在这个任务中学到的,希望自己能一直坚持这种方式,让自己对web前端的学习更深入,对知识的了解更透彻。
相关文章推荐
- css首字下沉
- css跨浏览器最小高度
- CSS学习(十八)-滚动条、拖动元素、轮廓线
- No.2小白的HTML+CSS心得篇
- 修改ECSHOP结算中心“立即使用支付宝支付”按钮样式
- 使用CSS3美化复选框checkbox
- CSS3布局相关样式学习
- 深入理解CSS溢出overflow
- 总结CSS中清除浮动的三种方法
- css 学习笔记 一
- css中如何给块元素设置自动居中
- 蓝桥杯 手链样式 枚举
- css居中控制 水平居中 垂直居中
- 关于css的默认宽度
- line-height
- WPF-样式的定义和使用
- CSSbefore和after伪类
- css
- CSS框模型:一切皆为框 — 从行框说起
- CSS3 @keyframes 规则