常用CSS布局

mozillazg 發(fā)布于2019-08-01 16:41 / 3130人閱讀

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

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.清除父元素的浮動(dòng)

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

方法一、overflow: hidden;

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

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

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

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

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

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

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

主要代碼：

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

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

3.水平三列等寬布局

水平三列等寬布局當(dāng)頁(yè)面寬度變化時(shí)，怎樣一直保持三列始終均勻的居中顯示？
（實(shí)在不知道該怎樣簡(jiǎn)潔的描述“均勻的居中”。。。意思就是左右兩列與頁(yè)面之間的間隙，以及列與列之間的間隙，這四塊間隙一樣寬。）
其實(shí)就是考算術(shù)的。按照設(shè)計(jì)稿樣式計(jì)算3個(gè)列以及4個(gè)空隙的百分比寬度，讓它們相加約等于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;
}

效果就是下圖介樣子：

更多方法參考這篇文章：頁(yè)面架構(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í)設(shè)置top與bottom , left與right，撐開元素的技巧。
2.overflow:auto; 用來在內(nèi)部元素超出時(shí)顯示進(jìn)度條。
這樣在頁(yè)面高度變化，或者內(nèi)部的content高度變化時(shí)，都始終可以保持正常的三行布局。

方法二、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è)置了一個(gè)定寬 width: 500px; 加上本元素交叉軸上的對(duì)齊方式 align-self: center; 的作用。