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取值的区别