页面布局类

水平居中问题
- 行内元素的水平居中
  - 　　　　要实现行内元素的水平居中，在父级元素中设置css：适用于文字、链接等

1    #container{
2         text-align: center;
3     }

- 块状元素的水平居中
  - 　　　　将该块状元素的左右外边距设置为auto即可：

1     .center{
2         margin:0 auto;
3     }

- 多块状元素水平居中
  - 将多个块级元素设置为display：inline-block；然后父级元素设置text-align：center；

1     #container{
2         text-align: center;
3     }
4     .center{
5         display: inline-block;
6     }

- - 父级使用flexbox实现子元素多个块状元素的水平居中
    - 　　注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1     #container{
2         display: flex;
　　　　　　display: -webkit-flex;
3         justify-content: center;
4     }

已知宽高元素的水平垂直居中
- 绝对定位与负边距实现，将元素的top和left都设为50%，再利用margin边距，将元素回拉它本身宽高的一半，实现垂直居中。

    #container{
        position: relative;
    }
    .center{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin:-50px 0 0 -50px;
    }

- 　绝对定位与margin，无需知道被垂直居中元素的宽高

 1     #container {
 2         position: relative;
 3     }
 4 
 5     .center {
 6         position: absolute;
 7         top: 0;
 8         right: 0;
 9         bottom: 0;
10         left: 0;
11         margin: auto;
12     }

未知宽高元素的水平垂直居中
- 　　当被居中元素是inline 或者 inline-block元素，将父元素设为display：table-cell；配合text-align 和vertical-aligh使用

1     #container {
2         display: table-cell;
3         text-align: center;
4         vertical-align: middle;
5     }
6 
7     .center {
8 
9     }

- 　　利用CSS3的transform，可以轻松实现未知元素水平垂直居中

 1     #container {
 2         position: relative;
 3     }
 4 
 5     .center {
 6         position: absolute;
 7         top: 50%;
 8         left: 50%;
 9         transform:translate(-50%,-50%);
10     }

- 　　使用flex布局，无需绝对定位，即可实现

 1     #container {
 2         display: flex;
 3         display: -webkit-flex;
 4         justify-content: center;
 5         align-items: center;
 6     }
 7 
 8     .center {
 9         
10     }

假设高度已知，请写出三栏布局，其中左右两栏宽度各为300px；中间自适应
- 　　全局样式如下：

 1   html * {
 2         padding: 0;
 3         margin: 0;
 4     }
 5   .layout {
 6         margin-top: 10px;
 7     }
 8 
 9     .layout article div {
10         min-height: 100px;
11     }

- 　　方法1：浮动：兼容性好，但是浮动后元素脱离文档流要清浮动

 1     <section class="layout float">
 2         <style media="screen">
 3         .layout.float .left {
 4             float: left;
 5             width: 300px;
 6             background: red;
 7         }
 8 
 9         .layout.float .right {
10             float: right;
11             width: 300px;
12             background: green;
13         }
14 
15         .layout.float .center {
16             background: blue;
17         }
18         </style>
19         <article class="left-right-center">
20             <div class="left"></div>
21             <div class="right"></div>
22             <div class="center">
23                 <h1>这是float的方案</h1> 1/这是float的方案 2/这是float的方案
24             </div>
25         </article>
26     </section>

- 方法2：绝对定位，快捷！但是会脱离文档流，后面的布局都要脱离文档流，最好不要用！

 1 <section class="layout absolute">
 2         <style media="screen">
 3         .layout.absolute .left-right-center>div {
 4             position: absolute;
 5         }
 6 
 7         .layout.absolute .left {
 8             left: 0;
 9             width: 300px;
10             background: red;
11         }
12 
13         .layout.absolute .center {
14             left: 300px;
15             right: 300px;
16             background: blue;
17         }
18 
19         .layout.absolute .right {
20             right: 0;
21             width: 300px;
22             background: green;
23         }
24         </style>
25         <article class="left-right-center">
26             <div class="left"></div>
27             <div class="right"></div>
28             <div class="center">
29                 <h1>这是决定定位方案</h1> 1、这是绝对定位方案 2、这是绝对定位方案
30             </div>
31         </article>
32     </section>

- 方法3：flex，CSS3中出现的方法，可以解决浮动和绝对定位的不足。

 1 <section class="layout flexbox">
 2         <style>
 3 
 4         .layout.flexbox .left-right-center {
 5             display: flex;
 6             display:-webkit-flex;
 7         }
 8 
 9         .layout.flexbox .left {
10             width: 300px;
11             background: red;
12         }
13 
14         .layout.flexbox .center {
15             flex: 1;
16             background: blue;
17         }
18 
19         .layout.flexbox .right {
20             width: 300px;
21             background: green;
22         }
23         </style>
24         <article class="left-right-center">
25             <div class="left"></div>
26             <div class="center">
27                 <h1>这是flexBox的方法</h1> 1这是flexBox的方法 2这是flexBox的方法
28             </div>
29             <div class="right"> </div>
30         </article>
31     </section>

- 方法4：table布局，兼容性好，但是存在历史诟病

 1  <section class="layout table">
 2         <style>
 3         .layout.table .left-right-center {
 4             display: table;
 5             width: 100%;
 6             height: 100px;
 7         }
 8 
 9         .layout.table .left-right-center>div {
10             display: table-cell;
11         }
12 
13         .layout.table .left {
14             width: 300px;
15             background: red;
16         }
17 
18         .layout.table .center {
19             background: blue;
20         }
21 
22         .layout.table .right {
23             width: 300px;
24             background: green;
25         }
26         </style>
27         <article class="left-right-center">
28             <div class="left"></div>
29             <div class="center">
30                 <h1>这是table的方法</h1> 1这是table的方法 2这是table的方法
31             </div>
32             <div class="right"> </div>
33         </article>
34     </section>

- 　　方法5：grid，可做复杂的事情，代码量少很多

 1 <section class="layout grid">
 2         <style>
 3         /*1容器声明为网格布局*/
 4         .layout.grid .left-right-center {
 5             display: grid;
 6             width: 100%;
 7             grid-template-rows: 100px;
 8             grid-template-columns: 300px auto 300px;
 9         }
10 
11         .layout.grid .left {
12 
13             background: red;
14         }
15 
16         .layout.grid .center {
17             background: blue;
18         }
19 
20         .layout.grid .right {
21 
22             background: green;
23         }
24         </style>
25         <article class="left-right-center">
26             <div class="left"></div>
27             <div class="center">
28                 <h1>这是grid的方法</h1> 1这是grid的方法 2这是grid的方法
29             </div>
30             <div class="right"> </div>
31         </article>
32     </section>

如果上述高度未知，有哪些能用？
- flex布局和table能用

三栏布局：

　　1、上下高度固定中间自适应

　　2、左右宽度固定中间自适应

两栏布局：

　　1、左宽度固定，右自适应

　　2、右宽度固定，左自适应

　　3、上高度固定，下自适应

　　4、下高度固定，上自适应

猜你喜欢