CSS學(xué)習(xí)筆記3 CSS三大特性

CSS三大特性：盒子模型、浮動(dòng)、定位。其余都是細(xì)節(jié)

1. 盒子模型

盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形盒子，也就是一個(gè)容器。每個(gè)盒子都由元素的內(nèi)容、內(nèi)邊距、邊框、外邊距組成。

1.1 盒子邊框?

1.1.1 整體邊框border

border的所有樣式

border屬性可以單獨(dú)選取設(shè)置，也可以連寫且沒有順序

border: solid 1px #000

border-style屬性

1.1.2 盒子單獨(dú)邊框

查看手冊：

border-top

border-right

border-bottom

border-left

1.1.3 常用案例

表單中實(shí)現(xiàn)下面效果：

1.1.4 邊框綜合設(shè)置（高級用法）

1.1.5 表格細(xì)線邊框設(shè)置 border-collapse

表格HTML

效果1：

這個(gè)效果我們發(fā)現(xiàn)table的邊框和td的邊框可以分開設(shè)置，并且默認(rèn)有間隔

效果1

效果1樣式

效果2：

去掉table和td之間所有的空隙，只能在table標(biāo)簽中設(shè)置，不是CSS樣式

效果2，去掉空隙，非細(xì)線邊框

效果2

效果3：

效果2還不是細(xì)線邊框的效果，因?yàn)槊總€(gè)td的邊框都使用了3px，

因此td與td之間加起來就是6px。

效果3會(huì)合并td之間的邊框，使td之間只有3px（是用border-collapse）

效果3 細(xì)線邊框，比效果2的邊框細(xì)了一倍

效果3

1.2 內(nèi)邊距 padding

padding屬性用于設(shè)置內(nèi)邊距，是指border與content之間的距離

1.2.1 設(shè)置不同內(nèi)容大小的導(dǎo)航欄樣式

之前做的導(dǎo)航欄樣式都是導(dǎo)航欄內(nèi)容字?jǐn)?shù)相同的，往往項(xiàng)目中的導(dǎo)航欄內(nèi)的文字字?jǐn)?shù)不盡相同

新浪首頁每個(gè)導(dǎo)航欄寬度不同，但是文字都是居中顯示

簡單不同寬度導(dǎo)航欄樣式

1.2.2 新浪導(dǎo)航欄例子

1.2.3 padding的2個(gè)問題

1. padding參數(shù)個(gè)數(shù)

4個(gè)值遵循順時(shí)針原則

*2. 設(shè)置了padding的值為非0后，會(huì)撐大盒子，需要重新計(jì)算width和height

3. 清除元素默認(rèn)外邊距：

清除瀏覽器默認(rèn)的margin和padding：

*{

? ? margin: 0;

????padding: 0;

}

但是上面的樣式對瀏覽器來說解析效率太低了，最好使用并集解釋器：

body, div, dl, dt, ......{

? ? margin: 0;

? ? padding: 0;

}

1.3 外邊距 margin

1.3.1 盒子水平居中

限制條件：

1. 必須是塊級元素

2. 盒子必須指定了width

如果盒子設(shè)置了width比瀏覽器的寬度小，又想讓盒子居中，通過margin來設(shè)置：

方法一：

margin: 0 auto /* 上下為0，左右為auto */

方法二：

margin: auto /* 上下默認(rèn)為0，左右為auto */

方法三：

margin-left: auto

margin-right: auto

1.3.2 background-image 和 img 使用的時(shí)機(jī)

插入圖片：產(chǎn)品展示類

背景圖片：小圖標(biāo)背景或者 logo圖片或者超大背景圖片

1.3.3 外邊距合并

使用margin定義快原酸的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并

1.3.3.1 相鄰塊元素垂直外邊距合并

注意2個(gè)條件：

1. 相鄰塊元素

2. 垂直外邊距（水平不會(huì)出現(xiàn)問題）

合并時(shí)默認(rèn)為最大的那個(gè)magin值

這是瀏覽器的bug，不需要解決，只需要計(jì)算好margin值就可以避免

*1.3.3.2 嵌套塊元素垂直外邊距合并

注意2個(gè)條件：

1. 相鄰塊元素

2. 垂直外邊距（水平不會(huì)出現(xiàn)問題）

目標(biāo)：

想讓子盒子在父盒子中垂直移動(dòng)位置。

問題：

常見做法一（可以實(shí)現(xiàn)）：

在父盒子設(shè)置padding-top，但是padding會(huì)撐大盒子，需要減少父盒子的height值

*常見做法二（沒有實(shí)現(xiàn)）：

子盒子中設(shè)置margin-top, 但是會(huì)發(fā)現(xiàn)父盒子的位置也會(huì)被子盒子代跑

解決辦法：

1. 在父盒子角度出發(fā)，使用padding-top

2. 從子盒子角度出發(fā)，設(shè)置margin-top，但是需要給父盒子設(shè)置一個(gè)border

3. 為父盒子添加：overflow: hidden;

