【CSS】布局

于 2021-04-19 16:06:00 发布
阅读量97 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44314839/article/details/115862045
版权

https://juejin.cn/post/6844903510933258247
https://juejin.cn/post/6844904121862979597#heading-22
https://juejin.cn/post/6844903510933258247

一、水平居中

  1. 子元素绝对定位+top+transform/margin-left

父元素：relative、absolute、fixed都可以，但不能是``static。如果没有经过定位的父元素，则是相对于body。

  • tansform是CSS3属性，有兼容性问题。
  • margin-left需要知道子元素宽度。
<style>
    .wrap {
        position: relative;
        width: 100%;//定宽
        height: 200px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;//定宽
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
  1. 子元素设置为行内元素（inline-block）+text-align
    注意：text-align具有继承性
    此方法可以将多个子元素进行水平居中
<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
        text-align: center;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
  1. 子元素设置为块级元素（block、table）+margin
  • 必须定宽！
  • 子元素如果脱离文档流，会使得margin无效
<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: table;
        margin: 0 auto;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
  1. flex：justify-content

二、垂直居中

  1. 绝对定位+left+transfrom
  2. 父元素设置为table-cell+vertical-align
    table-cell内部元素具有类似文本元素的属性
    vertical-align具有继承性
<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
  1. line-height=height
    只适用于行内元素
    只适用于单行内容
    若想要用于多行，需要设置文字高度为总高度除以行数
#parent{
    height: 150px;
    line-height: 150px;  /*与height等值*/
}
  1. 设置padding
  2. flex：align-items/align-content

三、水平垂直居中

四、两列布局

1、左列定宽，右列自适应
  1. 绝对定位实现
#parent{
    position: relative;  /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f00;
    width: 100px;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    left: 100px;  /*值大于等于#left的宽度*/
    right: 0;
    background-color: #0f0;
    height: 500px;
}

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>
</body>
  1. 左边元素浮动，定宽，右边元素设置margin-left
<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        margin-left: 400px;
    }
</style>
<body>
    <div class="l">定宽</div>
    <div class="r">自适应</div>
</body>
  1. 左边元素浮动，定宽，右边元素设置overflow:hidden
    右边元素由于设置overflow:hidden开启BFC，与外界隔离，所以能实现效果
    浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷
<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定宽</div>
    <div class="r">自适应</div>
</body>
  1. 将左右元素用一个display:table的元素包裹，左右元素设置为display: table-cell
    margin失效；设置间隔比较麻烦；不支持ie8-
<style>
    .w {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .l, .r {
        display: table-cell;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .r {
        background-color: blueviolet;
    }
</style>
<body>
    <div class="w">
        <div class="l">定宽</div>
        <div class="r">自适应</div>
    </div>
</body>
  1. flex布局
 <style>
     .p {
         display: flex;
         height: 600px;
     }
     .l {
        background-color: aqua;
        width: 400px;
     }
     .r {
         flex: 1;
         background-color: blueviolet;
     }
 </style>
 <body>
     <div class="p">
         <div class="l">定宽</div>
         <div class="r">自适应</div>
     </div>
 </body>
2、左列自适应，右列定宽
  1. 使用绝对定位实现
#parent{
    position: relative;  /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;  /*大于等于#rigth的宽度*/
    background-color: #f00;
    height: 500px;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #0f0;
    width: 100px;
    height: 500px;
}

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>
  1. 右边元素浮动，定宽，左边元素设置margin-right

 #parent {
   height: 500px;
 }
 #left {
   width: 100%;
   height: 500px;
   margin-right: 100px;
   background-color: #f00;
 }
 #right {
   height: 500px;
   width: 100px;
   float: right;
   background-color: #0f0;
 }



<body>
  <div id="parent">
    <div id="right">右列定宽</div>
    <div id="left">左列自适应</div>
  </div>
</body>

