CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子嚣鄙，在CSS中，"box model"這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用串结。
CSS盒模型本質(zhì)上是一個(gè)盒子哑子，封裝周圍的HTML元素，它包括：邊距肌割，邊框卧蜓，填充，和實(shí)際內(nèi)容把敞。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素烦却。
下面的圖片說明了盒子模型(Box Model)：
Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的先巴。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框其爵。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的伸蚯。
Element(元素) - 盒子的內(nèi)容摩渺。
Width（寬度）
Height（高度）
最終元素的總寬度計(jì)算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計(jì)算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 邊框
邊框樣式
border-style屬性用來定義邊框的樣式
邊框?qū)挾?/h4>
通過 border-width 屬性為邊框指定寬度。
為邊框指定寬度有兩種方法：可以指定長度值剂邮，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)摇幻，或者使用 3 個(gè)關(guān)鍵字之一，它們分別是 thick 挥萌、medium（默認(rèn)值） 和 thin绰姻。
邊框顏色
border-color屬性用于設(shè)置邊框的顏色∫伲可以設(shè)置的顏色：
name - 指定顏色的名稱狂芋，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16進(jìn)制值, 如 "#ff0000"
CSS margin(外邊距)
margin 清除周圍的（外邊框）元素區(qū)域。margin 沒有背景顏色憨栽，是完全透明的帜矾。
margin 可以單獨(dú)改變元素的上翼虫，下，左屡萤，右邊距珍剑，也可以一次改變所有的屬性。
可能的值：
| 值 | 說明 |
|---|---|
| auto | 設(shè)置瀏覽器邊距死陆。 這樣做的結(jié)果會(huì)依賴于瀏覽器 |
| length | 定義一個(gè)固定的margin（使用像素招拙，pt，em等） |
| % | 定義一個(gè)使用百分比的邊距 |
CSS padding（填充）
CSS padding（填充）是一個(gè)簡寫屬性措译，定義元素邊框與元素內(nèi)容之間的空間别凤，即上下左右的內(nèi)邊距。
當(dāng)元素的 padding（填充）內(nèi)邊距被清除時(shí)瞳遍，所釋放的區(qū)域?qū)?huì)受到元素背景顏色的填充闻妓。
單獨(dú)使用 padding 屬性可以改變上下左右的填充菌羽。
可能的值：
| 值 | 說明 |
|---|---|
| length | 定義一個(gè)固定的填充(像素, pt, em,等) |
| % | 使用百分比值定義一個(gè)填充 |
CSS Position(定位)
position 屬性指定了元素的定位類型掠械。
position 屬性的五個(gè)值：
static
relative
fixed
absolute
sticky
元素可以使用的頂部，底部注祖，左側(cè)和右側(cè)屬性定位猾蒂。然而，這些屬性無法工作是晨，除非是先設(shè)定position屬性肚菠。他們也有不同的工作方式，這取決于定位方法罩缴。
static 定位
HTML 元素的默認(rèn)值蚊逢，即沒有定位，遵循正常的文檔流對象箫章。
靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響烙荷。
fixed 定位
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)：
relative 定位
相對定位元素的定位是相對其正常位置檬寂。
absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素终抽，如果元素沒有已定位的父元素，那么它的位置相對于<html>:
sticky 定位
sticky 英文字面意思是粘桶至，粘貼昼伴，所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動(dòng)位置來定位镣屹。
粘性定位的元素是依賴于用戶的滾動(dòng)圃郊，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)女蜈，它的表現(xiàn)就像 position:fixed;描沟，它會(huì)固定在目標(biāo)位置飒泻。
元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位吏廉。
這個(gè)特定閾值指的是 top, right, bottom 或 left 之一泞遗，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一席覆，才可使粘性定位生效史辙。否則其行為與相對定位相同。
所有的CSS定位屬性
"CSS" 列中的數(shù)字表示哪個(gè)CSS(CSS1 或者CSS2)版本定義了該屬性佩伤。
| 屬性 | 說明 | 值 |
|---|---|---|
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移聊倔。 | auto length%inherit |
| clip | 剪輯一個(gè)絕對定位的元素 | shapeauto inherit |
| cursor | 顯示光標(biāo)移動(dòng)到指定的類型 | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 | auto length%inherit |
| overflow | 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情生巡。 | auto hidden scroll visible inherit |
| overflow-y | 指定如何處理頂部/底部邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域 | auto hidden scroll visible no-display no-content |
| overflow-x | 指定如何處理右邊/左邊邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域 | auto hidden scroll visible no-display no-content |
| position | 指定元素的定位類型 | absolute fixed relative static inherit |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移耙蔑。 | auto length%inherit |
| top | 定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 | auto length%inherit |
| z-index | 設(shè)置元素的堆疊順序 | numberauto inherit |
CSS Float(浮動(dòng))
元素怎樣浮動(dòng)
元素的水平方向浮動(dòng)孤荣，意味著元素只能左右移動(dòng)而不能上下移動(dòng)甸陌。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
浮動(dòng)元素之后的元素將圍繞它盐股。
浮動(dòng)元素之前的元素將不會(huì)受到影響钱豁。
清除浮動(dòng) - 使用 clear
元素浮動(dòng)之后，周圍的元素會(huì)重新排列疯汁，為了避免這種情況牲尺，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素幌蚊。
CSS 中所有的浮動(dòng)屬性
"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性谤碳。
| 屬性 | 描述 | 值 |
|---|---|---|
| clear | 指定不允許元素周圍有浮動(dòng)元素。 | left right both none inherit |
| float | 指定一個(gè)盒子（元素）是否可以浮動(dòng)溢豆。 | left right none inherit |
