1.1 盒子模型
每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子：
● 寬度、高度：盒子本身具有寬度（width）和高度（height）
● 內(nèi)邊距：盒子里面的內(nèi)容到盒子邊框之間的距離即內(nèi)邊距（padding）
● 邊框：盒子本身有邊框（border）
● 外邊距：盒子邊框外和其他盒子之間，元素與元素之間的距離，即外邊距（margin）
-
外邊距樣式
| 屬性名 | 含義 |
|---|---|
| margin-top | 上外邊距寬度 |
| margin-right | 右外邊距寬度 |
| margin-bottom | 下外邊距寬度 |
| margin-left | 左邊距寬度 |
| margin | 四個(gè)邊外邊距寬度（上、右、下、左） |
-
外框樣式
| 屬性：border-width（邊框?qū)挾龋?/th> | 含義 |
|---|---|
| border-top-width | 上邊框厚度 |
| border-right-width | 右邊框厚度 |
| border-bottom-width | 下邊框厚度 |
| border-left-width | 左邊框厚度 |
| border-width | 邊框厚度（上、右、下、左） |
| 屬性：border-color（邊框顏色） | 含義 |
|---|---|
| border-top-color | 上邊框顏色 |
| border-right-color | 右邊框顏色 |
| border-bottom-color | 下邊框顏色 |
| border-left-color | 左邊框顏色 |
| border-color | 邊框顏色（上、右、下、左） |
| 屬性：border-style（邊框樣式） | 含義 |
|---|---|
| border-top-style | 上邊框樣式 |
| border-right-style | 右邊框樣式 |
| border-bottom-style | 下邊框樣式 |
| border-left-style | 左邊框樣式 |
| border-style | 邊框樣式（上、右、下、左） |
-
內(nèi)邊距樣式
| 屬性 | 含義 |
|---|---|
| paddingr-top | 上內(nèi)邊距樣式 |
| padding-righ | 右內(nèi)邊距樣式 |
| padding-bottom | 下內(nèi)邊距樣式 |
| padding-left | 左內(nèi)邊距樣式 |
| padding | 內(nèi)邊距樣式（上、右、下、左） |
-
盒子模型尺寸
盒子模型總尺寸=border（兩個(gè)邊框?qū)挾龋? padding（兩個(gè)內(nèi)邊距寬度）+ 內(nèi)容寬度
盒子模型占用空間=margin（兩個(gè)外邊距寬度）+ 盒子模型總尺寸
1.2 元素默認(rèn)樣式于CSS重置
常用元素默認(rèn)樣式：
- 標(biāo)簽的margin為8px
- p標(biāo)簽的上下外邊距為16px
- h1標(biāo)簽的上下外邊距為21.440px
- ul標(biāo)簽的上下外邊距也為16px，左內(nèi)邊距也為40px
CSS重置：在實(shí)際開發(fā)中，為了兼容性，也為了開發(fā)者更好的設(shè)置自己想要的樣式，那么凡是瀏覽默認(rèn)的樣式，都不會(huì)使用，這就是CSS重置。
/********************** 這是一個(gè)最簡(jiǎn)單的CSS重置 **********************/
body,div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,span,a,img,form{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
1.3 元素分類
-
行級(jí)元素（內(nèi)聯(lián)元素）
獨(dú)占一行，可以指定寬高（不指定寬高，高度由內(nèi)容決定）
-
塊級(jí)元素
不獨(dú)占一行，默認(rèn)大小由內(nèi)容決定，不能指定寬高
-
行級(jí)塊元素（塊級(jí)內(nèi)聯(lián)元素）
<!-- 行級(jí)元素轉(zhuǎn)為行級(jí)塊元素 -->
<style>
span{
background-color: aqua;
border: 1px solid black;
width: 100px;
height: 100px;
/* 轉(zhuǎn)為行級(jí)塊元素 */
display: inline-block;
}
</style>
<body>
<span>這是span標(biāo)簽</span>
<span>這是span標(biāo)簽</span>
<span>這是span標(biāo)簽</span>
</body>
1.4 塊狀元素與內(nèi)聯(lián)元素的盒子模型
- 內(nèi)聯(lián)元素從左到右橫向排列，到最右端自動(dòng)折行，即不獨(dú)占一行 塊級(jí)以塊狀顯現(xiàn)，并和同級(jí)塊依次垂直排列，左右撐滿，即獨(dú)占一行。
- 塊級(jí)元素可以包含內(nèi)聯(lián)元素和塊級(jí)元素(P標(biāo)簽不能包含P標(biāo)簽)。 但內(nèi)聯(lián)元素不能包含塊級(jí)元素。
- 內(nèi)聯(lián)元素與塊級(jí)元素屬性的不同，還主要體現(xiàn)在盒模型屬性上。
- 內(nèi)聯(lián)元素它的寬度和高度是自動(dòng)的、也就是由內(nèi)容撐開的。因此設(shè)置width無效，height無效。但可以設(shè)置line-height。
- 內(nèi)聯(lián)元素的border無效，margin上下無效，padding上下無效。也就是padding和margin的left和right是可以設(shè)置的 。
- img比較特殊，它的border，margin，padding是有效的。
1.5 顯示與隱藏
display樣式有兩個(gè)功能：控制元素的顯示和隱藏；塊級(jí)元素與行級(jí)（內(nèi)聯(lián)）元素的轉(zhuǎn)變
| 值 | 說明 |
|---|---|
| block | 塊級(jí)元素的默認(rèn)值，元素會(huì)被顯示為塊級(jí)元素，該元素前后會(huì)帶有換行符 |
| inline | 內(nèi)聯(lián)元素的默認(rèn)值。元素會(huì)被顯示為內(nèi)聯(lián)元素，該元素前后沒有換行符 |
| none | 設(shè)置元素不會(huì)被顯示(被隱藏的對(duì)元素象不保留物理空間) |
| inline-block | 指定對(duì)象為內(nèi)聯(lián)塊元素(具有寬度高度，又具有同行特性)。. |
實(shí)際上，瀏覽器中就有默認(rèn)的天生inline-block元素，既擁有內(nèi)在尺寸，可設(shè)置高寬，而且也不會(huì)自動(dòng)換行。<input>、<img>、<button>、<textarea>、<label>
1.6 內(nèi)容溢出處理
如果塊的尺寸是固定的，而內(nèi)容卻有可能超出其尺寸時(shí)，可以使用overflow。
overflow屬性：設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定的高度或?qū)挾葧r(shí)如何處理內(nèi)容。
| 值 | 說明 |
|---|---|
| visible | 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在盒子之外 |
| hidden | 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的 |
| auto | 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容 |
1.7 新盒子模型
CSS3之后新增了一種盒子模型，可以說是border-box型盒子，即寬和高為邊框，我們通常稱為邊框盒子。邊框盒子的總體尺寸不會(huì)受到邊框、或內(nèi)邊距的影響，總體尺寸始終等于width與height的設(shè)置。
可以使用box-sizing屬性來設(shè)置盒子模型類型，此屬性值有兩個(gè)：
border-box：邊框盒子
content-box：內(nèi)容盒子（默認(rèn)）
div{
width: 200px;
height: 200px;
/*值有兩個(gè)： border-box：邊框盒子； content-box：內(nèi)容盒子（默認(rèn)）*/
box-sizing: border-box;
padding: 30px;
background-color: orange;
border: solid 30px blue;
margin: 50px;
}
/*使用了邊框盒子，就可以任意設(shè)置內(nèi)邊距、邊框了，而且不用擔(dān)心會(huì)改變盒子的總體尺寸。*/
2.1 元素定位
為了實(shí)現(xiàn)網(wǎng)頁整體布局，我們先要知道，一個(gè)元素，是如何定位到頁面上的某個(gè)位置的，這就是元素定位。
元素定位有四種，可以使用position樣式來設(shè)置元素定位，所以此屬性值有四種：
- static：靜態(tài)定位（默認(rèn)）。依據(jù)文檔流定位。
- relative：相對(duì)定位。以自身為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），不脫離文檔流。
- absolute：絕對(duì)定位。以父元素為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），脫離文檔流。
- fixed：固定定位。以瀏覽器窗口為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），脫離文檔流。
-
static靜態(tài)定位（文檔流定位）
- 將頁面上的元素，按照html的書寫順序，從上到下，從左到右，依次排列。
- 內(nèi)聯(lián)元素不獨(dú)占一行，塊級(jí)元素獨(dú)占一行。
-
relative相對(duì)定位
- 以自身為基準(zhǔn)定位。
- 不脫離文檔流。也就是說：相對(duì)定位元素仍然會(huì)被文檔流中的其它元素所影響。
- 根據(jù)坐標(biāo)定位到新位置之后，并不回收原位置空間。
-
absolute絕對(duì)定位
- 脫離文檔流。也就是說：絕對(duì)定位元素將不在被文檔流中的其它元素所影響。
- 根據(jù)坐標(biāo)定位到新位置之后，原位置空間會(huì)被回收。
- 如果父元素也為relative或absolute定位，那么就以父元素為基準(zhǔn)。
- 如果父元素不是relative定位，也不是absolute定位，那么一律以body為基準(zhǔn)。
-
fixed固定定位
元素始終固定在某個(gè)坐標(biāo)位置，body以及body中的任何元素都不會(huì)對(duì)其產(chǎn)生任何影響。
2.2 z-index樣式
z-index解決元素之間如何重疊的問題，z-index樣式的值是一個(gè)整形數(shù)，就表示元素所在的層級(jí)。較大的重疊元素會(huì)覆蓋較小的元素
<style>
.one{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top:0;
z-index: 2;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 100px;
top:100px;
z-index: 1;
}
</style>
<div class="one"></div>
<div class="two"></div>
2.3 彈性布局
display:flex /*flex是flexible box的縮寫*/
一個(gè)元素的display屬性值設(shè)為flex，那么這個(gè)元素中的子元素，就會(huì)遵循彈性布局的規(guī)則。
-
flex-direction樣式
flex-direction屬性就是用來設(shè)置主軸方向的。
flex-direction:row /*子元素沿主軸方向排列，也就是水平方向。 row為默認(rèn)值*/
flex-direction:column /*子元素沿側(cè)軸方向排列，也就是垂直方向。*/
-
flex-wrap樣式
由于彈性布局中的子元素能自動(dòng)伸縮，所以，當(dāng)父容器此次小于子元素整體尺寸時(shí)，子元素不會(huì)自動(dòng)換行，而是自動(dòng)收縮。
body{
display: flex;
}
如果想要讓子元素自動(dòng)換行，可以使用flex-wrap:wrap
body{
display: flex;
flex-wrap: wrap; /*當(dāng)彈性布局容器尺寸小于所以子元素尺寸時(shí)，子元素會(huì)自動(dòng)換行*/
}
-
justify-content樣式
以主軸方向?yàn)槔鹤釉厮椒较蚺帕泻螅J(rèn)依次靠左排列。如果想讓子元素居中、居右等，那么就可以設(shè)置justify-content樣式。值有五種：
- flex-start（默認(rèn)）：左對(duì)齊。
- flex-end：右對(duì)齊。
- center：居中。
- space-between：兩端對(duì)齊，子元素之間間距都相等。
- space-around：每個(gè)子元素兩側(cè)的間距相等。所以子元素之間間距比子元素到邊框 間距大一倍。
body{
display: flex;
justify-content: space-between; /*兩端對(duì)齊，子元素之間間距都相等。*/
}
-
align-items與align-content樣式
以主軸方向?yàn)槔鹤釉厮椒较蚺帕泻螅绻胱屪釉卮怪本又?，那么就可以設(shè)置align-items樣式。
常用值有三種：flex-start(默認(rèn)):上對(duì)齊，flex-end:下對(duì)齊，center:居中
在彈性盒子中，子元素側(cè)軸對(duì)齊方式可以使用align-items或align-content：
align-items對(duì)單行和多行都有效，align-content對(duì)單行無效。
在多行中，align-items讓每一行都在各自范圍內(nèi)垂直居中。 align-content將多行作為一個(gè)整體，然后居中。
html,body{
height: 100%; /*html與body的高度默認(rèn)為0，所以要設(shè)置高度*/
}
body{
display: flex;
flex-wrap: wrap; /*如果允許換行，那么換行后，多行元素中的每一行也會(huì)垂直居中*/
justify-content: center;
align-items: center; /*不論是一行，還是多行，都會(huì)垂直居中*/
}
-
flex樣式
如果想讓每個(gè)子元素所占空間不一致，那么可以使用flex給子元素分配空間。 使用flex時(shí)要注意一下兩點(diǎn)：
- flex樣式是設(shè)置在子元素上的。
- 如果設(shè)置了flex，那就說明要給子元素按比例分配空間，因此width與height就失效了。
偶的的（示例）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{
height: 100%;
}
body{
display: flex;
}
.son{
width: 100px;
height: 100px;
border: solid 2px #f90;
background-color: yellow;
}
</style>
</head>
<body>
<div class="son" style="flex:1;">1</div>
<div class="son" style="flex:1;">2</div>
<div class="son" style="flex:2;">3</div>
<div class="son" style="flex:2;">3</div>
</body>
</html>
