CSS布局解决方案

编程语言 2018-12-10 10:31:00 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26941173/article/details/84936043

  • 居中布局

    水平居中

  1. 使用inline-block+text-align

  • 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

  • 用法：对子框设置display:inline-block，对父框设置text-align:center。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            text-align: center;
            height: 400px;
            width: 400px;
            background-color: aquamarine;
        }
        .child{
            display: inline-block;
            height: 200px;
            width: 200px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

    效果：

在这里插入图片描述

  • 优缺点

    1. 优点:兼容性好，甚至可以兼容ie6、ie7
    2. 缺点:child里的文字也会水平居中，可以在.child添加text-align:left;还原

    2.使用table+margin

    • 原理：先将子框设置为块级表格来显示（类似 ），再设置子框居中以达到水平居中。
    • 用法：对子框设置display:table，再设置margin:0 auto。
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .parent{
              height: 400px;
              width: 400px;
              background-color: #1bff2f;
          }
          .child{
              display:table;
              margin:0 auto;
              height: 200px;
              width: 200px;
              background-color: #99522a;
          }
      </style>
  </head>
  <body>
      <div class="parent">
          <div class="child">dome</div>
      </div>
  </body>
  </html>

效果：

在这里插入图片描述

  • 优缺点
    1. 优点：只设置了child，ie8以上都支持
    2. 缺点：不支持ie6、ie7,将div换成table

3.使用absolute+transform

  • 原理：将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
  • 用法：对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            position: relative;
            height: 400px;
            width: 400px;
            background-color: #ff795c;
        }
        .child{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 200px;
            width: 200px;
            background-color: #99337f;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

效果：

扫描二维码关注公众号，回复： 4445492 查看本文章

在这里插入图片描述

  • 优缺点
    1. 优点:居中元素不会对其他的产生影响
    2. 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

4.**使用flex+margin **

  • 原理：通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中以达到居中。
  • 用法：先将父框设置为display:flex，再设置子框margin:0 auto。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            display: flex;
            height: 400px;
            width: 400px;
            background-color: #ffeb4f;
        }
        .child{
            margin: 0 auto;
            height: 200px;
            width: 200px;
            background-color: #5b9994;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

效果：

在这里插入图片描述

  • 优缺点

    缺点：低版本浏览器(ie6 ie7 ie8)不支持

5.**使用flex+justify-content **

  • 原理：通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

  • 用法：先将父框设置为display:flex，再设置justify-content:center。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            display: flex;
            justify-content: center;
            height: 400px;
            width: 400px;
            background-color: #acff2c;
        }
        .child{
            height: 200px;
            width: 200px;
            background-color: #99522a;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

    效果：

在这里插入图片描述

  • 优缺点

    1. 优点:设置parent即可
    2. 缺点:低版本浏览器(ie6 ie7 ie8)不支持

垂直居中

1.**使用table-cell+vertical-align **

  • 原理：通过将父框转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。
  • 用法：先将父框设置为display:table-cell，再设置vertical-align:middle。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            display: table-cell;
            vertical-align: middle;
            height: 400px;
            width: 400px;
            background-color: #e8bf6a;
        }
        .child{
            height: 200px;
            width: 200px;
            background-color: #99522a;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

效果：

在这里插入图片描述

  • 优缺点

    ​ 优点:兼容性较好，ie8以上均支持

2.**使用absolute+transform **

  • 原理：类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
  • 用法：先将父框设置为position:relative，再设置子框position:absolute，top:50%，transform:translateY(-50%)。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            position: relative;
            height: 400px;
            width: 400px;
            background-color: #b3e82e;
        }
        .child{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 200px;
            width: 200px;
            background-color: #ffeb4f;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

效果：

在这里插入图片描述

  • 优缺点
    1. 优点:居中元素不会对其他的产生影响
    2. 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

3.**使用flex+align-items **

  • 原理：通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中
  • 用法：先将父框设置为display:flex，再设置align-items:center。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            display:flex;
            align-items:center;
            width: 400px;
            height: 400px;
            background-color: #ab8de8;
        }
        .child{
            height: 200px;
            width: 200px;
            background-color: #ff6152;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

效果：

在这里插入图片描述

  • 优缺点
    1. 优点:只设置parent
    2. 缺点:兼容性存在一定问题

水平垂直居中

1.**使用absolute+transform **

  • 原理：将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            position:relative;
            width: 400px;
            height: 400px;
            background-color: #629755;
        }
        .child{
            position:absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);
            height: 200px;
            width: 200px;
            background-color: #ab8de8;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

    效果：

在这里插入图片描述

  • 优缺点

    1. 优点:child元素不会对其他元素产生影响
    2. 缺点:兼容性存在一定问题

2.**使用inline-block+text-align+table-cell+vertical-align **

  • 原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，将二者结合起来

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            text-align:center;
            display:table-cell;
            vertical-align:middle;
            width: 400px;
            height: 400px;
            background-color: #979326;
        }
        .child{
            display:inline-block;
            height: 200px;
            width: 200px;
            background-color: #e8bf6a;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

    效果：

在这里插入图片描述

  • 优缺点

    ​ 优点:兼容性较好

3.**使用flex+justify-content+align-items **

  • 原理：通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            display:flex;
            justify-content:center;
            align-items:center;
            width: 400px;
            height: 400px;
            background-color: #ffeb4f;
        }
        .child{
            height: 200px;
            width: 200px;
            background-color: #ff795c;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">dome</div>
    </div>
</body>
</html>

    效果：

在这里插入图片描述

  • 优缺点

    1. 优点:只设置了parent
    2. 缺点:兼容性存在一定问题

  • ## 全屏布局

​ 全屏布局的特点

  • 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域
  • 浏览器变大时，撑满窗口

1.**使用position **

  • 原理：将上下部分固定，中间部分使用定宽+自适应+两块高度一样高。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body, .parent {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        body {
            color: white;
        }

        .top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: blue;
        }

        .left {
            position: absolute;
            left: 0;
            top: 100px;
            bottom: 50px;
            width: 200px;
            background: red;
        }

        .right {
            position: absolute;
            left: 200px;
            top: 100px;
            bottom: 50px;
            right: 0;
            background: pink;
            overflow: auto;
        }

        .right .inner {
            min-height: 1000px;
        }

        .bottom {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 50px;
            background: black;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">
        <div class="inner">right</div>
    </div>
    <div class="bottom">bottom</div>
</div>
</body>
</html>

    效果：

在这里插入图片描述

  • 优缺点

    ​ 优点：兼容性好，ie6下不支持

2.**使用flex **

  • 原理：通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body, .parent {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        body {
            color: white;
        }

        .parent {
            display: flex;
            flex-direction: column;
        }

        .top {
            height: 100px;
            background: #99337f;
        }

        .bottom {
            height: 50px;
            background: #ff6152;
        }

        .middle {
            flex: 1;
            display: flex;
        }

        .left {
            width: 200px;
            background: #5b9994;
        }

        .right {
            flex: 1;
            overflow: auto;
            background: #1bff2f;
        }

        .right .inner {
            min-height: 1000px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="top">top</div>
    <div class="middle">
        <div class="left">left</div>
        <div class="right">
            <div class="inner">right</div>
        </div>
    </div>
    <div class="bottom">bottom</div>
</div>
</body>
</html>

    效果：

    在这里插入图片描述

  • 优缺点

    ​ 缺点： 兼容性差，ie9及ie9以下不兼容

在这里插入图片描述

全屏布局相关方案的兼容性、性能和自适应一览表

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_26941173/article/details/84936043
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022