CSS布局

2019-05-28 本文已影响0人阿南_3705

左右布局

假如有以下的情况（示例），可以使用浮动来达成左右布局的目的。
HTML如下：

  <body>
    <div class="father clearfix">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>

CSS可以这么写：

    <style type="text/css">
      .clearfix:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: "";
        clear: both;
        height: 0;
      }
      .father{
        width: 600px;
        height: 600px;
        color: black;
      }
      .left{
        width: 200px;
        height: 200px;
        color: yellow;
        float: left;
      }
      .right{
        width: 200px;
        height: 200px;
        color: red;
        float: left;
        margin-left: 100px;
      }
    </style>

清除浮动可以使用clearfix类。

左中右布局

和左右布局类似，左中右布局也可以通过浮动以及微调几个块之间的间距来实现。
HTML如下：

  <body>
    <div class="father clearfix">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </body>

CSS如下：

    <style type="text/css">
      .clearfix:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: "";
        clear: both;
        height: 0;
      }
      .father{
        width: 600px;
        height: 600px;
        color: black;
      }
      .left{
        width: 150px;
        height: 200px;
        color: yellow;
        float: left;
      }
      .middle{
        width: 150px;
        height: 200px;
        color: red;
        float: left;
        margin-left: 50px;
      }
      .right{
        width: 150px;
        height: 200px;
        color: red;
        float: left;
        margin-left: 50px;
      }
    </style>

水平居中

水平居中有很多种方法，下面可以列举其中几种。

通过margin: 0 auto; text-align: center实现CSS水平居中。

下为例子：

<body>
    <div class="out">
        <div class="inner"></div>
    </div>
</body>

注意：这种方法父元素必须指定高度和宽度！

<style>
    .out{
        height: 200px;
        width: 200px;
        color: black;
      }
      .inner{
        height: 200px;
        width: 200px;
        color: black;
        margin: 0 auto;
        text-align: center;
    }
</style>

通过display:inline-block和text-align:center实现CSS水平居中。

<body>
    <div class="out">
        <div class="inner"></div>
    </div>
</body>

<style>
    .out{
        height: 200px;
        width: 200px;
        color: black;
        display: inline-block;
      }
      .inner{
        height: 200px;
        width: 200px;
        color: black;
        margin: 0 auto;
        text-align: center;
    }
</style>

通过display:flex实现CSS水平居中。

父元素加上display:flex;flex-direction:column
而子元素align-self:center;

<body>
    <div class="out">
        <div class="inner"></div>
    </div>
</body>

<style>
    .out{
        height: 200px;
        width: 200px;
        color: black;
        display: flex;
        flex-direction: column
      }
      .inner{
        height: 200px;
        width: 200px;
        color: black;
       align-self: center;
    }
</style>

这些是我所想到的方法。更多的可以参考CSS水平居中的9种方法

垂直居中

可参考一下链接CSS垂直居中的8种方法

其他小技巧

1.块级元素的高度由其内部文档流元素的高度的总和决定
2.文档流：文档内元素的流动方向
a.内联元素inline：从左往右流动，若遇到阻碍（宽度不够）则换行继续从左往右
word-break：break-all/break-world
文字分割，break-all是所有字符可以换行，break-world是每个单词才能分开
b.块级元素block：每一个块都占一行，从上往下流动
display：inline-block将块级元素变成行内元素
3.内联元素的高度：
玄学
font-size比line-height小时，字体自动居中；但字体比line-height大时，内联元素但高度不可预测
xscope
4.position：fixed 固定在屏幕上，跳出流，元素聚拢
5.绝对定位，脱离流
子元素position：abusolute
父元素position：relative
6.display：inline-block的外边距不合并