💁CSS常见布局直接拿去用，一套一个准

跌倒的小黄瓜
50 阅读8分钟

水平垂直居中布局

  • 水平居中：给 div 设置一个宽度，然后添加 margin:0 auto 属性

已知宽高元素实现垂直水平居中

div {
  width: 200px;
  height: 100px;
  margin: 0 auto;
  border: 1px solid #000;
}
  • 水平居中，利用 text-align:center 实现

未知宽高元素实现垂直水平居中

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}
.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

font-size 是为了消除空隙

  • 让绝对定位的 div 居中

已知宽高元素的垂直水平居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}
  • 水平垂直居中一

已知宽高元素的垂直水平居中

/*确定容器的宽高宽 500 高 300 的层设置层的外边距 */
div {
  position: absolute; /*绝对定位*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -250px; /*外边距为自身宽高的一半*/
  background-color: pink; /*方便看效果*/
}
  • 水平垂直居中二

未知宽高元素实现垂直水平居中

/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}
  • 水平垂直居中三

未知宽高元素实现垂直水平居中

/*利用 flex 布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}
  • 水平垂直居中四

未知宽高元素实现垂直水平居中

/*利用 text-align:center 和 vertical-align:middle 属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}
.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

回答：

一般常见的几种居中的方法有： 对于宽高固定的元素

（1）我们可以利用 margin:0 auto 来实现元素的水平居中。

（2）利用绝对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再\通过 translate 来调整元素的中心点到页面的中心。

（5）使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

浮动布局

浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样

优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与 inline-block 还是有一些区别的，第一个就是关于横向排序的时候，float 可以设置方向而 inline-block 方向是固定的；还有一个就是 inline-block 在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

清楚浮动的方式

添加额外标签

<div class="parent">
  //添加额外标签并且添加clear属性
  <div style="clear:both"></div>
  //也可以加一个br标签
</div>

父级添加 overflow 属性，或者设置高度

<div class="parent" style="overflow:hidden">
  //auto 也可以 //将父元素的overflow设置为hidden
  <div class="f"></div>
</div>

建立伪类选择器清除浮动（推荐）

/* 在css中添加:after伪元素 */
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>

问题: 两个 display：inline-block 元素放到一起会产生一段空白

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .container {
        width: 800px;
        height: 200px;
      }

      .left {
        font-size: 14px;
        background: red;
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      .right {
        font-size: 14px;
        background: blue;
        display: inline-block;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">
        左
      </div>
      <div class="right">
        右
      </div>
    </div>
  </body>
</html>

效果如下:

image.png

image.png 产生空白的原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据 CSS 中 white-space 属性的处理方式（默认是 normal，合并多余空白），原来 HTML 代码中的回车换行被转成一个空白符，在字体不为 0 的情况下，空白符占据一定宽度，所以 inline-block 的元素之间就出现了空隙。

解决办法:

  1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行
<div class="container">
  <div class="left">
    左
  </div>
  <div class="right">
    右
  </div>
</div>
  1. 父元素中设置 font-size: 0，在子元素上重置正确的 font-size
.container {
  width: 800px;
  height: 200px;
  font-size: 0;
}
  1. 为子元素设置 float:left
.left {
  float: left;
  font-size: 14px;
  background: red;
  display: inline-block;
  width: 100px;
  height: 100px;
}
/* right是同理 */

品字布局

第一种

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>品字布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        overflow: hidden;
      }
      div {
        margin: auto 0;
        width: 100px;
        height: 100px;
        background: red;
        font-size: 40px;
        line-height: 100px;
        color: #fff;
        text-align: center;
      }

      .div1 {
        margin: 100px auto 0;
      }

      .div2 {
        margin-left: 50%;
        background: green;
        float: left;
        transform: translateX(-100%);
      }

      .div3 {
        background: blue;
        float: left;
        transform: translateX(-100%);
      }
    </style>
  </head>

  <body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </body>
</html>

image.png

第二种(全屏版)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>品字布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 100%;
        height: 100px;
        background: red;
        font-size: 40px;
        line-height: 100px;
        color: #fff;
        text-align: center;
      }

      .div1 {
        margin: 0 auto 0;
      }

      .div2 {
        background: green;
        float: left;
        width: 50%;
      }

      .div3 {
        background: blue;
        float: left;
        width: 50%;
      }
    </style>
  </head>

  <body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </body>
