CSS左右自适应布局六种方案及原理

时间：2023-04-05 11:04:20 HTML5

CSS简单，但细节多，技巧高，易学难精。如何实现固定左右300px，中间宽度自适应？具有以下结构left

right

middle

公共样式，设置高度，设置左右宽度固定为300px，左右为红色，中间为黄色。.item{height:400px;}.left,.right{width:300px;背景：#f00;}.center{背景：黄色;}一。doublefloatingmethod.left{float:left;}.right{float:right;}原理：float不会完全脱离文档流，会占据原来的空间MDN官方解释：这个元素从正常流中移除（文档流）的网页，虽然它仍然保持部分的流动性（相对于绝对定位）。Q：center为什么要放在leftr和right之后？答：浏览器从上到下加载页面，left已经向左浮动，right已经向右浮动。渲染居中的时候，浏览器忽略了已经从文档流中分离出来的左右，居中元素会从头开始占据整行，但是发现左边还是占据了300px，右边占据了右边又是300px，所以居中的宽度介于left和right之间，实现宽度自适应2.绝对定位方法左中间right原理：左右绝对定位，脱离文档流。中间不设置宽度，只设置左右边距，自动填充一行块级元素的剩余空间。3.Elasticbox.wrapper{display:flex;}.center{flex:1;300px，center设置flex为1，效果实现了吗？浏览器看起来是右边，但实际上屏幕缩小后左右两边并不是固定在300px，宽度会被压缩。您还需要添加以下样式：.left,.right{flex-shrink:0;/*相当于flex:00auto*/}原理：flex:1其实是三个属性的简写，flex:1;相当于flex:11auto;.简单的说，它们代表：剩余空间，容器收缩时的压缩比，最小宽度。具体可以参考：MDN——由此得知，弹性盒子设置为flex:1；在中间，也就是flex:11auto;（自动填充容器剩余宽度，默认压缩比为默认最小宽度）left和right设置为flex-shrink:0;，flex-shrink是flex缩写中的第二个属性，相当于flex：00自动；（不设置自动填充容器剩余宽度，0不压缩最小宽度，默认auto）Q：left和right为什么要设置flex-shrink:0;相当于flex:00auto，这里最小宽度是auto，但是宽度还是固定在300px？答：auto的最小宽度是默认值，优先级低于具体元素设置的宽度。如果设置flex:00400px，则左右最小宽度为400px，优先级高于元素设置的宽度4.网格布局grid最简单的网格布局。包装器{显示：网格；网格模板列：300??px1fr300px；}快速理解：grid-template-columns是父容器的一个属性，不是top,right,bottom,left的意思，而是三个子元素的宽度（300px自动补满1个300px的剩余空间），如果你写grid-template-columns:300px1fr2fr100px;即四个子元素的宽度为300px1/3剩余空间2/3剩余空间100px5.Tablelayout.wrapper{width:100%;显示：表格；}.wrapper>.item:not(.center){显示：表格单元格；}将左右元素设置为单元格就可以了，但是当屏幕缩小时，左右固定的300px会被压缩。问题：为什么要设置宽度为100%？答：display:table和table元素类似，其实是内联块级元素，不是块级元素。表格不是自动响应的：当您使用正确的布局容器（如

、

或

是通用流内容容器，没有CSS时，其内容或布局具有没有影响。"))，它们的默认宽度是父元素的100%。表格默认大小是基于它们的内容。因此，需要采取额外的步骤来获取表格布局样式，以便在各种设备上有效工作.六。css计算，JS计算①calc计算。包装器{空白：nowrap;字体大小：0；-webkit-文本大小调整：无；}.item{显示：内联块；}.center{width:calc(100vw-300px*2);}原理：只要把div放在同一行，用calc计算宽度即可。字体大小：0；-webkit-文本大小调整：无；就是消除inline-blockgap，其他方法也可以②jscalculation.wrapper{white-space:nowrap;字体大小：0；-webkit-文本大小调整：无；}.item{显示：内联块；过渡：0.4s；}与calc一致，可以计算出相对宽度总结一下：绝对定位方式脱离了文档流，容易造成布局问题。网格布局简洁，功能强大，兼容移动端。js方式通用，但不易维护推荐使用flex、grid。欢迎交流

上一篇：如何使用Enhancer快速开发手机应用

下一篇：cocoscreator3D-拇指射箭

CSS左右自适应布局六种方案及原理相关文章