CSS 布局的基礎(chǔ)方法及css布局技巧

2020-11-16 10:08 更新

css 是一個(gè)網(wǎng)頁(yè)的外衣，網(wǎng)頁(yè)好不好看取決于 css 樣式，而布局是 css 中比較重要的部分，當(dāng)產(chǎn)品把一個(gè)需求設(shè)計(jì)交到手中，我首先要做的是一點(diǎn)點(diǎn)的解剖這些需求，首先想到的是 html 的結(jié)構(gòu)，根據(jù)要兼容的瀏覽器，數(shù)據(jù)的拼接，代碼的可維護(hù)性，擴(kuò)展性來(lái)選擇 css 的布局方法。有時(shí)候，一個(gè)好的布局可以減少很多代碼，用 css 處理網(wǎng)頁(yè)布局的時(shí)候有很多技巧性的東西，下面就給大家介紹一些 css 布局技巧實(shí)例及 css 布局模型。


css的基礎(chǔ)布局方法

1.塊區(qū)域介紹

<body>

  <div>

   <p>這是一個(gè)段落.</p>

  </div>

 </body>

p 元素的包含塊是 div 元素，因?yàn)樽鳛閴K級(jí)元素，表單元格或行內(nèi)元素，這是最近的祖先元素，類(lèi)似的，div 的包含塊是 body. 因此，p 的布局依賴(lài)于 div 的布局，而 div 的布局則依賴(lài)于 body 的布局。

塊級(jí)元素會(huì)自動(dòng)重啟一行。


2. 塊級(jí)元素
正常流布局

塊級(jí)元素

一般的，一個(gè)元素的width被定義為從左內(nèi)邊界到右內(nèi)邊界，height則是從上內(nèi)邊界到下內(nèi)邊界的距離。

不同的寬度，高度，內(nèi)邊距和外邊距相結(jié)合，就可以確定文檔的布局。


水平布局

簡(jiǎn)單規(guī)則，正常流中塊級(jí)元素框的水平部分 總和 就等于父元素的 width . 假設(shè)一個(gè)div中有兩個(gè)段落，這兩個(gè)段落的外邊距設(shè)置為 1 em，段落內(nèi)容寬度 width 在加上其左，右內(nèi)邊距，邊框或外邊距加在一起正好是 div 內(nèi)容的 width.


7大屬性：margin-left, border-left, padding-left, width, padding-right, border-right, margin-right

這 7 個(gè)屬性的值加在一起必須是父塊元素的 width 值. ( 其中 margin-left, margin-right, width 可以設(shè)置成auto ) 設(shè)置成 auto, 會(huì)按照以上規(guī)則自動(dòng)匹配到父塊的寬度，例如 7個(gè)屬性的和必須為 400像素，沒(méi)有設(shè)置內(nèi)邊距或邊距 ( 默認(rèn)為 0) 而右外邊距和width設(shè)置為100px, 左外邊距為  auto,那么左外邊距的寬度將是200px. 可以用 auto 彌補(bǔ)實(shí)際值與所需綜合的差距。注：如果3個(gè)可以設(shè)置 auto,都沒(méi)設(shè)置成 auto,而且寬度加在一起還不夠父塊區(qū)域的寬度的話，會(huì)默認(rèn)將 margin-right 設(shè)置成 auto 來(lái)滿(mǎn)足總和與父塊相等的要求。

如果兩個(gè)外邊距設(shè)置成 auto,那么，它們會(huì)是等長(zhǎng)的，因此將元素在其父親元素中居中。

如果這3個(gè)屬性都設(shè)置成auto, 那么, 外邊距會(huì)是0，而讓 width  盡可能的長(zhǎng)。

可以使用百分?jǐn)?shù)，但是邊框的寬度不能是百分?jǐn)?shù)。

垂直布局
7大屬性：margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom , 同樣，這7個(gè)屬性的值的總和是父元素 height 值。