</html>

image.png

圣杯布局

image.png

而且要做到左右宽度固定，中间宽度自适应

利用 flex 布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .header,
      .footer {
        height: 40px;
        width: 100%;
        background: red;
      }
      .container {
        display: flex;
      }
      .middle {
        flex: 1;
        background: yellow;
      }
      .left {
        width: 200px;
        background: pink;
      }
      .right {
        background: aqua;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="header">这里是头部</div>
    <div class="container">
      <div class="left">左边</div>
      <div class="middle">中间部分</div>
      <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
  </body>
</html>

float 布局(全部 float:left)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .header,
      .footer {
        height: 40px;
        width: 100%;
        background: red;
      }

      .footer {
        clear: both;
      }

      .container {
        padding-left: 200px;
        padding-right: 250px;
      }

      .container div {
        position: relative;
        float: left;
      }

      .middle {
        width: 100%;
        background: yellow;
      }

      .left {
        width: 200px;
        background: pink;
        margin-left: -100%;
        left: -200px;
      }

      .right {
        width: 250px;
        background: aqua;
        margin-left: -250px;
        left: 250px;
      }
    </style>
  </head>

  <body>
    <div class="header">这里是头部</div>
    <div class="container">
      <div class="middle">中间部分</div>
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
  </body>
</html>

float 布局(左边 float: left, 右边 float: right)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .header,
      .footer {
        height: 40px;
        width: 100%;
        background: red;
      }
      .container {
        overflow: hidden;
      }

      .middle {
        background: yellow;
      }

      .left {
        float: left;
        width: 200px;
        background: pink;
      }

      .right {
        float: right;
        width: 250px;
        background: aqua;
      }
    </style>
  </head>

  <body>
    <div class="header">这里是头部</div>
    <div class="container">
      <div class="left">左边</div>
      <div class="right">右边</div>
      <div class="middle">中间部分</div>
    </div>
    <div class="footer">这里是底部</div>
  </body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .header,
      .footer {
        height: 40px;
        width: 100%;
        background: red;
      }
      .container {
        min-height: 1.2em;
        position: relative;
      }

      .container > div {
        position: absolute;
      }

      .middle {
        left: 200px;
        right: 250px;
        background: yellow;
      }

      .left {
        left: 0;
        width: 200px;
        background: pink;
      }

      .right {
        right: 0;
        width: 250px;
        background: aqua;
      }
    </style>
  </head>

  <body>
    <div class="header">这里是头部</div>
    <div class="container">
      <div class="left">左边</div>
      <div class="right">右边</div>
      <div class="middle">中间部分</div>
    </div>
    <div class="footer">这里是底部</div>
  </body>
</html>

grid 布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
        display: grid;
    }
    #header{
        background: red;
        grid-row:1;
        grid-column:1/5;
    }

    #left{
        grid-row:2;
        grid-column:1/2;
        background: orange;
    }
    #right{
        grid-row:2;
        grid-column:4/5;
        background: cadetblue;
    }
    #middle{
        grid-row:2;
        grid-column:2/4;
        background: rebeccapurple
    }
    #footer{
        background: gold;
        grid-row:3;
        grid-column:1/5;
    }
  </style>
</head>

<body>
    <div id="header">header</div>
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>
    <div id="footer">footer</footer></div>

</body>

</html>

到2019年为止，grid现在绝大多数浏览器已经可以兼容了，可以着手使用了。

双飞翼布局

image.png

有了圣杯布局的铺垫，双飞翼布局也就问题不大啦。这里采用经典的float布局来完成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container {
        min-width: 600px;
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; 
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
  </style>
</head>

<body>
  <article class="container">
    <div class="center">
        <div class="inner">双飞翼布局</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>
</body>

</html>

扫码_搜索联合传播样式-标准色版.png

avatar
文章
阅读
粉丝