CSS三大樣式

一、盒子模型

border 邊框

box-sizing：固定盒子大小

box-sizing：border-box;

border-style：（可以設定單獨上下左右的樣式）

botted 點線
dashed 虛線
solid 實線
double 雙線，兩個邊界，寬度和border-width的值相同
groove 3D溝槽邊界，效果取決于邊界顔色值
rigde 定義3D脊邊界，效果取決于邊界的顔色值
inset 定義一個3D的嵌入邊框，效果取決于邊界的顔色值
outset 定義一個3D的突出邊框，效果取決于邊界的顔色值

簡寫方法：border：width style color；

css3的邊框樣式：

border-color 邊框顔色

border-color：transparent；透明邊框

border-image 邊框圖檔

border-image-source：指定border的背景圖的url

border-image-slice：設定圖檔如何切割的屬性，非定位

border-image-slice：上下左右

border-image-width：定義border-image的顯示區域

border-image-repeat：repeat有三個值選擇。

stretch|repeat|round：拉伸|重複|平鋪，其中stretch是預設值

box-shadow：陰影效果書本P19

border-radius：圓角邊框

border-radius：1~4 length |% / 1~4 length |%；

1~4：設定1~4個值。
length：設定對象的圓角半徑長度，不可以是負值。
|%表示可以寫成百分比
“/”前有值，表示水準半徑；後有值，表示垂直半徑。後無值，表示水準半徑和垂直半徑相等。

margin 外邊距

margin: 0 auto; 水準居中

margin：上下左右；

padding 内邊距

padding：上下左右；

二、浮動

利用浮動将多個<div>放置在同一行

解決高度坍塌的辦法：

清除浮動：clear

給父元素内部添加一個空的<div>元素，設定：clear：both

值	描述
left	在左側不允許浮動
right	在後側不允許浮動
both	在左右兩側均不允許浮動元素
none	預設值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承clear屬性的值

利用僞類：：after

利用僞類：：after來清除浮動，跟跟上面的添加一個空元素來解決浮動是差不多的意思，但是不會憑空添加無意義元素，而是通過僞類的方式。

例：在父元素（.container）中直接添加css樣式（.clearfix）
```
   <div class="container clearfix">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>      
```
解決高度坍塌代碼（萬能代碼，直接拿去用就好）
```
.container::after {
    content: "";
    display: block;
    clear: both；
}      
```

三、定位

主要目的：移動位置

定位模式	是否脫标占位置	是否可以邊偏移	移動位置基準
靜态定位 static	不脫标，正常模式	不可以	正常模式
相對定位 revative	不脫标，占有位置	可以	相對于自身位置的移動
絕對定位 absolute	完全脫标，不占有位置	可以	相對于定位父級移動位置
固定定位 fixed	完全脫标	可以	相對于浏覽器移動位置
粘滞定位 sticky

相對定位 relative

相對定位的特點： 1.元素開啟相對定位以後如果不設定偏移量(offset) 元素不會發生任何變化通過偏移量設定元素的位置: top:定位元素和定位位置上邊的距離 bottom:定位元素和定位位置下邊的距離 left:定位元素和定位位置左邊的距離 right:定位元素和定位位置右邊的距離 2.相對定位是參照與元素在文檔流中的位置進行定位的 3.相對定位會提升元素的層級 4.相對定位不會使元素脫離文檔流 5.相對定位不會改變元素的性質塊還是塊行内還是行内

絕對定位 absolute

絕對定位特點: 1.開啟絕對定位後如果不設定偏移量元素位置不會發生變化 2.開啟絕對定位後元素會從文檔流中脫離 3.絕對定位會改變元素的性質，行内變成塊，塊的寬高被内容撐開 4.絕對定位會使元素提升層級 5.絕對定位是相對于其包含塊進行定位的

包含塊(containing block): 正常情況下包含塊就是離目前元素最近的祖先塊元素

絕對定位的包含塊：

離它最近的開啟定位的祖先元素如果所有的祖先元素都沒有開啟定位則相對于根元素進行定位 html(根元素，初始包含塊)

固定定位 fixed

固定定位也是一種絕對定位是以固定定位的大部分特點和絕對定位一樣
唯一不同的是固定定位永遠參照于浏覽器的視口(浏覽器可視視窗)進行定位
固定定位的元素不會随滾動條滾動上去而是跟随可視視窗的移動而移動

粘滞定位 sticky

粘滞定位的特點和相對定位基本一樣
粘滞定位可以在元素到達某個位置時固定

元素層級

對于開啟定位的元素，可以通過z-index屬性來指定元素的層級
z-index需要一個整數作為參數，值越大的元素的層級越高

CSS三大樣式