摘要：今天总结一下布局，之前校招面试的时候貌似很喜欢考布局，例如两栏自适应布局三栏自适应布局等等，实现的方法多种多样，总结一下以后就不乱了。脱离文档流触发使用脱离文档流之后，我们再利用区域不会与浮动元素重叠的特性来使剩下的元素自适应。
今天总结一下布局，之前校招面试的时候貌似很喜欢考布局，例如两栏自适应布局、三栏自适应布局等等，实现的方法多种多样，总结一下以后就不乱了。
两栏布局这里我们讲的两栏布局一般是左定宽右自适应的
左float+右margin-left
html, body {
height: 80%;
}
.wrapper {
height: 100%;
}
.common {
height: 100%;
}
.aside {
width: 200px;
background: green;
float: left;
}
.main {
background: red;
margin-left: 200px;
}
侧栏
主栏
双float+右calc
html, body {
height: 80%;
}
.wrapper {
height: 100%;
}
.common {
height: 100%;
float: left;
}
.aside {
width: 200px;
background: green;
}
.main {
background: red;
width: calc(100% - 200px);
}
侧栏
主栏
左absolute+右margin-left
html, body {
height: 80%;
}
.wrapper {
height: 100%;
position: relative;
}
.common {
height: 100%;
}
.aside {
position: absolute;
left: 0px;
width: 200px;
background: green;
}
.main {
background: red;
margin-left: 200px;
}
侧栏
主栏
双absolute
.wrapper {
height: 100%;
position: relative;
}
.common {
height: 100%;
}
.aside {
background: green;
position: absolute;
left: 0px;
width: 200px;
}
.main {
background: red;
position: absolute;
left: 200px;
right: 0px;
}
侧栏
主栏
flex
html, body {
height: 80%;
}
.wrapper {
height: 100%;
display: flex;
}
.common {
height: 100%;
}
.aside {
flex: 0 1 200px;
background: green;
}
.main {
flex-grow: 1;
background: red;
}
侧栏
主栏
三栏布局
这里说的三栏布局是左右定宽，中间自适应
float left + margin-left/margin-right + float right
html, body {
height: 100%;
}
.wrapper {
height: 100%;
}
.left {
height: 100%;
width: 200px;
float: left;
background: green;
}
.right {
height: 100%;
width: 200px;
float: right;
background: blue;
}
.main {
height: 100%;
margin: 0px 200px;
background: red;
}
BFC特性的三栏布局（后面总结BFC）
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
background-color: blue;
}
.main {
height: 200px;
overflow: hidden;
background-color: green;
}
Left
Right
Content
圣杯布局
html, body {
height: 100%;
}
.wrapper {
height: 80%;
padding: 0px 200px;
}
.common {
position: relative;
float: left;
height: 100%;
color: white;
}
.content {
background: red;
width: 100%;
}
.left {
background: blue;
width: 200px;
margin-left: -100%;
left: -200px;
}
.right {
background: green;
width: 200px;
margin-left: -200px;
right: -200px;
}
Content
Left
Right
中间内容区content在最前面，后面依次是left和right。
首先Content、Left、Right都设为float:left，然后Content宽度设为100%，此时Left和Right被挤到了下面一行；
将Left的margin-left设为-100%，Left被拉到了Content的最左边，且遮挡了Content的左边部分；将Right的负外左边距设为它的宽度，Right被拉到了Content的最右边，且遮住了Content的右边部分
此时再设置wapper的左右padding分别为Left和Right的宽度，此时Content的宽度被压缩到了合适的位置，但是Left和Right仍没有到正确的位置
最后通过相对定位，设置Left和Right都为relative，且Left的left设为其负宽度，Right的right设为其负宽度
双飞翼布局
html, body {
height: 100%;
}
.common {
height: 100%;
float: left;
color: #fff;
}
.content {
background: red;
width: 100%;
}
.content-in {
margin: 0px 200px;
}
.left {
background: blue;
width: 200px;
margin-left: -100%;
}
.right {
background: green;
width: 200px;
margin-left: -200px;
}
Content
Left
Right
首先Content、Left、Right都设置float:left；
将Left的margin-left设为-100%，Left被拉到了Content的最左边，且遮挡了Content的左边部分；将Right的负外左边距设为它的宽度，Right被拉到了Content的最右边，且遮住了Content的右边部分
Content-in设置左右margin分别为Left宽度和Right宽度即可
绝对定位
.wrapper {
height: 80%;
position: relative;
}
.common {
height: 100%;
color: white;
}
.left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: green;
}
.right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: blue;
}
.content {
background: red;
margin: 0 200px;
}
Content
Left
Right
flex
html, body {
height: 100%;
}
.wrapper {
height: 80%;
display: flex;
}
.common {
height: 100%;
color: white;
}
.content {
flex-grow: 1;
background: red;
}
.left {
flex: 0 1 200px;
order: -1;
background: blue;
}
.right {
flex: 0 1 200px;
background: green;
}
Content
Left
Right
总结
总结发现实现两栏或者三栏布局的方法大概有这么几种
脱离文档流+margin
在上面的实现方式中使用float和position:absolute来脱离文档流，然后再让剩下的元素调整外边距margin来做成自适应。
脱离文档流+触发BFC
使用float脱离文档流之后，我们再利用BFC区域不会与浮动元素重叠的特性来使剩下的元素自适应。
纯绝对定位
所有的栏都设置position:absolute，然后定宽元素设置宽度、left和Right位置，自适应元素只设置left和right位置
flex
使用flex的flex-grow和flex-shrink可以来实现自适应布局
其他
类似双飞翼和圣杯布局其实也是部分利用了浮动和定位的知识，以及负margin相关的操作，总体的知识并不变化
参考资料
http://zh.learnlayout.com/dis...
http://www.cnblogs.com/imwtr/...
https://zhuanlan.zhihu.com/p/...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115883.html
摘要：如何使用首先梳理一下，将属性分为两类作用在容器元素上的有个，其实容器元素上还有一个设置的属性作用在子元素上的有个当时设置布局之后，子元素的的属性将会失效。 why——为什么使用flex 长久以来，网页布局是一个比较难搞的地方，各种前端前辈呕心沥血总结了各种奇淫巧技，比如利用float和position来实现居中、两栏、三栏等等布局。然而css并不存在一个官方的布局方案，终于一种新的布局...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性 引子 曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来...
摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性 引子 曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来...
摘要：重绘元素做了一些不影响排版的改变，比如背景色下划线等等，只需要重新绘制的过程，叫做重绘。显然回流带来的代价大于重绘，因为重绘仅仅是重新画一遍元素而已，但是重绘是重新计算重新画。不然这会导致大量地读写这个结点的属性。 浏览器的大概工作流程 以普通的HTML页面为例： 解析HTML文档，生成dom树 解析css产生css规则树 解析JavaScript，通过DOM-API来操作dom树和...
阅读 4024·2021-11-22 13:53
阅读 1721·2021-09-23 11:52
阅读 2439·2021-09-06 15:02
阅读 939·2019-08-30 15:54
阅读 905·2019-08-30 14:15
阅读 2388·2019-08-29 18:39
阅读 656·2019-08-29 16:07
阅读 419·2019-08-29 13:13