其中 , margin-top, height, margin-bottom 也可以設(shè)置成 auto. ( 如果 margin-top, margin-bottom設(shè)置成 auto, 那么它們就會(huì)自動(dòng)設(shè)置成 0 ).

3.浮動(dòng)與定位( 確認(rèn)基本布局 )

（1) 浮動(dòng)
一個(gè)元素浮動(dòng)時(shí)，其他內(nèi)容會(huì)“環(huán)繞”該元素，浮動(dòng)元素要設(shè)置一個(gè)width.

float ( left , right , none ) , none 的情況一般用在文檔內(nèi)部，用來(lái)覆蓋式樣表，一般很少使用 none.

浮動(dòng)元素會(huì)自動(dòng)生成一個(gè)塊級(jí)框。

浮動(dòng)元素規(guī)則
浮動(dòng)元素不能超過(guò)包含它的塊的左右邊界。（1,2 左右邊界受限 )

浮動(dòng)元素規(guī)則

浮動(dòng)元素之前如果出現(xiàn)浮動(dòng)元素，則必須在該浮動(dòng)元素之后（不能覆蓋 ) ( 2 左邊受限 ）

左邊受限

如果浮動(dòng)元素加一起太寬，會(huì)自動(dòng)向下。。（寬度受限 )

寬度受限

垂直方向要頂頭不能超過(guò)塊區(qū)域，同樣不能超過(guò)在它上面的浮動(dòng)元素。( 上邊界受限 )

上邊界受限

第一個(gè)浮動(dòng)元素之后，第二個(gè)在它的下邊，因?yàn)樗麄儯?個(gè)在它的右邊。（ 2 上邊受限 )


浮動(dòng)元素的頂端，不能比之前所有浮動(dòng)元素或塊級(jí)別元素的頂端更高 ( 頂端受限 )


頂端受限

浮動(dòng)元素之間左右的邊界不能覆蓋，如下1,2,3, 之間不能覆蓋 ( 元素之間受限 )

元素之間受限

浮動(dòng)元素會(huì)盡可能高的放置

浮動(dòng)元素

浮動(dòng)元素會(huì)盡可能向左向右

向左向右

clear , 可以防止指定了 clear 元素的兩邊存在浮動(dòng)元素

（2) 定位
利用定位，可以準(zhǔn)確的定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)在哪里，或者相對(duì)于父元素，另一個(gè)元素甚至瀏覽器窗口。

position : static | relative | absolute | fixed

static : 元素框正常生成

relative : 元素框偏移某個(gè)距離

absolute : 元素框從文檔流完全刪除，并相對(duì)于其包含塊定。包含塊可能是文檔中的另一個(gè)元素或初始包含塊。

fixed : 類(lèi)似 absolute，不過(guò)其包含塊是視窗本身。

包含塊：
根元素( html或body ) , 初始包含塊是一個(gè)視窗大小的矩形.

非根元素 :

- 非根元素, 如果其 position是 relative 或  static, 則包含塊由最近的塊級(jí)框，表單元格或行內(nèi)塊構(gòu)成。

- 非根元素, 如果其 position是 absolute , 包含塊為最近的 position值不是 static的祖先元素

這里有一點(diǎn)很重要，元素可以定位到其包含塊的外面。

css布局技巧

1、多元素水平居中
效果： 

多元素水平居中

上圖顯示效果為多元素水平居中，即無(wú)論元素（小黑框）基數(shù)為多少，它們都能作為一個(gè)整體，水平居中。

在網(wǎng)站布局中，很多時(shí)候，子元素中使用行內(nèi)元素如span或塊元素li標(biāo)簽且標(biāo)簽個(gè)數(shù)不定，而我們又想讓這一塊不管個(gè)數(shù)有多少個(gè)(子元素的總體寬度不定)，始終都能居中顯示。這就需要設(shè)置子元素display:inline-block。同時(shí)，根據(jù)display:inline-block的屬性，子元素本身具備inline的特性，因此父元素需要設(shè)置text-align：center，來(lái)實(shí)現(xiàn)子元素作為一個(gè)整體在父元素中水平居中。

