常用CSS布局

mikasa 發(fā)布于2019-08-29 12:24 / 1769人閱讀

摘要：此時，是不好用的，因?yàn)樗荒軕?yīng)用于清除左側(cè)或右側(cè)的浮動。而是傲嬌的小公舉，有她自己的布局規(guī)則內(nèi)部的會在垂直方向，一個接一個地放置。用來在內(nèi)部元素超出時顯示進(jìn)度條。這樣在頁面高度變化，或者內(nèi)部的高度變化時，都始終可以保持正常的三行布局。

1.導(dǎo)航條垂直居中

導(dǎo)航條nav 從左到右分為 nav-left , nav-mid , nav-mid ，怎樣達(dá)到從左到右依次排列，且全部垂直居中的效果呢？
全部設(shè)置 float:left , 這樣之后才可以方便的使 nav-left, nav-right, nav-right 都垂直居中，只需要設(shè)置一次父元素nav的 line-height 等于它的 height 就可以啦~

1.1 ul>li>a 構(gòu)成的導(dǎo)航條內(nèi)部導(dǎo)航水平居中：
ul設(shè)置 text-align:center;
li和a都設(shè)置 display: inline-block;

2.清除父元素的浮動

假設(shè)父元素為 wrap ，未設(shè)置高度，包含三個子元素 left mid right，需要實(shí)現(xiàn)水平三列布局。
首先，對left mid right 三部分應(yīng)用 float: left;并設(shè)置合理的寬度，假設(shè)都為30%
這時由于內(nèi)部元素全部浮動而脫離文檔流，導(dǎo)致父包含塊高度無法被撐開，縮成了一條。下面，需要對父包含塊做清除浮動。
此時，clear:both; 是不好用的，因?yàn)樗荒軕?yīng)用于清除左側(cè)或右側(cè)的浮動。

方法一、overflow: hidden;

我們需要對父元素應(yīng)用overflow: hidden; 來清除浮動。原理是 overflow 的值只要不是默認(rèn)值visible，就觸發(fā)了 BFC。
而 BFC 是傲嬌的小公舉，有她自己的布局規(guī)則：

內(nèi)部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊 每個元素的margin box的左邊，
與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。 BFC的區(qū)域不會與float
box重疊。 BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算

注意最后一條，因?yàn)橛嬎鉈FC高度時，浮動元素也參與計算，所以父元素的高度被撐開。而這也正符合包含塊未設(shè)置高度（height: auto;）時的裁切準(zhǔn)則。因?yàn)榘瑝K高度（height: auto;），所以永遠(yuǎn)不會出現(xiàn)內(nèi)容超出包含塊的情況，因此overflow:hidden應(yīng)用后，需要計算內(nèi)部所有元素高度才能進(jìn)行裁切。

補(bǔ)充下哪些元素會生成BFC：

根元素 
float屬性不為none 
position為absolute或fixed 
display為inline-block,table-cell, table-caption, flex, inline-flex 
overflow不為visible

方法二、clearfix:after{ ... }

clear屬性清除浮動通用方案：.clearfix:after{ ... } 實(shí)際上是添加了一個看不見的元素。

主要代碼：

.clearfix: after {
  content: " ";
  display: block;
  clear: both;
  //用于清除浮動：設(shè)置了clear:both的塊級元素可以清除浮動
  overflow: hidden;
  visibility: hidden;
}

將clearfix這個class添加到浮動元素的父元素上，就清除了因?yàn)樽釉馗涌s成一條的父元素的影響，完整代碼見：
jsfiddle栗子

3.水平三列等寬布局

水平三列等寬布局當(dāng)頁面寬度變化時，怎樣一直保持三列始終均勻的居中顯示？
（實(shí)在不知道該怎樣簡潔的描述“均勻的居中”。。。意思就是左右兩列與頁面之間的間隙，以及列與列之間的間隙，這四塊間隙一樣寬。）
其實(shí)就是考算術(shù)的。按照設(shè)計稿樣式計算3個列以及4個空隙的百分比寬度，讓它們相加約等于100%，比如 26% * 3 + 5% * 4 = 78% + 20% = 98%

//html

    left
    middle
    right

//css
.wrap {
  margin: 0 auto;
  width: 400px;
  background: yellow;
  overflow: hidden;
}
.left, .mid, .right {
  float: left;
  margin-left: 5%;
  width: 26%;
}
.left {
  background: blue;
}
.mid {
  background: pink;
}
.right{
  background: red;
}

效果就是下圖介樣子：

更多方法參考這篇文章：頁面架構(gòu)之等分布局 4.三行自適應(yīng)布局：header（定高） + main（高度自適應(yīng)） + footer（定高） 方法一、position

jsfiddle中的栗子

//html
header

  content

footer

//css
.header {position: absolute;top: 0;left: 0; width: 100%; height: 100px;background-color: pink;}
.footer {position: absolute;bottom:0;left:0; width: 100%;height: 100px;background-color: pink;}

.main {position: absolute; top: 100px;left:0; bottom: 100px;right: 0;overflow: auto;background-color: yellow;}
.content {height: 1000px;}

header 和footer 的css屬性基本一樣。
main的設(shè)置注意兩點(diǎn)：
1.用了同時設(shè)置top與bottom , left與right，撐開元素的技巧。
2.overflow:auto; 用來在內(nèi)部元素超出時顯示進(jìn)度條。
這樣在頁面高度變化，或者內(nèi)部的content高度變化時，都始終可以保持正常的三行布局。

方法二、flex （三行高度自適應(yīng) + 兩列寬度自適應(yīng)）

可以直接看 jsfiddle栗子

主要代碼：

//html
header

  side
  main

footer

//css
body { display: flex; flex-flow: column;}
.heater, footer { height: 100px; }
div.body { flex: 1; display: flex; width: 500px; align-self: center; }
//div.body 既做三行flex布局的item，也是兩列flex布局的container
.side { width: 200px; }
.main { flex: 1; } // 其實(shí)是flex-grow: 1; 占滿剩余寬度的1/n，而這里的n就是1

可以看到我們的div.body還是水平居中的，其實(shí)是我們給.body設(shè)置了一個定寬 width: 500px; 加上本元素交叉軸上的對齊方式 align-self: center; 的作用。