CSS常用布局（主要三栏布局）

最新推荐文章于 2024-11-06 16:49:18 发布

runzhi_z

最新推荐文章于 2024-11-06 16:49:18 发布

阅读量292

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/womuz/article/details/104772116

版权

前端专栏收录该内容

14 篇文章

订阅专栏

CSS常用五种布局：三栏布局，两列自适应布局，单列布局，等高布局，粘连布局
从面试最常问到的开始吧：

三栏布局

七种实现方式：

浮动布局

当元素使用float时，块元素会脱离标准流，按照float所设置的属性值向其父元素（内边距）的左右两边靠拢，且其他元素会自动忽略该元素，盒子的宽度不会独占一行，而是由具体宽度或其内容决定
补充：标准流的概念 – 网页内标签元素正常由上到下，从左到右的顺序排列（块级元素会独占一行，普通元素会依次前后排列）
浮动元素虽然脱离了标准流，但是会对标准流的页面布局产生影响，就涉及到清除浮动
浮动主要造成什么影响呢：高度坍塌：普通流中子元素可以撑开父元素，但是子元素浮动后，脱离标准流，父元素的高度为0
如何清除浮动呢：最常用的方法就是在浮动元素后面添加标签使用clear属性

绝对定位布局

设置元素的position： absolute，并设置left，right属性

flexbox布局（flex布局、弹性盒子布局）

父容器设置display：flex，父容器为flex容器，子元素为flex项目
flex容器的属性：flex-direction （主轴方向），flex-wrap （是否换行），flex-flow（是对前面两个属性的简写），justify-content（flex项目在flex容器沿着主轴在当前行的的对齐方式），align-items（项目在容器测轴的对齐方式），align-content（（多行）flex容器内的行在flex容器中测轴的排列方式）
flex项目属性：order（指定项目排列顺序，从小到大），flex-grow（指定放大比例（默认为0，为时表示大小相等）），flex-shrink（缩小比例，默认值1都缩小，若为0则不缩小），flex-base（与width和height属性相同，用来指定项目大小），flex（前三个属性的简写），flex-self（指定单个项目的对齐方式）

表格布局

实现方式：（容器属性）display：table
项目属性：display：table-cell（相当于td），display-row（相当于tr）

Grid布局（网格布局）

实现方式：（容器属性）display：grid
- 创建网格方式：grid-template-columns: 100px 100px 100px表示创建三列,每列的宽度是100px
- grid-template-columns: 1fr 1fr 1fr 表示创建三列,每列平均分配
- grid-template-columns: 150px 100px 50px 1fr;表示创建四列,最后一列占全部剩余的位置
- grid-template-rows: 50px 50px表示创建两行,每行的高度是50px
- gap（原本是grid-gap，现在被gap取代）项目之间的间隔
- 以上都是容器属性，下面是项目属性：
- grid-column：第几个 / 总数（简写形式）

圣杯布局

特定：两边固定宽度，中间自适应，不同在于：dom先写中间部分，先加载中间部分
写法：center left right三部分都设置为向左浮动 =》设置center部分宽度为100% =》设置margin-left为负值使得三部分同一行 =》设置父元素的padding-left和padding-right两边留白 =》设置left和right两部分position：relative，让left和right两部分移到两边
代码：

<body>
    <div class="three">      
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
<style>
    .three *{      
        height: 20px;
        float: left;
    }
    .three {
        padding: 0 100px;
    }
    .left{
        width: 100px;
        background-color: blanchedalmond;
        margin-left: -100%;
        position: relative;/* 相对定位--相对于正常位置 */
        left: -100px;
    }
    .right{
        width: 100px;
        background-color: cornflowerblue;
        margin-left: -100px;
        position: relative;
        right: -100px;
    }
    .center{
        width: 100%;
        background-color: darkgoldenrod;
    }
</style>

圣杯布局效果图

圣杯布局缺点：一列高度拉长时，另外两列高度不会自动填充

双飞翼布局

双飞翼布局是对圣杯布局的优化
实现步骤：按照圣杯布局的方法使得left center right 三部分在同一行，在center部分在加一个内层div，设置样式：margin： 0 100px(left right的宽度)
代码

<body>
    <div class="three">      
        <div class="center"><div class="cent">center</div></div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
<style>
    .three *{      
        height: 20px;
        float: left;
    }
    .three {
    }
    .left{
        width: 100px;
        background-color: blanchedalmond;
        margin-left: -100%;
        height: 50px;
    }
    .right{
        width: 100px;
        background-color: cornflowerblue;
        margin-left: -100px;
        height: 40px;
    }
    .center{
        width: 100%;
        background-color: darkorange;
        height: 60px;
    }
    .center .cent{
        margin: 0 100px;
    }
</style>

双飞翼布局效果图

两列自适应布局

flex布局实现
grid实现
float+overflow:hidden
代码：

<body>
    <div class="two">      
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
<style>
    .two{
        overflow: hidden;
    }
    .left{
        float: left;
        width: 100px;
        background-color: darkturquoise;
    }
    .right{
        overflow: hidden;
        background-color: goldenrod;
    }
</style>