常用CSS布局

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

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

1.導航條垂直居中

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

1.1 ul>li>a 構成的導航條內部導航水平居中：
ul設置 text-align:center;
li和a都設置 display: inline-block;

2.清除父元素的浮動

假設父元素為 wrap ，未設置高度，包含三個子元素 left mid right，需要實現水平三列布局。
首先，對left mid right 三部分應用 float: left;并設置合理的寬度，假設都為30%
這時由于內部元素全部浮動而脫離文檔流，導致父包含塊高度無法被撐開，縮成了一條。下面，需要對父包含塊做清除浮動。
此時，clear:both; 是不好用的，因為它只能應用于清除左側或右側的浮動。

方法一、overflow: hidden;

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

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

注意最后一條，因為計算BFC高度時，浮動元素也參與計算，所以父元素的高度被撐開。而這也正符合包含塊未設置高度（height: auto;）時的裁切準則。因為包含塊高度（height: auto;），所以永遠不會出現內容超出包含塊的情況，因此overflow:hidden應用后，需要計算內部所有元素高度才能進行裁切。

補充下哪些元素會生成BFC：

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

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

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

主要代碼：

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

將clearfix這個class添加到浮動元素的父元素上，就清除了因為子元素浮動縮成一條的父元素的影響，完整代碼見：
jsfiddle栗子

3.水平三列等寬布局

水平三列等寬布局當頁面寬度變化時，怎樣一直保持三列始終均勻的居中顯示？
（實在不知道該怎樣簡潔的描述“均勻的居中”。。。意思就是左右兩列與頁面之間的間隙，以及列與列之間的間隙，這四塊間隙一樣寬。）
其實就是考算術的。按照設計稿樣式計算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;
}

效果就是下圖介樣子：

更多方法參考這篇文章：頁面架構之等分布局 4.三行自適應布局：header（定高） + main（高度自適應） + 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的設置注意兩點：
1.用了同時設置top與bottom , left與right，撐開元素的技巧。
2.overflow:auto; 用來在內部元素超出時顯示進度條。
這樣在頁面高度變化，或者內部的content高度變化時，都始終可以保持正常的三行布局。

方法二、flex （三行高度自適應 + 兩列寬度自適應）

可以直接看 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; } // 其實是flex-grow: 1; 占滿剩余寬度的1/n，而這里的n就是1

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50683.html

CSS常用布局

摘要：頭部主要內容左邊欄右邊欄尾部顯示為頭部主要內容左邊欄右邊欄尾部圣杯布局和雙飛翼布局的原理這篇文章講解得比較清楚，我就不再贅述。 ====== 樣例代碼不能顯示，請看原文https://magicly.me/css-layout/ ====== 布局是CSS中一個很重要的部分，甚至我覺得是最重要也是最難的部分，其他諸如字體大小、顏色等等都是很容易的。最近總結一下使用過的CSS常...

aaron 2019-08-29 12:59 評論0 收藏0
深入學習CSS布局系列（一）布局常用屬性

摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內容高度浮動塌陷配合使用屬性規(guī)定元素的哪一側不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列（一）布局常用屬性一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發(fā)現自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

Noodles 2019-08-30 12:53 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

CoderDock 2019-08-30 15:44 評論0 收藏0
CSS常用布局簡潔解決方案

摘要：與常人的直覺不符的是，實際上表示視口寬度的，而不是。與類似，表示視口高度的。存在問題它只適用于在視口中居中的場景基于的解決方案伸縮盒是專門針對這類需求所設計的。相關基礎知識 1.內部與外部尺寸模型：（w3c草案）親測google可支持。（http://w3.org/TR/css3-sizing ）基于原有CSS尺寸特性，可以使CSS更容易描述內容自適應以及適應固定上下文的盒模型： ...

2450184176 2019-08-29 12:55 評論0 收藏0
JS / CSS 常用實戰(zhàn)代碼片段

摘要：常用模式片段之摘要第一次看到這個字眼是在中，即。之后也見到一些別人的代碼里有，它和頁面的有什么關系，以及和有何淵源。以前都見過這些詞，但都似懂非懂，今天查了些資料收集了些代碼，做個完整的理解。 CSS篇常用模式片段之CSS布局篇 http://jsorz.cn/blog/2016/08/code-patterns-of-css-layout.html 摘要：position 拉伸性質...

sutaking 2019-08-30 13:14 評論0 收藏0