css：左中右布局占满屏幕，左右两块固定宽度200px ，中间自适应，先加载中间块

真实lie

已于 2022-07-05 21:04:19 修改

阅读量1.6k

点赞数 2

分类专栏： css 文章标签： css

于 2022-04-09 21:43:24 首次发布

本文链接：https://blog.csdn.net/qq_52824207/article/details/124068657

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分析：

1.中间自适应

弹性布局display:flex

flex-grow增长系数，左右默认为0，中间设置为1即可分配所有剩余空间（分配给左右固定宽度之后的空间）

2：先加载中间

css选择器优先级问题

（1）越精确优先级越高

id选择器>类选择器>元素选择器(伪类、伪元素等暂不讨论)

（2）css文件里越后面优先级越高（相同类型）

用于先加载中间块（单纯满足需求：先加载中间块，和自适应没有关系）

代码：

html

<!DOCTYPE html>
<html>
    <head>
        <title>左中右布局</title>
        <link rel="stylesheet" href="左中右布局.css"/>
    </head>
    <body>
        <div class="flex-container">
            <div class="container-left">
                左边宽度固定200px
            </div>
            <div class="container-center">
                中间自适应
            </div>
            <div class="container-right">
                右边宽度固定200px
            </div>
        </div>
    </body>
</html>

css

*{
    margin: 0;
    padding: 0;
}

.flex-container{
    width: 100%;
    height: 1000px;
    display: flex;
    text-align: center;
    line-height: 1000px;
}

.container-right{
    width: 200px;
    background-color: blue;
}

.container-left{
    width: 200px;
    background-color: red;
}

.container-center{
    flex-grow: 1;
    background-color: yellow;
}

实际效果图：

真实lie

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
css：左中右布局占满屏幕，左右两块固定宽度200px ，中间自适应，先加载中间块

分析：1.中间自适应弹性布局display:flexflex-grow增长系数，左右默认为0，中间设置为1即可分配所有剩余空间（分配给左右固定宽度之后的空间）2：先加载中间css选择器优先级问题（1）越精确优先级越高id选择器>类选择器>元素选择器(伪类、伪元素等暂不讨论)（2）css文件里越后面优先级越高（相同类型）代码：html<!DOCTYPE html><html> <head>
复制链接

扫一扫