main{

  text-align:center;

}

div{

  display:inline-block;

  *display:inline;/*hack IE*/

  *zoom:1;/*hack IE*/

}

使用display:inline-block屬性，可以使行內(nèi)元素或塊元素能夠不加float屬性就可以定義自身的寬、高，同時(shí)又能使該元素在父元素居中顯示。

在內(nèi)聯(lián)元素上定義display:inline-block屬性，發(fā)現(xiàn)IE6、IE7中的顯示效果同其它瀏覽器一致，但事實(shí)是ie7及更低版本的ie瀏覽器不支持display:inline-block這個(gè)屬性。 

在IE下，display: inline-block只是觸發(fā)了元素的layout。比如將display: inline-block設(shè)置到div上，只能保證這個(gè)div擁有塊元素的特征（可以設(shè)置寬度，高度等），但還是會(huì)產(chǎn)生換行。接下來(lái)要設(shè)置display: inline，使其不產(chǎn)生換行。將display:inline-block;display:inline;寫(xiě)在同一個(gè)樣式上，inline-block屬性是不會(huì)觸發(fā)元素的layout的，因此我們還要額外加上 zoom:1來(lái)觸發(fā)layout。

除了以上所提到的有效方法之外，還有另外一種方法：

先使用 display:inline-block 屬性觸發(fā)塊元素，然后再定義 display:inline，讓塊元素呈遞為內(nèi)聯(lián)對(duì)象（兩個(gè)display 要先后放在兩個(gè) CSS 樣式聲明中才有效果，這是 IE 的一個(gè)經(jīng)典 bug ，如果先定義了 display:inline-block，然后再將 display 設(shè)回 inline 或 block，layout 不會(huì)消失）。

div {display:inline-block;...}div {*display:inline;}

但是要注意的是，display:inline-block元素間會(huì)產(chǎn)生多余空白。解決方法：父元素定義font-size:0 去掉行內(nèi)塊元素水平方向空白；子元素定義vertical-align 屬性去掉行內(nèi)塊元素垂直方向空白。


提示：如果您希望設(shè)置元素的水平垂直定位，那么您可以參考本站的“CSS如何使元素水平垂直定位”部分的內(nèi)容！

2、欄柵化布局

效果：

欄柵化布局

display: flex;

flex-direction: column;//上面兩行等同于flex-flow：colomn

flex-wrap: wrap;// 顯示 wrap一行顯示不完的時(shí)候換行

height: 440px;

width: 660px;

一個(gè)Flexbox布局是由一個(gè)伸縮容器(flex containers)和在這個(gè)容器里的伸縮項(xiàng)目(flex items)組成。

伸縮方向與換行(flex-flow)

伸縮容器有一個(gè)CSS屬性“flex-flow”用來(lái)決定伸縮項(xiàng)目的布局方式。

如果伸縮容器設(shè)置了“flex-flow”值為“row”，伸縮項(xiàng)目排列由左向右排列。

flex-flow

如果flex-flow值設(shè)置為column，伸縮項(xiàng)目排列由上至下排列。

column

制作一個(gè)20%、60%、20%網(wǎng)格布局

.main-content {

      width: 60%;

}

.main-nav,.main-sidebar {

     -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

      -moz-box-flex: 1;         /* OLD - Firefox 19- */

      width: 20%;               /* For old syntax, otherwise collapses. */

      -webkit-flex: 1;          /* Chrome */

      -ms-flex: 1;              /* IE 10 */

      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */ }


3、未知高度多行文本垂直居中


方法一，使用display：inline-block+偽元素：http://codepen.io/floralam/pen/WbBrwV?editors=110

未知高度多行文本垂直居中

.container{

   position: fixed;

    left: 0;

    top:0;

    height: 100%;

    width: 100%;

    text-align: center;

}

.mask:after{

    content: " ";

    display: inline-block;

    vertical-align: middle;

    height: 100%

}

