两栏布局学习笔记
来源:互联网 发布:淘宝宝贝评论保留多久 编辑:程序博客网 时间:2024/05/19 01:30
两栏布局学习笔记
看到这个问题,第一想法就是使用margin来实现。当然了,使用margin是可以很容易实现的,那么还有没有别的方法呢?市面上那么多的布局方式,肯定是有的。结合我最近的学习,又想到了使用flex来进行布局,一试,诶果然可以。当然不能就此满足了,又去查了一下还有什么布局方式。果然还有一种有趣的布局方式吸引了我,那就是通过BFC和浮动实现的布局。
使用margin实现的布局
这个方法是最简单、最容易想到的。基本思想的话就是,一个固定宽度的元素在左侧,然后右侧使用margin和左侧隔出一定的距离就可以实现了。但是问题来了,在标准文档流中,每一个块级标签都是占一行的,那么应该如何将他们放到一行去呢?很显然,脱离文档流就好了,所以我们的基本思路就是把左侧的元素脱离文档流,右侧元素使用margin隔出距离。
实现后的效果
.left { float: left;//这里使用position:absolute也可以实现一样的效果,原理也相同 width: 200px; height: 300px; background-color: #cc0; } .main { margin-left: 210px; height: 300px; background-color: #0cc; }
使用flex布局
额,其实实现后的效果都一样,不过为了方便阅读还是把图放上去。
body { display: flex; background-color: #ccc } .left { width: 200px; height: 300px; background-color: #cc0; } .main { flex: 1;//或者flex-grow margin-left: 10px; height: 300px; background-color: #0cc; }
使用flex的话肯定要先改变外部容器的布局方式为flex,然后左侧的元素宽度是固定的,右侧元素的话使用flex或者flex-grow让元素变为自动填充满剩余的部分就可以实现了。使用flex布局果然简单,原理也是相当的好懂了。
使用BFC结合浮动布局
这个解释起来就比前两个复杂多了。这里为了方便解释没有在两栏之间加上间距。
我们先来看一下如果右侧栏不是BFC会怎么样
怎么看起来一样?其实不是的,如果右侧的元素不是BFC,那么左侧元素会因为浮动而盖在右侧元素之上。
那么为什么将右侧元素变为BFC就可以了呢。这是因为每个BFC都是一个独立的区域,他不会让这个BFC外部的元素对他内部造成干扰。所以当右侧元素变化为一个BFC的时候他的元素边界就发生了变化,他的边界紧紧贴合着左侧的元素。所以我们不需要使用margin就可以把右侧的元素放在右边,而不是和左侧元素重叠。
.left { float: left; width: 200px; height: 300px; background-color: #cc0; } .main { height: 300px; background-color: #0cc; }
但是这样写也造成了一些小的问题。在这个实例中我是没有让两栏之间有间距的。这是因为虽然右侧栏独立出来了,在BFC中内容区域的左侧边框是紧紧贴合着盒模型的边框的,所以我们简单的使用margin就是不可取的了。因为只有当margin的值超过了左侧栏的宽度,才会触及到更外一层的边框从而推动右侧栏向右移动。
总结
两栏布局,似乎挺简单的,但是其中还有着很多有趣的东西。也是顺便又学习了一波BFC的相关知识,收获良多。如果错误,欢迎指点讨论。
- 两栏布局学习笔记
- css两栏全屏布局学习
- CSS学习笔记:横向两列布局(float、margin)
- 三栏布局学习笔记
- 慕课网学习笔记----《网页布局基础》—横向两列布局
- 两栏布局
- 两栏自适应布局
- 两栏自适应布局
- 学习笔记2__布局:固定顶栏布局
- CSS学习笔记:使用绝对定位实现横向两列布局
- html css学习笔记-响应式布局的两种基本实现
- css布局:table布局、两栏布局、三栏布局
- Android布局学习笔记
- wpf学习笔记-布局
- CSS布局学习笔记
- Android 布局学习笔记
- ExtJs 布局学习笔记
- Android学习笔记--布局
- 关于try、catch、finally中return的执行顺序
- Syntax error on token "{", { expected after this token相关的常见错误
- Android面试知识点总结
- Mac selenium添加chromedriver.exe
- 交叉编译
- 两栏布局学习笔记
- HTTP协议的头信息详解(转载)
- 笔记:关于相对路径与绝对路径中遇到的问题
- Tcp Fast Open测试
- python编程(你的电脑能够执行多少线程和进程)
- cxf客户端调用者参数不合条件响应自定义SOAP提示策略.
- bzoj 4260 Codechef REBXOR(前缀和+01字典树)
- IE浏览器javascript调试
- 区块链初识