css之布局

布局一直是页面制作很重要的部分，有个良好的布局不仅在页面上呈现很好的效果，还对后续功能扩展有重要的作用。本文主要讨论一下几种布局：

水平居中布局

垂直居中布局

多列布局

自适应布局

stracky-footer布局

九宫格布局

水平居中布局

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式。

（1）文字水平居中 text-align: center

       设置容器盒子text-align: center;

（2）文本/盒子水平居中 table

       display:table; margin:0 auto;

（3）盒子水平居中 margin

       子容器定宽+margin: 0 auto;

（4）绝对定位   

 position: absolute;
 left: 50%;
 transform: translate(-50%);

（5） flex+justify-content

 display: flex;
 justify-content: center;

        

（6）父flex + 子margin: 0 auto;

垂直居中布局

（1）单行文字垂直居中

设置容器盒子 text-align: center; line-height: 容器的高度

（2）文本+盒子在父容器中垂直居中 table

父容器：

display: table-cell;
vertical-align: middle;

（3）display:inline-block;+vertical-align:middle;+line-height

在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

注意：只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。

（4）绝对定位

子容器：

position: relative;
top: 50%;
transform: translate(0,-50%);
background-color: red;

（5）flex布局

.parent{display: flex;
        align-items: center;}
.child{background-color: blue;}

多列布局

（1） 左侧等宽，右侧自适应。

适用于定宽的一侧常为导航，自适应的一侧为内容的布局

  float+margin

左： 200px; float: left;

右： 100%; margin-left: 200px;

 float + overflow

左： 200px; float: left;

右：overflow: hidden;

 flex

右：flex: 1;

table

父：display:table;table-layout:fixed;100%;

左，右： display:table-cell

（2）      两列定宽，一列自适应

l  float+margin

左，中间： 200px; float: left;

右：margin-left: 左宽+右宽;

l  float + overflow

    左，中间： 200px; float: left;

右：overflow: hidden;

l  flex

    右：flex: 1;

l  table

父：display:table; table-layout:fixed; 100%;

子：display: table-cell;

 

（3）      两侧定宽，中间自适应

l  float + margin负值

左、中、右左浮，

中间需要wrapper，内部margin-left:左宽;margin-right:右宽;

左，margin-right: -100%;

右，margin-left: -右宽;

center-wrapper{
     width: 100%;   
     float: left;
    }
 . center{
    margin: 0 200px;  }
  .left,. right{
         width: 200px;
         float: left;
    }
  .eight-left{
         margin-right: -100%;
     }
 .eight-right{
         margin-left: -200px;
     }

l  flex

中间: flex: 1;

 

（4）      一列不定宽，一列自适应

l  flex

自适应部分：flex:1

l  float+overflow

左： float: left

右：over

 

（5）      多列等宽布局

l  flex

父：display: flex

子： flex:1

 

自适应布局

meta标签的实用

设置布局宽度等于设备宽度，布局viewport等于度量viewport

<meta name="viewport" content="width=device-width,initial-scale=1">

媒体查询

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体,

而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性,

扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,

媒体查询中可用于检测的媒体特性有width、height和color（等）, 使用媒体查询, 可以在不改变页面内容的情况下,

为特定的一些输出设备定制显示效果。

语法

@media screen and (max-960px){....}

<link rel="stylesheet" media="screen and (max-960px)" href='xxx.css' />

stracky-footer布局

（1） padding-bottom+margin负值

内容盒子padding-bottom:footer高

Footer组件margin:-footer高  auto ;

.content-wrapper{
           width: 100%;
           height: 400px;
           padding-bottom: 50px;
           background-color: #f4e6e8;
     }
 .content{
         background-color: pink;
         width: 100%;
         height:35%;
     }
 .footer{
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #c0f9ff;
        margin:-50px auto ;
        text-align: center;
        line-height: 50px;
       }

（2）

l  flex

.wrapper{
      display: flex;
       flex-flow: column;
                 }
.content-wrapper{
        flex: 1;
                }
.footer{
         width: 50px;
         height: 50px;
         border-radius: 25px;
         background-color: #c0f9ff;
         margin: 0 auto;
         text-align: center;
         line-height: 50px;
        }

九宫格布局

（1）  flex

.flex-parent{display: flex;flex-direction: column;  }
.flex-row{ display: flex;height: 33.3%;}
.flex-row > .item{flex: 1;}

（2） table

.table-parent{ display: table; table-layout: fixed;    }
.table-row{display: table-row;}
.table-row > .item{display: table-cell; }