css布局知识

1.常用居中方法

• 水平居中

  文本和链接就直接在块级父元素上加text-align: center;。

  只有一个块级元素就需要设置宽度并设置左右外边距为auto，margin: 0 auto; 还需要width。

  多个块元素居中

  • 就需要设置包裹多个块元素的父元素text-align: center; 然后设置其中每个块元素为display: inline-block;。
  • 还可以设置包裹多个块元素的父元素display: flex; justify-content: center;。
  • 如果是多个块元素垂直排列的话，就利用margin: 0 auto;。

• 垂直居中

  单行的内联元素或者文本、链接就使用padding-top和padding-bottom 设置为同样的值，或者使用line-height的值和height值设置为相同。

  多行的内联元素或者文本、链接垂直居中

  • 用表格table 元素来放置内容，因为表格的单元格都是垂直居中的。
  • 还可以设置父元素display: table; 需要垂直居中的子元素 display: table-cell; vertical-align: middle;。
  • 还可以用flex布局方法，即设置父元素 display: flex; justify-content: center; flex-direction: column; （设置为flex盒子，排列方向为垂直排列，内容对齐是居中对齐）。
  • 还可以为父元素添加一个::before伪元素

      .center::before {
  	    content: "";
  	    display: inline-block;
  	    width: 1%;
  	    height: 100%;
  	    vertical-align: middle;
      }
  

   然后子元素设置` display: inline-block; vertical-align: middle; `。
  

  块级元素，利用绝对定位，子绝(absolute)父相(relative)，下面展示默认设置了父元素position: relative;。

  • 有高度的话直接设置子元素position: absolute; top: 50%;。margin-top： 的值设置为自身高度的一半。
  • 不知道高度的也设置子元素position: absolute; top: 50%;。利用css3的 transform: translateY(-50%);。
  • 使用flex，直接设置父元素 display: flex; flex-direction: column; justify-content: center;

• 水平垂直居中

  元素宽高已知，设置父元素 position: relative;,然后子元素设置 position: absolute; top: 50%; left: 50%; ， 然后设置margin-left的值为负宽度长，margin-top 的值为负的高度值。

  元素宽高未知，设置父元素 position: relative;,然后子元素设置 position: absolute; top: 50%; left: 50%; ，设置 transform: translate(-50%, -50%);。

  利用flex，设置父元素 display: flex; justify-content: center; align-items: center;。

  用gird，设置父元素 display: grid; , 需要水平垂直居中的元素设置 margin: auto; 。

2.常用布局方法

1. 圣杯布局实现

   <div class="container">
   	<div class="main"></div>
   	<div class="aside"></div>
   	<div class="extra"></div>	
   </div>	
   

   先设置main，aside，extra都左浮动，
   设置main的width: 100%; 占据一行，设置
   使用负边距

   • .aside { margin-left: -100%; } ，将aside移到main这一行最左边，margin使用百分比是相对于包含块的宽度。所以-100%刚好移动一整行。
   • .extra { margin-left: -200px; } ，设置移动宽度为自身宽度时，extra块也上升到和main，aside，extra一整行。
   • 此时再设置父盒子的padding值来给aside块和extra块留位置。
   • 对于aside，extra盒子使用 position: relative; 配合left 和 right 值的相对布局来占据父盒子padding。

2. 双飞翼布局实现

   <div class="main-wrap">
   	<div class="main"></div>	
   </div>	
   <div class="aside"></div>
   <div class="extra"></div>
   

   设置main-wrap和aside、extra都左浮动。
   设置main-wrap的宽度为100%，并设置aside和extra的宽度。
   .aside { margin-left: -100%; } ， extra设置为父的自身宽度。
   再设置main的左右margin给aside和extra腾出空间。