.dialog{

    display: inline-block;

    border: 3px solid lightblue;

}

box 容器通過(guò)after或者before 生成一個(gè)高度 100% 的「?jìng)涮ァ?，他的高度和容器的高度是一致的，相?duì)于「?jìng)涮ァ勾怪本又?，在視覺(jué)上表現(xiàn)出來(lái)也就是相對(duì)于容器垂直居中了。


 方法二（感謝超級(jí)課程表胡晉哥哥的提示），使用display：table-cell：


http://codepen.io/floralam/pen/yNeMPg

通過(guò)display轉(zhuǎn)化成為表格的形式，再采用垂直居中的方法得到需要的結(jié)果。

display:table    此元素會(huì)作為塊級(jí)表格來(lái)顯示（類(lèi)似 <table>），表格前后帶有換行符。    

display:table-cell 此元素會(huì)作為一個(gè)表格單元格顯示（類(lèi)似<td> 和 <th>）


方法三（感謝超級(jí)課程表胡晉哥哥的提示），flexbox布局：


http://codepen.io/floralam/pen/yNeMvM

flexbox屬性：

伸縮容器：一個(gè)設(shè)有display:flex或display:inline-flex的元素
伸縮項(xiàng)目：伸縮容器的子元素
主軸、主軸方向：用戶(hù)代理沿著一個(gè)伸縮容器的主軸配置伸縮項(xiàng)目，主軸是主軸方向的延伸。
主軸起點(diǎn)、主軸終點(diǎn)：伸縮項(xiàng)目的配置從容器的主軸起點(diǎn)邊開(kāi)始，往主軸終點(diǎn)邊結(jié)束。
主軸長(zhǎng)度、主軸長(zhǎng)度屬性：伸縮項(xiàng)目的在主軸方向的寬度或高度就是項(xiàng)目的主軸長(zhǎng)度，伸縮項(xiàng)目的主軸長(zhǎng)度屬性是width或height屬性，由哪一個(gè)對(duì)著主軸方向決定。
側(cè)軸、側(cè)軸方向：與主軸垂直的軸稱(chēng)作側(cè)軸，是側(cè)軸方向的延伸。
側(cè)軸起點(diǎn)、側(cè)軸終點(diǎn)：填滿(mǎn)項(xiàng)目的伸縮行的配置從容器的側(cè)軸起點(diǎn)邊開(kāi)始，往側(cè)軸終點(diǎn)邊結(jié)束。
側(cè)軸長(zhǎng)度、側(cè)軸長(zhǎng)度屬性：伸縮項(xiàng)目的在側(cè)軸方向的寬度或高度就是項(xiàng)目的側(cè)軸長(zhǎng)度，伸縮項(xiàng)目的側(cè)軸長(zhǎng)度屬性是「width」或「height」屬性，由哪一個(gè)對(duì)著側(cè)軸方向決定。


另外，對(duì)于單行文本，設(shè)置line-height=height代碼更加簡(jiǎn)潔:


http://codepen.io/floralam/pen/eNJvyE

父元素設(shè)置寬度高度，然后設(shè)置屬性

text-align:center; /* 水平居中 */
line-height: 300px; /* line-height = height */


提示：如果你想要深入了解flexbox布局，請(qǐng)參考“CSS3 Flexbox屬性與彈性盒模型”部分的內(nèi)容。

4、多欄自適應(yīng)布局


對(duì)于移動(dòng)設(shè)備瀏覽器：http://codepen.io/floralam/pen/NPVwgz?editors=110

.container{

  display:-webkit-box;

}

.left{

  -webkit-box-flex:1;

}

.right{

  -webkit-box-flex:1;

}

實(shí)現(xiàn)左右兩側(cè)元素，右側(cè)元素的文字不會(huì)溢出到左側(cè)位置。
多欄自適應(yīng)布局

1）讓左邊的圖片左浮動(dòng)或者絕對(duì)定位，

http://codepen.io/floralam/pen/wBbPPj

.right{

    margin-left: 150px;

}