*1.3.4 content內(nèi)容的width和height

在嵌套的2個(gè)盒子情況下

1. 如果子盒子不設(shè)置width，則會(huì)占滿父盒子的寬度

2. 如果子盒子沒有給定寬度，則即使padding也不會(huì)影響父盒子大小

1.3.5 盒子模型布局穩(wěn)定性

width > padding > margin

1.3.6 盒子圓角邊框(CSS3)

略，查手冊

1.3.7 盒子陰影

略，查手冊

2. 浮動(dòng) float

2.1 普通流（normal flow）

2.2 浮動(dòng) float

2.2.1 什么是float

定義

前面學(xué)了嵌套盒子，實(shí)現(xiàn)子盒子在父盒子中任意移動(dòng)

其實(shí)不通過嵌套的方式，可以用float來實(shí)現(xiàn)嵌套的效果

體會(huì)浮動(dòng)：

最簡單浮動(dòng)效果

簡單浮動(dòng)代

float能做什么？：

float的重要功能

如果不用float來做上面的功能，我們只能用display: inline-block

缺點(diǎn)一：需要解決div之間間隙的問題

缺點(diǎn)二：當(dāng)需要所有div右對齊排列的時(shí)候，每個(gè)div都需要計(jì)算magin-right

而float用簡單的語法就能解決上面的2個(gè)問題

2.2.2 浮動(dòng)詳細(xì)內(nèi)幕特性

1. 浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，會(huì)影響標(biāo)準(zhǔn)流。且浮動(dòng)只有左右浮動(dòng)，沒有上下浮動(dòng)

2. 下面做一個(gè)常見浮動(dòng)樣式：

需要給one、two2個(gè)盒子設(shè)置一個(gè)父盒子，才能達(dá)到這個(gè)效果：

3. 浮動(dòng)首先創(chuàng)建包含塊的概念（包裹），就是說，浮動(dòng)的元素總是找離他最近的父級元素對齊。但是不會(huì)超過內(nèi)邊距padding的范圍

在2中，one和two有一個(gè)父級塊級元素

嵌套子父級浮動(dòng)，子盒子不會(huì)超過父盒子padding的范圍

4. 浮動(dòng)元素排列位置，跟上一個(gè)元素（塊級元素）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和上一個(gè)元素的底部對齊

因?yàn)槿绻患痈?dòng)，則是標(biāo)準(zhǔn)流，標(biāo)準(zhǔn)流獨(dú)占一行

也就是說浮動(dòng)影響的僅僅是后面的盒子

5. 浮動(dòng) 可以默認(rèn)讓元素轉(zhuǎn)換為inline-block元素

也就是，如果行內(nèi)元素設(shè)置了浮動(dòng)，就可以給該盒子設(shè)置width和height了

浮動(dòng)特點(diǎn)總結(jié)：

3. 版心和布局

3.1 版心

版心就是網(wǎng)頁可視區(qū)，只網(wǎng)頁中主題內(nèi)容所在區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見寬度值為：960px, 980px, 1000px, 1200px等等

3.2 布局

3.2.1 一列固定寬度且居中型

3.2.2 兩列左窄右寬型

3.2.3 通欄平均分布型

下面的代碼還需要精調(diào)。。。

3.2.4 通欄平均分布型例子

4. 清除浮動(dòng)

在2.2.2的2中，我們要實(shí)現(xiàn)布局，需要給one、two使用浮動(dòng)，必須給one、two加一個(gè)父級盒子才能實(shí)現(xiàn)效果。

這種方式不僅要計(jì)算父級盒子的寬高，還要計(jì)算子集盒子浮動(dòng)后的padding，比較麻煩（會(huì)影響其他盒子）。

而且如果one、two的高度是動(dòng)態(tài)的話，父級盒子沒辦法給合理的height

這一節(jié)主要介紹一種方法（清除浮動(dòng)），在不設(shè)置父級盒子height的情況下，子級盒子能夠自動(dòng)撐開父級盒子，達(dá)到動(dòng)態(tài)撐開父級盒子的效果！

4.1 清除浮動(dòng)的原理

清除浮動(dòng)主要是為了解決父級元素因?yàn)樽蛹壐?dòng)引起內(nèi)部高度為0的問題

不清除浮動(dòng)帶來的問題

子盒子不浮動(dòng)

子盒子浮動(dòng)帶來的問題

4.2 清除浮動(dòng)的方法

4.2.1 額外標(biāo)簽法

增加一個(gè)自定義類選擇器，使用clear屬性設(shè)置為both來清除浮動(dòng)。

4.2.2 父級添加overflow屬性方法

這種方法叫：子不教，父之過，教不嚴(yán)，師之惰。責(zé)任在于父和師

4.2.3 使用after偽元素清除浮動(dòng)

略，做兼容性時(shí)候再查

定義一個(gè)類名選擇器，并在father中使用多類名選擇

<div class="father clearfix">

4.2.4 使用before和after雙偽元素清除浮動(dòng)