css常见布局方式

标签：ble   color   middle   tom   hid   enter   header   cal   tpi   

　　布局是CSS中一个重要部分，下面总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的盒模型布局和比较新的flex布局实现）。

　　一、居中方式　　

水平居中

水平居中对于子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案是不同。 

行内元素：对父元素设置text-align:center;
定宽块状元素: 设置左右margin值为auto;
不定宽块状元素: 设置子元素为display:inline,然后在父元素上设置text-align:center;
通用方案: flex布局，对父元素设置display:flex;justify-content:center;

垂直居中

垂直居中对于子元素是单行内联文本、多行内联文本以及块状元素采用的方案也是不同的。

父元素一定，子元素为单行内联文本：设置父元素的height等于行高line-height
父元素一定，子元素为多行内联文本：设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;
块状元素:设置子元素position:absolute并设置top、bottom为0，父元素要设置定位为static以外的值，margin:auto;

通用方案: flex布局，给父元素设置{display:flex; align-items:center;}。

二、单列布局　

特征：定宽、水平居中

常见的单列布局有两种：

·        一种是header、content、footer宽度都相同，其一般不会占满浏览器的最宽宽度，但当浏览器宽度缩小低于其最大宽度时，宽度会自适应。

·        一种是header、footer宽度为浏览器宽度，但content以及header和footer里的内容却不会占满浏览器宽度。

对于第一种，对header、content、footer统一设置width或max-width，并通过margin:auto实现居中。

三、实现多列布局的几种方式

实现多列布局的方式有：

1. 使用BFC隐藏属性
2. float + margin
3. absolute + margin
4. 圣杯布局
5. 双飞翼布局
6. flex布局

　　下面所举例子（以三栏布局为例）的DOM文档内容如下：

    <!-- 三栏布局 -->
    <!-- 这里要注意DOM的书写顺序问题。 -->
    <aside class="aside1"></aside>
    <aside class="aside2"></aside>
    <article class="main"></article>

　　1、使用BFC隐藏属性

　　　　在对需要自适应的元素BFC化，可以实现两列或三列布局

　　三列布局方式示例如下：

         /*固定宽度*/
        .aside1 {
          float: left;
　　　　　　/*给浮动元素设置margin-right使两栏之间有间隙*/
          margin-right: 10px;
          width: 100px;
          height: 100vh;
          background-color: lightsalmon;
        }
         /*固定宽度*/
        .aside2 {
          float: right;
          margin-left: 10px;
          width: 100px;
          height: 100vh;
          background-color: lightsalmon;
        }
         /*BFC化自适应宽度*/
        .main {
          overflow: hidden;
          height: 100vh;
          background-color: lightpink;
        }

　　使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题。如果将aside2与article交换位置，那么aside2元素会被挤到article元素之下，无法实现三栏自适应布局。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

　　2、float + margin

       在自适应宽度的元素上设置margin值，margin的值大于或等于固定宽度的值即可。实现思路与使用BFC隐藏属性差不多。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

CSS样式：

    .aside1 {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

.main {
  margin-left: 110px;
  margin-right: 110px;
  height: 100vh;
  background-color: lightpink;
}

.aside2 {
  float: right;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

3、absolute + margin

使用position: absolute时，DOM元素顺序并不重要。给左右两栏定宽，主内容自适应宽度。缺点：侧边栏元素脱离文档流。优点：article元素可先加载。

CSS样式：

.aside1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.aside2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  margin: 0 110px;
  height: 100vh;
  background-color: lightpink;
}

4、圣杯布局

　　圣杯布局叫float + 负margin + relative更容易理解一些，它的实现思路如下：

1. 两栏和自适应元素都设置同一方向的浮动(如float: left)
2. 父元素设置左右padding为左右边栏的宽度。
3. 自适应元素设置宽度为100%
4. 左边栏margin-left为负100%，再设置relative，最后通过left属性偏移负的自身宽度。
5. 右边栏margin-left为负自身宽度，再设置relative，最后通过right属性偏移负的自身宽度。

　　而且，该布局方式与其他布局方式有一个明显的不同：它需要有一个父元素。缺点：宽度小于两栏宽度时，元素会因为宽度不足而掉下去。

　　5、双飞翼布局　

双飞翼布局与圣杯布局相似。只不过少了relative与left, right的步骤和共同父元素，主内容元素多了层父元素。实现思路如下：

1. 1. 两栏和自适应元素都设置同一方向的浮动(如float: left)
   2. main元素设置左右margin值，值为左右两栏的宽度。main父元素设置宽度为100%
   3. 左边栏margin-left为负100%
   4. 右边栏margin-left为负自身宽度

　　6、flex布局

flex布局还可以称之为弹性布局，它可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。

弹性布局的使用方式如下：

① 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式；

② 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；

③ display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

④ 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

　　虽然 在需要缩放，对齐和重新排序元素的情况下使用flex布局非常方便，但以下情况应该尽量避免使用 Flex 布局：

　　1、整体页面布局

　　2、完全支持旧浏览器的网站

css常见布局方式

标签：ble   color   middle   tom   hid   enter   header   cal   tpi   

原文地址：https://www.cnblogs.com/web12/p/9936500.html