面试题CSS盒子模型，左右固定宽度，五种方式适配中间

时间：2023-04-05 16:23:30 HTML5

面试题假设已知高度，请写一个三栏布局，左右300px，有多少种方式适应中间？最容易想到的就是用float来写，代码如下css样式代码，下面五种都用一种样式代码

float

floatfloatdivisionleftcenterright

css代码.main{height:100px;}.left{浮动：左；宽度：300px；背景色：绿色；}.right{浮动：正确；宽度：300px；背景色：灰色；}.center{背景颜色：金色；}总结优缺点。要了解优缺点，首先要了解什么是floating浮动布局的原理：为元素设置float:left或right，使元素脱离文档流，同时以类似的形式显示显示：内联块（您可以定义宽度和高度，但不会换行）。优点与之前的表格布局相比，更加灵活。缺点如果脱离文档流，会影响到以下要素。并使用clear:both清除浮动，将clearfix类添加到父类。.clearfix:after{content:"";height:0;display:block;clear:both}.clearfix{*display:inline-block}.clearfix{*display:block;}2.position定位方法实现代码格式如下.position-left{width:300px;背景色：绿色；位置：绝对；左：0；}.position-right{宽度：300px；背景色：灰色；位置：绝对；右：0；-center{背景色：金色；位置：绝对；左：300px；右：300px；}position定位优缺点优点：各个元素的显示位置相对独立，便于对各个元素的控制。使用定位属性和组合边offset属性可以将元素放置在任何需要的位置。这样做的好处是不需要考虑元素本身的显示方式和在页面代码中的位置，直接将元素分离出来进行定位。缺点：每个元素都是独立控制的，很难预测元素之间的相互影响。同时，元素可能会重叠，导致某些内容无法正常显示。3、实现flex布局的代码如下。flex{margin-top:160px;显示：弹性；}.flex-left{宽度：300px；背景色：绿色；}.flex-right{宽度：300px；背景色：灰色；}.flex-center{flex:1;：金子;}风格略有改变。代码如下

flex

flex浮动分区左中右

flex布局的优点优缺点：Flex是FlexibleBox的缩写，意思是“弹性布局”，用于为盒模型提供最大的灵活性。现在是主流响应式布局开发的中流砥柱，任何容器都可以指定为Flex布局。缺点：不支持IE8及以下浏览器4.表格布局代码如下table{width:100%;显示：表格；顶部边距：30px；}.table-left{显示：表格单元格；宽度：300px；背景色：绿色；}.table-right{显示：表格单元格；宽度：300px；背景色：灰色；}.table-center{显示：表格单元格；背景色：金色；}优点tablelayout兼容性很好。当flex布局不兼容时，可以试试table布局的劣势。当一个cell的高度超过高度时，两侧的cell也会一起变高。有时这种效果并不是我们想要的。5网格布局代码如下gird{display:grid;网格模板行：100px；网格模板列：300??px自动300px；顶部边距：30px；}.gird-left{背景颜色：绿色；}.gird-right{背景色：灰色；}.gird-center{背景色：金色；}优点1可以大大提高网页的标准化和复用性。网格系统下，页面模块大小标准化，可为大型网站的开发和维护节省大量成本；2基于网格的设计可以使整个网站各个页面的布局保持一致。这样可以增加页面的相似度，提高用户体验；3对于设计师来说，灵活运用网格系统可以做出许多优秀而独特的设计。缺点CSS新技术浏览器还没有完全支持它。扩展问题如何将已知高度更改为未知高度？如果块中的内容超过了会怎样？如果已知上下高度，那中间的自适应呢？两列布局怎么样？如果是上下左右混合布局呢？顺便打个广告，自学前端快3个月了，想在北京找工作。

上一篇：清除浮动的原理详解

下一篇：css布局中各种FC的简单介绍：BFC、IFC、GFC、FFC

面试题CSS盒子模型，左右固定宽度，五种方式适配中间相关文章