浮動(dòng)特性

加了浮動(dòng)之后的元素,會(huì)具有很多特性,需要我們掌握的.

1、浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流(脫標(biāo)：浮動(dòng)的盒子不再保留原先的位置)

2、浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)齊

注意： 浮動(dòng)的元素是互相貼靠在一起的（不會(huì)有縫隙），如果父級(jí)寬度裝不下這些浮動(dòng)的盒子，多出的盒子會(huì)另起一行對(duì)齊。

?

3、浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性

? 浮動(dòng)元素的大小根據(jù)內(nèi)容來(lái)決定

? 浮動(dòng)的盒子中間是沒(méi)有縫隙的

CSS屬性書(shū)寫(xiě)順序（重點(diǎn)）

建議遵循以下順序：

1. 布局定位屬性：display / position / float / clear / visibility / overflow（建議 display 第一個(gè)寫(xiě)，畢竟關(guān)系到模式）
2. 自身屬性：width / height / margin / padding / border / background
3. 文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

舉例：

 .jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);border-radius: 10px;} 

導(dǎo)航欄注意點(diǎn):

實(shí)際開(kāi)發(fā)中，重要的導(dǎo)航欄，我們不會(huì)直接用鏈接a ，而是用 li 包含鏈接(li+a)的做法

注意:

? 1.讓導(dǎo)航欄一行顯示, 給 li 加浮動(dòng), 因?yàn)?li 是塊級(jí)元素, 需要一行顯示.

? 2.這個(gè)nav導(dǎo)航欄可以不給寬度,將來(lái)可以繼續(xù)添加其余文字

? 3.因?yàn)閷?dǎo)航欄里面文字不一樣多,所以最好給鏈接 a 左右padding 撐開(kāi)盒子,而不是指定寬度

定位組成

定位：將盒子定在某一個(gè)位置，所以定位也是在擺放盒子， 按照定位的方式移動(dòng)盒子

定位也是用來(lái)布局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移

定位模式 用于指定一個(gè)元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

1 邊偏移（方位名詞）

邊偏移 就是定位的盒子移動(dòng)到最終位置。有 top、bottom、left 和 right 4 個(gè)屬性。

邊偏移屬性	示例	描述
top	top: 80px	頂端偏移量，定義元素相對(duì)于其父元素上邊線(xiàn)的距離。
bottom	bottom: 80px	底部偏移量，定義元素相對(duì)于其父元素下邊線(xiàn)的距離。
left	left: 80px	左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線(xiàn)的距離。
right	right: 80px	右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線(xiàn)的距離

定位的盒子有了邊偏移才有價(jià)值。 一般情況下，凡是有定位地方必定有邊偏移。

2 定位模式 (position)

在 CSS 中，通過(guò) position 屬性定義元素的定位模式，語(yǔ)法如下：

選擇器 { position: 屬性值; 
}

定位模式是有不同分類(lèi)的，在不同情況下，我們用到不同的定位模式。

定位模式?jīng)Q定元素的定位方式 ，它通過(guò) CSS 的 position 屬性來(lái)設(shè)置，其值可以分為四個(gè)：

值	語(yǔ)義
static	靜態(tài)定位
relative	相對(duì)定位
absolute	絕對(duì)定位
fixed	固定定位

3 定位口訣 —— 子絕父相

弄清楚這個(gè)口訣，就明白了絕對(duì)定位和相對(duì)定位的使用場(chǎng)景。

這個(gè)**“子絕父相”太重要了，是我們學(xué)習(xí)定位的口訣**，是定位中最常用的一種方式這句話(huà)的意思是：子級(jí)是絕對(duì)定位的話(huà)，父級(jí)要用相對(duì)定位。

因?yàn)榻^對(duì)定位的盒子是拼爹的，所以要和父級(jí)搭配一起來(lái)使用。

①子級(jí)絕對(duì)定位，不會(huì)占有位置，可以放到父盒子里面的任何一個(gè)地方，不會(huì)影響其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子內(nèi)顯示。

③父盒子布局時(shí)，需要占有位置，因此父親只能是相對(duì)定位。

這就是子絕父相的由來(lái)，所以相對(duì)定位經(jīng)常用來(lái)作為絕對(duì)定位的父級(jí)。

總結(jié)： 因?yàn)楦讣?jí)需要占有位置，因此是相對(duì)定位， 子盒子不需要占有位置，則是絕對(duì)定位

當(dāng)然，子絕父相不是永遠(yuǎn)不變的，如果父元素不需要占有位置，子絕父絕也會(huì)遇到。

4 固定定位(fixed) - 重要

• 固定定位是元素固定于瀏覽器可視區(qū)的位置。（認(rèn)死理型） 主要使用場(chǎng)景： 可以在瀏覽器頁(yè)面滾動(dòng)時(shí)元素的位置不會(huì)改變。

• 語(yǔ)法：

   選擇器 { position: fixed; }
  

• 固定定位的特點(diǎn)：（務(wù)必記住）：

  1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素。

  • 跟父元素沒(méi)有任何關(guān)系
  • 不隨滾動(dòng)條滾動(dòng)。

  2.固定定位不在占有原先的位置。

