CSS的几种布局方式

一.左右布局

1.使用float：left，父元素添加clearfix，且左右盒子宽之中不能大于父盒子大小。

2.使用position: absolute;父元素添加 position: relative;

3.使用宽度百分比

---

二.左中右布局

1.左中使用float：left，右使用float:right，父元素添加clearfix，且左中右盒子宽度之和不能大于父盒子大小。

2.使用position: absolute;父元素添加    position: relative;

3.使用宽度百分比

---

三.水平居中

1.内联元素

在块级父元素中水平居中内联元素

例：

<nav><a href="#">ABC</a><nav>

nav {text-aligin:center;}

---

2.块级元素

块级元素设置margin-left与margin-right为atuo(要有固定宽)

例：

<div>ABCD<div>

div{

width:200px;

margin:0 atuo;

}

---

3.大于一个块级元素

当要使两个以上的块级元素居中时可以使用inline-block或flexbox

inline-block：

<div class="main">

    <div class="inline-blcok-center">ABCD</div>

    <div class="inline-blcok-center">ABCD</div>

</div>

main{

text-algin:center

}

.inline-block-center{

display:inline-block;

text-algin:left;

}

---

flex:

<div class="main">

   <div class="flex-center">ABCD</div>

   <div class="flex-center">ABCD</div>

</div>

.flex-center{

display:flex;

justify-content:center;

}

---

四.垂直居中

1.内联元素

1.1单行内联元素

1.1.1使其上下padding相等

例：

<main>

<a href="#">ABCD</a>

<a href="#">ABCD</a>

<a href="#">ABCD</a>

</main>

a {

padding-top:40px;

padding-bottom:40px;

}

---

1.1.2 让line-height与height相等

<div>ABCD<div>

div{

height:100px;

line-height:100px;

}

1.2多行内联元素

使用表格：

<table><tr><td>ABCD</td></tr></table>

<div class="center-table"><p>ABCD</p></div>

table{

border-collapse:separate;

}

.center-table {

display:table;

}

.center-table p{

display:table-cell;

margin:0;

vertical-align:middle;

---

使用flexbox(要有固定高度)

例：

<div class="flex-center">

<p>ABCD</p>

<div>

.flex-center{

display:flex;

fex-direction:column;

justify-content:center;

hegiht:200px;

resize:vertical;

overflow:auto;

}

---

2.块状元素

2.1. 已知高度：

使用相对定位:

例：

.div{

position:relative;

}

.div child {

position:absolute;

top:50%;

height:100px;

margin-top:-50px;

}

---

2.2高度未知

例：

.div{

position:relative;

}.

.child{

position:absolute;

top:50%;

transform:translateY(-50%);

}

---

2.3 使用flexbox

例：

.parent{

display:flex;

flex-direction:column;

justify-content:center;

}

五.水平垂直居中

1.固定宽高

使用负边距等于高/宽的一半，再使用定位

例：

.parent{

position:relative;

}

.child{

width:300px;

height:100px;

padding:20px;

position:absolute;

top:50%;

left:50%;

margin:-70px00-170px;

}

---

2.不知道固定宽高

使用transform，负方向-50%，使其到中心

例：

.parent{

position:relative;

}

.child{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%, -50%);

}

---

六.dispaly：inline-block的bug

span{

display:inline-block;

vertical-align: top;

}