#parent{
    height: 500px;
    padding-left: 100px;  /*抵消#left的margin-left以达到#parent水平居中*/
}
#left {
    width: 100%;
    height: 500px;
    float: left;
    margin-left: -100px; /*正值等于#right的宽度*/
    background-color: #f00;
}
#right {
    height: 500px;
    width: 100px;
    float: right;
    background-color: #0f0;
}

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>
  1. 右边元素浮动，定宽，左边元素设置overflow:hidden
#left {
    overflow: hidden;  /*触发bfc*/
    height: 500px;
    background-color: #f00;
}
#right {
    margin-left: 10px;  /*margin需要定义在#right中*/
    float: right;
    width: 100px;
    height: 500px;
    background-color: #0f0;
}


<body>
<div id="parent">
    <div id="right">右列定宽</div>
    <div id="left">左列自适应</div>   <!--顺序要换一下-->
</div>
</body>
  1. 将左右元素用一个display:table的元素包裹，左右元素设置为display: table-cell
#parent{
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    background-color: #f00;
    display: table-cell;
}
#right {
    width: 100px;
    background-color: #0f0;
    display: table-cell;
}



<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>
  1. 使用flex实现
#parent{
    height: 500px;
    display: flex;
}
#left {
    flex: 1;
    background-color: #f00;
}
#right {
    width: 100px;
    background-color: #0f0;
}

<body>
<div id="parent">
    <div id="left">左列自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>
3、左列不定，右列自适应

把左列的宽度设置删掉即可。

五、三列布局

1、普通三列布局

方法与两列布局相同

2、中间固定宽度，两边自适应
  1. 绝对定位实现

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>


#parent {
    position: relative; /*子绝父相*/
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: #f00;
}
#center {
    height: 500px;
    margin-left: 100px; /*大于等于#left的宽度,或者给#parent添加同样大小的padding-left*/
    margin-right: 200px;  /*大于等于#right的宽度,或者给#parent添加同样大小的padding-right*/
    background-color: #eeff2b;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color: #0f0;
}
  1. 左边右边元素浮动，定宽，中间元素设置margin-left、 margin-right
    注意：这种方式，需要在书写html结构时，将右侧元素写在中间元素的前面，因为如果右侧元素在中间元素后面，由于浮动元素位置上不能高于（或平级）前面的非浮动元素，导致右侧元素会下沉。但是，中间元素一般都是页面的核心部分，放在比较后面的位置，不利于SEO。
<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
        float: right;
    }
</style>
<body>
    <div class="l">定宽</div>
    <div class="r">定宽</div>
    <div class="c">自适应</div>
</body>
  1. 左边右边元素浮动，定宽，中间元素设置overflow: hidden
<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        background-color: blueviolet;
        overflow: hidden;
    }
    .r {
        width: 400px;
        background-color: brown;
        float: right;
    }
</style>
<body>
    <div class="l">定宽</div>
    <div class="r">定宽</div>
    <div class="c">自适应</div>
</body>
  1. 将左右元素用一个display:table的元素包裹，左右元素设置为display: table-cell

margin失效，采用border-spacing表格两边的间隔无法消除；不支持ie8-


<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>


#parent {
    width: 100%;
    height: 500px;
    display: table;
}
#left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
}
#center {
    display: table-cell;
    background-color: #eeff2b;
}
#right {
    display: table-cell;
    width: 200px;
    background-color: #0f0;
}
  1. flex布局

<body>
<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右列定宽</div>
</div>
</body>


#parent {
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: #f00;
}
#center {
    flex: 1;  /*均分#parent剩余的部分*/
    background-color: #eeff2b;
}
#right {
    width: 200px;
    background-color: #0f0;
}
3、圣杯布局

这种方法将中间元素放置在最前面，有利于SEO。

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下为简码，仅保留关键部分 */
header,footer {height: 50px;}
.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
</style>

使用了 relative 相对定位、float（需要请浮动，此处使用 overflow:hidden; 方法）和 负值 margin ，将 left 和 right 部分「安装」到 wrapper 的两侧，顾名「圣杯」。