• 固定定位也是脫標(biāo)的，其實(shí)固定定位也可以看做是一種特殊的絕對(duì)定位。（認(rèn)死理型）

  • 完全脫標(biāo)—— 完全不占位置；
  • 只認(rèn)瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來(lái)設(shè)置元素的位置；
    • 跟父元素沒(méi)有任何關(guān)系；單獨(dú)使用的
    • 不隨滾動(dòng)條滾動(dòng)。

固定定位(fixed)之固定在版心右側(cè)

1. left: 50%;：讓**.讓固定定位的盒子移動(dòng)到瀏覽器可視區(qū)的一半位置**；
2. margin-left: **px;：讓固定定位的盒子向左移動(dòng)版心寬度的一半距離。

.fixed {position: fixed;/* 1. 走瀏覽器寬度的一半 */left: 50%;/* 2. 利用margin 走版心盒子寬度的一半距離 */margin-left: 405px;width: 50px;height: 150px;background-color: skyblue;}

粘性定位(sticky) - 了解

（開(kāi)始隨滾動(dòng)條滾動(dòng)，待到一定位置時(shí)，位置固定）
粘性定位可以被認(rèn)為是相對(duì)定位和固定定位的混合。 Sticky 粘性的

• 語(yǔ)法：

   選擇器 { position: sticky; top: 10px; }

• 粘性定位的特點(diǎn)：

  1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）

  2.粘性定位占有原先的位置（相對(duì)定位特點(diǎn)）

  3.必須添加 top 、left、right、bottom 其中一個(gè)才有效

  跟頁(yè)面滾動(dòng)搭配使用。 兼容性較差，IE 不支持。

定位總結(jié)

堆疊順序（z-index）

• 在使用定位布局時(shí)，可能會(huì)出現(xiàn)盒子重疊的情況。此時(shí)，可以使用 z-index 來(lái)控制盒子的前后次序 (z軸)

• 語(yǔ)法：

  選擇器 { z-index: 1; 
  }
  

• z-index 的特性如下：

  1. 屬性值：正整數(shù)、負(fù)整數(shù)或 0，默認(rèn)值是 0，數(shù)值越大，盒子越靠上；
  2. 如果屬性值相同，則按照書(shū)寫(xiě)順序，后來(lái)居上；
  3. 數(shù)字后面不能加單位。

  注意：z-index 只能應(yīng)用于相對(duì)定位、絕對(duì)定位和固定定位的元素，其他標(biāo)準(zhǔn)流、浮動(dòng)和靜態(tài)定位無(wú)效。

絕對(duì)定位的盒子居中

注意：加了絕對(duì)定位/固定定位的盒子不能通過(guò)設(shè)置 margin: auto 設(shè)置水平居中。

但是可以通過(guò)以下計(jì)算方法實(shí)現(xiàn)水平和垂直居中，可以按照下圖的方法：

1. left: 50%;：讓盒子的左側(cè)移動(dòng)到父級(jí)元素的水平中心位置；
2. margin-left: -100px;：讓盒子向左移動(dòng)自身寬度的一半。

定位特殊特性

絕對(duì)定位和固定定位也和浮動(dòng)類(lèi)似。

1.行內(nèi)元素添加絕對(duì)或者固定定位，可以直接設(shè)置高度和寬度。

2.塊級(jí)元素添加絕對(duì)或者固定定位，如果不給寬度或者高度，默認(rèn)大小是內(nèi)容的大小。

前面我們講過(guò)， display 是 顯示模式， 可以改變顯示模式有以下方式:

• 可以用inline-block 轉(zhuǎn)換為行內(nèi)塊
• 可以用浮動(dòng) float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類(lèi)似，并不完全一樣，因?yàn)楦?dòng)是脫標(biāo)的）
• 絕對(duì)定位和固定定位也和浮動(dòng)類(lèi)似， 默認(rèn)轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。

所以說(shuō)， 一個(gè)行內(nèi)的盒子，如果加了浮動(dòng)、固定定位和絕對(duì)定位，不用轉(zhuǎn)換，就可以給這個(gè)盒子直接設(shè)置寬度和高度等。

脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷

浮動(dòng)元素、**絕對(duì)定位(固定定位）**元素的都不會(huì)觸發(fā)外邊距合并的問(wèn)題。 （我們以前是用padding border overflow解決的）

也就是說(shuō)，我們給盒子改為了浮動(dòng)或者定位，就不會(huì)有垂直外邊距合并的問(wèn)題了。

絕對(duì)定位（固定定位）會(huì)完全壓住盒子

浮動(dòng)元素不同，只會(huì)壓住它下面標(biāo)準(zhǔn)流的盒子，但是不會(huì)壓住下面標(biāo)準(zhǔn)流盒子里面的文字（圖片）

但是絕對(duì)定位（固定定位） 會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容。

浮動(dòng)之所以不會(huì)壓住文字，因?yàn)楦?dòng)產(chǎn)生的目的最初是為了做文字環(huán)繞效果的。 文字會(huì)圍繞浮動(dòng)元素

overflow 溢出（重點(diǎn)）

• overflow 屬性指定了如果內(nèi)容溢出一個(gè)元素的框（超過(guò)其指定高度及寬度） 時(shí)，會(huì)發(fā)生什么。