------------恢復內容開始------------

1、盒模型：

CSS將頁面中的元素都設定為了一個矩形的盒子，佈局變為把不同的盒子放在不同的位置

組成：內容區content，內邊距padding，邊框border，外邊距margin

box-sizing用來設定盒子尺寸的計算方式（width，height），

預設值為content-box內容區，

border-box指整個盒子可見框（content、padding、margin）

1.1水平佈局：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內容區的寬度 （必須滿足）

等式若不成立，且無值設為auto，則自動調整margin-right

auto設定：其中width、margin-left、 maring-right可設定為auto

若width和一個margin設為auto，則width最大，margin為0

若將三個值都設定為auto，則外邊距都是0，寬度最大

若將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的值，即在父元素中水平居中

1 width:xxxpx;
2 margin:0 auto;

1.2垂直佈局：

子元素是在父元素的內容區中排列的， 如果子元素的大小超過了父元素，則子元素會從父元素中溢位 overflow 屬性來設定父元素如何處理溢位的子元素（可用於開啟BFC，非visible） 可選值： visible，預設值 子元素會從父元素中溢位，在父元素外部的位置顯示 hidden 溢位內容將會被裁剪不會顯示 scroll 生成兩個滾動條，通過滾動條來檢視完整的內容 auto 根據需要生成滾動條

1.3垂直外邊距的合併（摺疊）

相鄰的垂直方向外邊距會發生重疊現象，兄弟（一般不需處理）、父子、自己自己

只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

1.4 行內元素的盒模型

　　　　不支援設定width、height，可以設定padding、border、margin，但垂直方向的不會影響佈局

　　　　display用來顯示元素顯示的型別

　　　　　　inline 將元素設定為行內元素 block 將元素設定為塊元素，可以設定寬度和高度 inline-block 將元素設定為行內塊元素 行內塊，既可以設定寬度和高度又不會獨佔一行 table 將元素設定為一個表格 none 元素不在頁面中顯示 visibility 用來設定元素的顯示狀態 visible 預設值，元素在頁面中正常顯示 hidden 元素在頁面中隱藏 不顯示，但是依然佔據頁面的位置

1.5 輪廓和圓角（:hover常用）

box-shadow （水平偏移，垂直偏移，模糊半徑，陰影顏色）用來設定元素的陰影效果，陰影不會影響頁面佈局 outline 用來設定元素的輪廓線，用法和border一模一樣 border-radius: 用來設定圓角，若想設定成橢圓，只要半徑值足夠大即可

2、文件流：

網頁是一個多層的樣式，通過css為每一層設定樣式，使用者只能看到最上面一層；

最下面一層是文件流，即是網頁的基礎，建立的元素預設都在文件流排列；

對於我們元素主要有兩個狀態：在文件流、(脫離)文件流

在文件流特點

塊元素：

在頁面中獨佔一行；預設寬度是父元素全部（把父元素撐滿）；預設高度是被內容撐開（子元素）

行內元素：

不會獨佔頁面一行，只佔自身大小，預設自左向右，換行；預設高度和寬度都是被內容撐開

3、浮動(脫離文件流)

3.1、float屬性：

none 預設值；left 元素向左浮動；right 元素向右浮動

浮動元素預設不會從父元素中移出； 如果浮動元素的上邊是一個沒有浮動的塊元素，則浮動元素無法上移 浮動元素不會蓋住文字，文字會自動環繞在浮動元素的周圍　

3.2、脫離文件流特點

　　　　塊元素： 1、塊元素不在獨佔頁面的一行 2、脫離文件流以後，塊元素的寬度和高度預設都被內容撐開 行內元素： 行內元素脫離文件流以後會變成塊元素，特點和塊元素一樣 脫離文件流以後，不需要再區分塊和行內了

3.3、高度塌陷的問題

在浮動佈局中，父元素的高度預設是被子元素撐開的，子元素浮動以後，會完全脫離文件流，無法撐起父元素高度，導致父元素高度丟失； 父元素高度丟失以後，其下的元素會自動上移，導致佈局混亂 最終解決方案 clear屬性：清除浮動元素對當前元素所產生的影響（left，right，both） 　　　　　原理：設定清除浮動以後，瀏覽器會自動計算為元素新增一個上外邊距,以使其位置不受其他元素的影響 在被影響的元素定義一個class="clearfix"，同時解決外邊距摺疊問題

.clearfix::before,
.clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

　　

4、BFC

　　　　BFC(Block Formatting Context) 塊級格式化環境
開啟BFC會使該元素變成一個獨立的佈局區域

4.1、特點

　　　1.開啟BFC的元素不會被浮動元素所覆蓋 　　　2.開啟BFC的元素子元素和父元素外邊距不會重疊 　 　3.開啟BFC的元素可以包含浮動的子元素

4.2、開啟方式

　　　　1、設定元素的浮動（不推薦） 2、將元素設定為行內塊元素（不推薦） 3、將元素的overflow設定為一個非visible的值 常用的方式 ，元素設定 overflow:hidden 開啟其BFC 以使其可以包含浮動元素

------------恢復內容結束------------