css布局简单介绍

一，左右布局有一下几种方式：

1，float

2，position

3，flex

4，grid

主要介绍下grid。举一下例子：

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50px 60px;
  grid-auto-rows: 200px; 
}

display: grid;即将wrapper设置为一个网格容器，

grid-template-columns: 50% 50%; 即设置容器包含两个列，且各列宽度为50%。

grid-template-rows: 50px 50px; 即设置容器中第一行高度为50px，第二行高度为60px，未给第三行设置高度。

grid-auto-rows: 200px;  即未指定行高的网格元素都取此值作为高度。

 

二，左中右布局

方法同上

 

三，水平居中

1，块级元素内部的内联元素水平居中：

       在块级元素上设置样式：  text-align: center;

2，块级元素内部的块级元素水平居中：

   需为内部的块级元素设置一个宽度，不然宽度初始为100%，也没必要做居中处理：  如 width: 100px;

   在内部块级元素上设置样式：  margin: 0 auto; 

3，块级元素内部有多个块级元素，且此多个块级元素需水平排列：

    有两种方式：

    1 将内部块级元素设置为：display: inline-block;

       然后设置外部的块级元素为：text-align: center;

    2 直接在外部块级元素上设置样式：display: flex;    
                                                              justify-content: center;

4，块级元素内部有多个块级元素，且此多个块级元素垂直排列：

     需为内部的块级元素设置一个宽度，在他们样式中设置margin: 0 auto; 即可居中。

 

四，垂直居中

1，块级元素内部的内联元素垂直居中：  （前提是父元素有固定高度，它们才需要设置垂直居中）

     1 若文本只有一行： 直接设置块级元素的height和line-height相等即可：   如 height: 100px;     line-height: 100px;

     2 若文本有多行： (<p></p>里面的文字如果是英文，在没有空格的情况下，浏览器会将它们当做是一个词，不会换行显示)

             直接设置块元素样式：  display: flex;      flex-direction: column;       justify-content: center;   即可。

2，块级元素内部的块级元素垂直居中：（两种方法。假设此时对内部块元素的高度是未知的）

    1 设置外部块元素：position: relative;

        内部块元素：position: absolute;           top: 50%;            transform: translateY(-50%);

    2  也可以使用flex:   在外部块元素上设置：  display: flex;      flex-direction: column;       justify-content: center;

 

五，块元素内部的块元素水平和垂直居中

1，  块元素内部的内联元素或块元素垂直居中

        设置包含块元素：  position: relative;  

        设置需要居中的子元素： . position: absolute;     top: 50%;      left: 50%;     transform: translate(-50%, -50%); 

        若已知子元素的高度和宽度，那么可以用margin来代替transform。

2，可以使用flex：

        设置包含块元素：display: flex;          justify-content: center;              align-items: center;