2）讓左邊的圖片左浮動(dòng)或者絕對(duì)定位，

http://codepen.io/floralam/pen/gbJogQ

.right{

  overflow:hidden;/*讓右側(cè)文字和左側(cè)圖片自動(dòng)分欄*/

}


3）左側(cè)圖片設(shè)置為左浮動(dòng)，

http://codepen.io/floralam/pen/bNyaaX?editors=110

.right{

  display: table-cell;/*讓右側(cè)文字和左側(cè)圖片自動(dòng)分欄*/

}


兩欄或多欄自適應(yīng)布局的通用類(lèi)語(yǔ)句是（block水平標(biāo)簽，需配合浮動(dòng)）：

http://codepen.io/floralam/pen/vEwpjV

.cell{

  padding-right:10px;

  display: table-cell;

  *display: inline-block;

  *width: auto;

}


浮動(dòng)

5、強(qiáng)制不換行

white-space:nowrap;

自動(dòng)換行

word-wrap: break-word; //性允許長(zhǎng)單詞或 URL 地址換行到下一行

word-break: normal; //讓瀏覽器實(shí)現(xiàn)在任意位置的換行

word-wrap是控制換行的。break-word 是控制是否斷詞的。


強(qiáng)制英文單詞斷行

div{

　　word-break:break-all;

}

 

6、li超過(guò)一定長(zhǎng)度，以省略號(hào)顯示

http://codepen.io/floralam/pen/zxQjrK

nowrap li{

   white-space:nowrap;

   width:100px;

   overflow:hidden;

   text-overflow: ellipsis;

}


7、左側(cè)導(dǎo)航

左側(cè)導(dǎo)航

.nav{

　　position:relative;

　　float:left;width:190px;

　　margin-right:-190px;

　　background:lightblue;

}

.container{

　　float:right;

　　width:100%;

　　background:pink;

}

.content{

　　margin-left:200px;

}


8、 修復(fù)側(cè)邊欄

在外容器的添加導(dǎo)航和主內(nèi)容，當(dāng)導(dǎo)航和主內(nèi)容的寬度加上內(nèi)外邊距的數(shù)值大于外容器的寬度減去內(nèi)邊距的值，會(huì)導(dǎo)致導(dǎo)航和主內(nèi)容（其中一個(gè)，html代碼排后面的元素）被擠下。

修復(fù)側(cè)邊欄

http://codepen.io/floralam/pen/XJLRYq?editors=110


解決方案：

1) Section元素上使用box-sizing:border-box;模擬IE6中，使得內(nèi)元素的寬度為width的值，而非width加上padding和margin的值。


2)width:-moz-calc(75% -1rem * 2);width:-webkit-calc(75% - 1rem * 2); width: calc(75% - 1rem * 2); width屬性中減去padding值


3)http://codepen.io/floralam/pen/yydPOE

在元素內(nèi)部增加一個(gè)額外的容器，并將padding放在這個(gè)新增的內(nèi)部容器中，這是一種修復(fù)方法，而且得到眾多瀏覽器支持。


9、css描繪三角形

http://codepen.io/floralam/pen/azgGmZ

很多關(guān)于使用css3來(lái)描繪特定圖像，使用代碼而非圖片實(shí)現(xiàn)（多座小山包，返回頂部）的題目，都離不開(kāi)描繪三角形。


10、清除浮動(dòng)的技巧

清除浮動(dòng)
在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個(gè)現(xiàn)象叫浮動(dòng)溢出，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動(dòng)。

1)添加最后一個(gè)元素<div style ="clear:both"></div>


2) 父元素設(shè)置overflow: hidden;


3) 使用CSS的:after偽元素

通過(guò)CSS偽元素在容器的內(nèi)部元素最后添加了一個(gè)看不見(jiàn)的空格"020"或點(diǎn)"."，并且賦予clear屬性來(lái)清除浮動(dòng)。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個(gè)class添加一條zoom:1;觸發(fā)haslayout。


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)