正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无限变窄，「圣杯」将会「破碎」掉。如图，当 main 部分的宽小于 left 部分时就会发生布局混乱。在这里插入图片描述

4、双飞翼布局

这种方法将中间元素放置在最前面，有利于SEO。

<template>
<header>header</header>
<section class="wrapper">
    <section class="col main">
        <section class="main-wrap">main</section>
    </section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>

<style>
/* 以下为简码，仅保留关键部分 */
header,footer {height: 50px;}
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
</style>

同样使用了 float 和 负值 margin,不同的是，并没有使用 relative 相对定位 而是增加了 dom 结构，增加了一个层级。确实解决了圣杯布局的缺陷。
在这里插入图片描述

无敌小君君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
第五章.浮动重难点详解
liuzizhoufaith的博客
04-01 135
通过浮动,可以使一个元素向其父元素的左侧或右侧移动 通过float属性来设置元素的浮动(只能在父元素内部浮动)
css布局
04-22
NULL 博文链接：https://ruanqiangbeyond201208043532.iteye.com/blog/1946903
css布局样例源代码
11-04
结合CSS和HTML设计并布局了简单的网页，适合初学者参考。（有logo，横向导航栏，图片加文字的布局。给图片设置纯色遮罩层，并在遮罩层上显示字母或者按钮等。）
Bootstrap CSS布局之图像
08-31
主要介为大家详细绍了Bootstrap CSS布局之图像的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap CSS布局之表格
08-31
主要为大家详细介绍了Bootstrap CSS布局之表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在树莓派4B上，在ubuntu20.04中设置包含ros节点的文件自启动
06-16
在树莓派4B上，在ubuntu20.04中设置包含ros节点的文件自启动
TLBB服务端综合工具
06-16
潇湘综合工具
数据库管理工具:dbeaver-ce-23.0.1-linux.gtk.aarch64-nojdk.tar.gz
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
基于Boson的计算机网络实验：RIP和IGRP的配置
06-16
基于Boson的计算机网络实验：RIP和IGRP的配置
数据分析方法课后习题答案及习题答案 各章例题之SAS程序.zip
06-16
数据分析方法课后习题答案及习题答案 各章例题之SAS程序
动物管理系统，技术栈-Java 作为编程语言 -Swing用于图形用户界面
06-16
动物管理系统，技术栈-Java 作为编程语言 -Swing用于图形用户界面
深度学习花卉识别五分类
最新发布
06-16
深度学习案例
个人电脑信息管理软件exe和数据库
06-16
个人电脑信息管理，输入数据，输入文档名称、位置等，增删改查，自己处理；电脑东西很多的话可以使用；一个可执行文件和一个数据库文件；如果报错不能运行则需要安装Acess数据库引擎；可以录入文档名，可执行文件名，文件夹和子文件夹名；按类别、格式、名称、位置等查询； 整理你的电脑和U盘吧；
数据库管理工具:dbeaver-ce-23.0.1-macos-aarch64.dmg
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
无人车的关键技术、行业发展趋势、以及基本代码
06-16
无人车
delphi 12 控件之DISQLite3 v5.48.3 for Delphi 11-12 Athens + CRACK.7
06-16
DISQLite3 v5.48.3 for Delphi 11-12 Athens + CRACK.7z
数据库表结构同步工具.zip
06-16
大学生数据结构学习笔记和资料大全！
VB+ACCESS电话语音应答系统设计(源代码+系统).zip
06-16
VB+ACCESS电话语音应答系统设计(源代码+系统)
html css布局
08-25
HTML和CSS布局是用来定义和排列网页元素的方式。根据引用，HTML和CSS布局方式可以分为以下几种：浮动布局、定位布局、flex布局、table-cell表格布局、网格布局。 浮动布局是通过设置元素的浮动属性来实现元素的排列...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值