经典布局问题——两边定宽，中间自适应的6种布局方法

最新推荐文章于 2022-07-22 09:05:20 发布

tengxi_5290

最新推荐文章于 2022-07-22 09:05:20 发布

阅读量628

点赞数

分类专栏：面试总结 css 文章标签： css3 前端面试

本文链接：https://blog.csdn.net/tengxi_5290/article/details/124823688

版权

面试总结同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

本文详细介绍了网页布局的四种主要技术：浮动(float)、绝对定位(position)、Flexbox和Grid。每种方法都有其适用场景和优缺点，例如浮动常用于创建两栏布局，而Flexbox和Grid则提供更现代、响应式的解决方案。对于不支持这些新技术的浏览器，可以使用calc()函数进行兼容性处理。

摘要由CSDN通过智能技术生成

左右浮动

float: left | right;

对两边元素分别设置float为left、right。

浮动元素后面记得清浮动，不然页面布局会混乱，兼容性好。

绝对定位

容器设置position为relative，内容均设置position为absolute，用left=0，left=firstContentWidth，right=0控制左中右位置。

脱离文档流，兼容性较好。

.container {
    position: relative;
}
.item {
    position: absolute;
    .item1 {
        left: 0;
        width: 100px;
    }
    .item2 {
        left: 100px;
    }
    .item3 {
        right: 0;
    }
}

Flex

外层元素设置display为flex，内层中间自适应元素设置flex值为1，两侧元素设置各自的宽。

或者外层元素设置display为flex，内层两侧元素设置flex-shrink为0。

flex-shrink指的是当flex容器空间不足时候，单个元素的收缩比例。默认值是1，也就是默认所有子项都会收缩，设置为0，则不收缩，保持原始宽度。

flex: 1;是flex-grow（1）、flex-shrink（1）和flex-basis（auto）的集合写法。

不支持IE8以下版本浏览器。

.container {
    display: flex;
}
.center {
    flex: 1;
}

.container { display: flex; }
.item1 { flex-shrink: 0; }
.item3 { flex-shrink: 0; }

Grid

容器设置display为grid，通过css属性grid-template-rows设置grid行高通过grid-template-columns设置左右列宽。

不支持IE8以下版本浏览器。

.container { display: grid; grid-template-rows: 500px; grid-template-columns: 300px auto 300px; }

Table

容器display设置为table，内容display均设置为table-cell。

不支持IE8以下版本浏览器。

.container { display: table; }
.item { display: table-cell; }

calc计算法

中间自适应部分宽度 = 屏幕视图宽 - 左侧定宽 - 右侧定宽。

容器设置布局方式为flex。

借助css的calc实现自适应。

.container {
    display: flex;
}
.mid {
    width: calc(100vw - 100px - 200px);
}