3. flex布局

   flex布局也就是弹性布局，它有容器（display: flex）和项目。有默认的水平主轴和垂直的交叉轴。
   容器有6个属性

   
   // 项目的排列方向
   flex-direction: row | row-reverse | column | column-reverse;
   // 项目的换行方式
   flex-wrap: wrap | nowrap | wrap-reverse;
   // 默认为 flex-flow: row nowrap;
   flex-flow: 上面两个的组合
   //  项目在主轴上的对齐方式
   justify-content: flex-start | flex-end | center | space-between | space-around;
   // 项目在交叉轴上的对齐方式
   align-items: flex-start | flex-end | center | stretch | baseline;
   // 定义了多根轴线的对齐方式，只有一根轴线该属性无效
   align-content:	flex-start | flex-end | center | space-between | space-around | stretch;
   

   项目也有6个属性

   order: 1; //  值为一个整数，越小排列越靠前。
   flex-grow:  0; // 值为一个数字，定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
   flex-shrink: 1; // 值为一个数字，定义项目缩小比例，默认为1，即如果空间不足，该项目将缩小。
   flex-basis: auto;// 默认为auto，分配多余空间之前，获取项目占据的主轴空间，根据这个值计算主轴是否有多余空间。
   flex: auto (1 1 auto) | none(0 0 auto); // flex-grow, flex-shrink 和 flex-basis的简写
   align-self: auto | flex-start | flex-end | center | baseline | stretch;// 允许单个项目和其它项目不同的对齐方式，可覆盖align-items属性
   

   项目的flex属性有很多种取值方式

   • 单值语法
     • 一个无单位数：会被当成flex-grow 的值。
       例如： flex: 1 表示 flex: 1 1 0%;。
     • 一个有效的宽度： 会被当成 flex-basis 的值。
       例如： flex: 30px; 表示 flex: 1 1 30px;。
   • 双值语法
     第一个值必须为无单位数，它会被当成flex-grow 的值，第二个数必须为以下之一：
     • 一个无单位数： 会被当成 flex-shrink 的值，剩余一个值默认。
       例如： flex: 2 2 表示 flex: 2 2 0%;。
     • 一个有效的宽度值： 会被当成 flex-basis 的值，剩余一个值默认。
       例如： flex: 1 30px 表示 flex: 1 1 0%;。
   • 三值语法
     • 第一个值必须为无单位数： 会被当成flex-grow 的值。
     • 第二个值必须是无单位数：会被当成 flex-shrink 的值。
     • 第三个值必须是有效的宽度值： 会被当成 flex-basis 的值。
   • 关键字
     • none, 代表flex: 0 0 auto;。
     • auto, 代表flex: 1 1 auto;。
     • initial， 代表 flex: 0 1 auto;。
   • 参考图(来自Beau)

   

4. 左列定宽，右列自适应

   float+overflow实现

   .left { float: left; width: 200px; }
   // 触发BFC
   .right { overflow: hidden; }
   
   

   flex实现

   .parent { display: flex; }
   .left { width: 200px; }
   .right { flex: 1; }
   
   

   两列等高 .left,.right{padding-bottom:9999px;margin-bottom:-9999px;}。

5. 右列定宽，左列自适应

   float+margin实现（利用左边一列margin-left为负的右边元素宽度，让其显示出来）

   
   .left { float: left; width: 100%; height: 200px; margin-left: -200px; background-color: red; }
   .right { float: right; width: 200px; height: 200px; background-color: green; }
   
   

   flex实现

   .parent { display: flex; }
   .left { flex: 1; }
   .right { width: 200px; }
   
   

6. 两列定宽，一列自适应

   float+margin实现

   .left, .center { float: left; width: 200px; }
   .right { width: 100%; height: 200px; margin-left: 400px; }
   

   float+overflow实现

   .left, .center { float: left; width: 200px; }
   .right { height: 200px; overflow: hidden; }
   

   flex实现

   .parent { display: flex; }
   .left, .center { width: 200px; height: 200px; }
   .right { flex: 1; }
   

参考

Centering in CSS: A Complete Guide
CSS 布局经典问题初步整理
CSS 布局十八般武艺都在这里了
Flex 布局教程：语法篇
史上最全Html和CSS布局技巧
flex
flex属性详解
伸缩布局flex取值的区别