常用布局总结

时间：2023-03-31 00:55:57 CSS

一、双栏布局1.1左栏固定宽度，右栏自适应1）使用float+margin实现（方法一）HTML代码：左栏固定宽度

右栏自适应

CSS代码：.left{width:600px;高度：400px；背景颜色：粉红色；浮动：左；}。右{高度：400px；背景颜色：天蓝色；margin-left:600px;}2）使用float+margin实现（方法二）HTML代码：左列固定宽度

右栏自适应CSS代码：.left{width:100px;高度：400px；背景色：#33cccc；float:left;}.right-fix{margin-left:-100px;宽度：100%；float:right;}.right{margin-left:100px;高度：400px；background-color:#876ed7;}3)使用float+overflow实现HTML代码：leftcolumnfixedwidth右列自适应CSS代码：.left{width:100像素；高度：400px；背景色：#d25fd2；浮动：左；}。右{高度：400px；背景色：#d235d2；overflow:hidden;}分析：div.right设置overflow:hidden形成一个BFC，不与div.left的floatbox重叠，宽度达到一个adaptiveBFC（blockformattingcontext，块级格式化上下文）创建一个BFC:1.浮动元素(float:left|right);2.绝对定位元素（position:absolute|fixed）；3、行内块元素（显示：inline-block）；4.表格单元格（显示：table-cells,td,th）；5.表格标题（display:table-captions|table-caption）；6.“溢出”特征不可见的元素；7.Flexbox（显示：flex|inline-flex）；BFC布局规则：1.innerBoxes会在垂直方向依次放置。2.Box的垂直距离由margin决定。属于同一BFC的两个相邻框的边距将重叠。3.每个元素的外边距框的左侧触及包含块边框框的左侧（对于从左到右的格式，否则相反）。即使存在浮动也是如此。(#)4.BFC区域不会与浮动框重叠。(#)5、BFC在页面上是一个隔离独立的容器，容器内的子元素不会影响外面的元素。反之亦然。6、计算BFC的高度时，浮动元素也参与计算（clearfloating）。因为BFC内外的元素永远不会互相影响，所以在这个例子中，当BFC外有浮动时，应该不会影响BFC内Box的布局，BFC会变窄而不与浮动重叠.1)和3)的相同点和不同点：相同点：两者的div.left都使用float浮动区别：1)div.right使用margin-left来改变宽度。3）div.right使用overflow:hidden形成BFC自适应宽度，不需要关注div.left的固定宽度。4）使用表格实现HTML代码：左栏固定宽度右栏自适应

CSS代码：.two-col-4{width:100%;高度：400px；显示：表格；}.left，.right{显示：表格单元格；/*使用单元格自动分配宽度*/}.left{width:100px;背景颜色：#ff9040;}.right{背景颜色：#ffb273;}.rightdiv{背景颜色：红色;宽度：100px；高度：100px；margin:30px;}缺点：display:table-cell形成BFC，导致margincollapse。属于同一BFC的两个相邻框的边距将重叠。5）利用position实现HTNML代码：左栏固定宽度右栏自适应CSS代码：.two-col-5{position:relative;}.left{width:100px;高度：400px；背景色：#f7fe00；位置：绝对；顶部：0；左：0;}.right{高度：400px;背景色：#52e93a；位置：绝对；顶部：0；左：100px；right:0;}6)使用flex实现HTML代码：左列固定宽度右栏自适应CSS代码：.two-col-6{width:100%;高度：400px；显示：flex;}.left{宽度：100px;背景色：#39e639;}.right{flex:1;background-color:#67e667;}分析：flex是flex-grow、flex-shrink和flex-basis的简写。flex-grow：用来“划分”父item的“剩余空间”flex-shrink：设置子item的缩小比例，默认为1，即父item空间不足时，item会收缩。flex-basis：用来设置child占用的空间。如果设置了值，则子项占用的空间为设置值；如果不设置或为auto，则子项占用的空间为width/height的值。1.2右侧固定宽度，左侧自适应1）使用float+overflow实现HTML代码：右侧列固定宽度左栏自适应CSS代码：.left{height:400px;背景色：粉色；溢出：隐藏；/*BFC*/}.right{width:100px;高度：400px；背景颜色：天蓝色；float:right;}1.3一列可变，一列自适应1）使用float+overflow实现HTML代码：左边列宽可变右列自适应CSS代码：.left{height:400px;背景色：#ff9040；向左飘浮;/*只有浮动，没有宽度*/}.right{height:400px;背景色：#ffb273；溢出：隐藏；/*触发BFC*/}2）使用flex实现HTML代码：leftcolumnvariablewidth右列自适应CSS代码：.two-col-lr-2{display:flex;}.left{/*nowidth*/height:400px;背景色：#f63e62;}.right{高度：400px;背景色：#f66f89；弹性：1；/*将父项剩余部分平分*/}两列或三列布局2.1两列定宽，一列自适应1）使用float+Margin实现HTML代码：左栏固定宽度中间固定宽度右栏自适应CSS代码：.tri-col-1{min-width:300px;}.left{width:100px;高度：400px；背景色：#ed002f；float:left;}.center{宽度:200px;高度：400px；背景色：#f63e62；float:left;}.right{margin-left:300px;高度：400px；;}2)使用float+overflow实现HTML代码：leftcolumnfixedwidthmiddle固定宽度右列自适应CSS代码：.tri-col-2{min-width:300px;}.left{width:100px;高度：400px；背景色：#ff7400；float:left;}.center{宽度:200px;高度：400px；背景色：#ff9640；浮动：左；}。右{高度：400px；背景色：#ffb273；溢出：隐藏；/*触发BFC*/}3）使用table实现HTML代码：左列固定宽度中间定宽右栏自适应CSS代码：.tri-col-3{width:100%;高度：400px；显示：表格；}.left{宽度：100px；背景色：#ffc900；显示：表格单元格；}.center{宽度：200px；背景色：#ffd640；显示：表格单元格；}.right{背景颜色：#ffe173；display:table-cell;}4)使用flex实现HTML代码：左列固定宽度中间固定宽度右栏自适应CSS代码：.tri-col-4{height:400px;显示：flex;}.left{宽度：100px;背景色：#00cc00;}.center{宽度：200px;背景色：#39e639;}.right{背景色：#67e667;弹性：1；/*平分父item的其余部分实现自适应*/}2.2两侧固定宽度，中间自适应1）使用flex实现HTML代码：左栏固定宽度中间自适应右栏固定宽度CSS代码：.tri-col-lr-1{height:400px;显示：flex;}.left{宽度：100px;背景色：#bc008d;}.center{flex:1;颜色：#dd37b4;}.right{宽度：200px;background-color:#dd64bf;}2）利用position实现HTML代码：LeftColumnFixedWidth中间自适应右列固定宽度CSS代码：.tri-col-lr-2{position:relative;}.left{宽度：100px；高度：400px；位置：绝对；顶部：0；左：0；背景色：#00af64;}.center{margin-left:100px;右边距：200px；高度：400px；背景色：#37dc74;}.right{宽度：200px;高度：400px；位置：绝对；顶部：0；右：0；background-color:#63dc90;}3.多栏等宽布局1）使用table实现HTML代码：12345CSS代码：.multi-col-1{width:100%;高度：400px；显示：表格；}.col{显示：表格单元格；/*不需要关注列数，单元格自动平分*/}.col:nth-child(odd){background:pink;}.col:nth-child(even){background:lightgreen;}2)使用flex实现HTML代码：12345CSS代码：.multi-col-2{height:400px;display:flex;}.col{flex:1;/*不用关注列数，会自动划分*/}.col:nth-child(odd){background:lightcoral;}.col:nth-child(even){background:yellow;}四、九方格布局1）使用tableReality现代HTML代码：123456789CSS代码：.squ-1{width:100%;高度：400px；边框：1px纯黑色；显示：表格；}.row{显示：表格行；}.item{显示：表格单元格；border:1pxsolidred;}2）使用flex实现HTML代码：123456789CSS代码：.squ-2{宽度：100%；高度：400px；边框：1px纯黑色；显示：弹性；flex-direction:column;}.row{display:flex;flex:1;}.item{flex:1;边框：1px纯天蓝色；}

上一篇：盒子模型的一些分析

下一篇：Web前端基础技术HTML、CSS、JavaScript的三要素

常用布局总结相关文章