【前端工程师手册】布局

时间：2023-03-30 15:08:32 CSS

今天总结一下布局。貌似之前校招面试的时候很喜欢测试布局，比如两栏自适应布局，三栏自适应布局等等，有很多方法可以实现。总结一下，以后就不会乱七八糟了。两栏布局我们这里说的两栏布局一般是leftfloat+rightmargin-lefthtml,body{height:80%;}.wrapper{高度：100%；}.common{高度：100%；}.aside{宽度：200px；背景：绿色；向左飘浮;}.main{背景：红色；左边距：200px；}

侧栏

主栏

Doublefloat+rightcalchtml,body{height:80%;}.wrapper{高度：100%；}.common{高度：100%；向左飘浮;}.aside{宽度：200px；背景：绿色；}.main{背景：红色；宽度：计算（100%-200px）；}

sidebar

主栏

左absolute+右margin-lefthtml,body{height:80%;}.wrapper{高度：100%；位置：相对；}.common{高度：100%；}.aside{位置：绝对；左：0px；宽度：200px；背景：绿色；}.main{背景：红色；左边距：200px；}

侧栏

主栏

双absolute.wrapper{height:100%;位置：相对；}.common{高度：100%；}.aside{背景：绿色；位置：绝对；左：0px；宽度：200px；}.main{背景：红色；位置：绝对；左：200px；右：0px；}

侧栏

主栏

flexhtml,body{高度:80%;}.wrapper{高度：100%；显示：弹性；}.common{高度：100%；}.aside{flex:01200px;背景：绿色；}.main{flex-grow:1;背景：红色；}

sidebar

主栏

三栏布局这里说的三栏布局是左右定宽，中间自适应floatleft+margin-left/margin-right+floatrighthtml,body{height:100%;}.wrapper{高度：100%；}.left{高度：100%；宽度：200px；向左飘浮;背景：绿色；}。正确的{高度：100%；宽度：200px；浮动：对；背景：蓝色；}.main{高度：100%；边距：0px200px；背景：红色；}BFC特殊的三栏布局（后面板总结BFC）.left{float:left;高度：200px；宽度：100px；背景色：红色；}.right{宽度：200px；高度：200px；浮动：对；背景色：蓝色；}.main{高度：200px；溢出：隐藏；背景色：绿色；}

左

右

内容

圣杯布局html,body{height:100%;}.wrapper{高度：80%；填充：0px200px；}.common{位置：相对；向左飘浮;高度：100%；白颜色;}.content{背景：红色；宽度：100%；}.left{背景：蓝色；宽度：200px；左边距：-100%；左：-200px；}.right{背景：绿色；宽度：200px；左边距：-200px；右：-200px；}

Content

Left

Right

中间内容区的内容在最前面，其次是left和right首先Content、Left、Right都设置为float:left，然后Content的宽度设置为100%。这时候，Left和Right被挤到了底线；设置Left的margin-left为-100%，Left被拉到Content。最左边，覆盖Content的左边部分；设置Right的负外边距为它的宽度，Right被拉到Content的最右边，覆盖Content的右边部分，然后分别设置wrapper的左右padding为Left和Right的宽度。这时候Content的宽度被压缩到了合适的位置，但是Left和Right还是不在正确的位置。最后通过相对定位，将Left和Right都设置为relative，Left的左边设置为它的负值。宽度，Right的右边设置为其负宽度双飞翼布局html,body{height:100%;}.common{高度：100%；向左飘浮;颜色：#fff；}.content{背景：红色；宽度：100%；}.content-in{边距：0px200px；}.left{背景：蓝色；宽度：200px；左边距：-100%；}.right{背景：绿色；宽度：200px；-200像素；}

内容

Left

Right

首先Content、Left、Right都设置为float:left；将Left的margin-left设置为-100%，将Left拉到Content上，覆盖Content的左边部分；设置Right的负外左外边距为其宽度，Right被拉到Content的最右边，覆盖Content的右边部分。Content-in设置左右边距为Leftwidth，Rightwidth可以绝对定位。包装器{高度：80%；位置：相对；}.common{高度：100%；白颜色;}.left{位置：绝对；顶部：0px；左：0px；宽度：200px；背景：绿色；}.right{位置：绝对；顶部：0px；右：0px；宽度：200px；背景：蓝色；"wrapper">

Content

Left

右

flexhtml,body{height:100%;}.wrapper{height:80%;display:flex;}.common{height:100%;颜色：白色；}.content{flex-grow：1；背景：红色；}.left{flex：01200px；顺序：-1；背景：蓝色；}.right{flex：01200px；背景：绿色;}

Content

Left

Right

总结总结发现大概有几种方法可以实现两栏或者三栏布局出来documentflow+marginin上面的实现中，使用float和position:absolute脱离了documentflow，然后让剩下的元素调整margin使其自适应脱离documentflow+触发BFC后使用float脱离文档流，我们再利用BFCarea不重叠浮动元素的属性，使得剩下的元素自适应。纯绝对定位所有的列都设置为position:absolute，那么定宽元素设置宽度，左右位置，自适应元素只设置左右位置。flex使用flex的flex-grow和flex-shrink来实现自适应布局其他像双飞翼、圣杯等布局其实部分用到了浮动和定位的知识，以及负边距相关的操作。整体知识不会改变。参考http://zh.learnlayout.com/dis...http://www.cnblogs.com/imwtr/...https://zhuanlan.zhihu.com/p/...

上一篇：LearnCSSFlex

下一篇：vue+elementUi实现密码显示-隐藏+小图标变化（js三行代码，其中一行为了美观）

【前端工程师手册】布局相关文章