>### A.今天學什么？
#### 1.`css`文本
- ##### 1.1文本修飾介紹
- color: ; 設置顏色 十六進制 RGB 顏色英文單詞 等
- text-align: ; 設置文本對齊方式 left | center | right
- text-decoration: ; 文本修飾 underline | line-through | overline |none 分別為：下劃線 中劃線 上劃線 無
- text-indent: ; 文本縮進，1em = 1 font-size 大小，中文文本常用
- text-transform: ; 文本轉換 lowercase | uppercase | capitalize 分別為：全文小寫，全文大寫，首字母大寫
```
// html
<p class="one">hello world</p>
// css pdding 與 margin 傳參方式相同
div{
width: 100px;
height: 100px;
background-color: red;
/* margin: 100px;
只傳一個參數，四個方向都發生改變
*/
/*margin: 100px;*/
/* margin: 100px 200px;
只傳2個參數，第一個參數為上下，第二個參數為左右
*/
/*margin: 100px 200px;*/
/* margin: 100px 200px 300px;
傳三個參數 則 第一個為 上，第二個為左右，第三個為下
*/
/*margin: 100px 200px 300px;*/
/* margin: 100px 200px 300px 400px;
傳4個參數，則按照順時針方向，依次為 上 右 下 左
*/
margin: 100px 200px 300px 400px;
}
```
#### 2.`css`字體
- ##### 2.1字體修飾介紹
- font-family: ; 設置字體 微軟雅黑 宋體等
- font-size: ; 設置字體大小 單位px
- font-style: ; 設置字體斜體 傾斜 正常等
- font-weight: ; 設置字體權重 可以加粗字體 1-900范圍
- font-height: ; 設置字體行高，一般font合用 不單寫
```
// html
<p class="one">hello world</p>
// css
.one{
/* font-family
設置字體，可以設置多個，前面的無效會自動使用后面的 */
font-family: -apple-system,PingFang SC,'Microsoft YaHei';
/* font-size
設置字體大小
*/
/*font-size: 30px;*/
/* 字體樣式 normal|italic */
font-style: normal;
/* font-weight 設置字體權重取數值100-900 bold|initial */
font-weight: initial;
/* font-height 行高 可使用其將字體垂直居中 */
/* 一般合起來寫 16px為字體大小 32px為行高 */
font: 16px/32px pink;
}
```
#### 3.`css`列表
- ##### 3.1列表`ul-li`修飾介紹
- list-style: none; 去除列表默認樣式
- list-style-type: ; 列表中li之前的圖標樣式 disc | square ，實心圓與正方形
- list-style-image: ; 可以將li前的樣式改為指定圖片
```
// html
<ul class="one">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
// css
/* list-style: none;
去除列表樣式
*/
.one{
/* list-style-type 列表樣式
disc 實心圓 默認
square 正方形
*/
/*list-style-type: square;*/
/* list-style-image
將li前的樣式改為圖片 */
list-style-image: url("images/icon4.png");
}
```
#### 4.`css`邊框
- ##### 4.1邊框修飾介紹
- border: 1px #333 solid; 粗細 顏色 實線solid或者虛線dashed
- 可以使用top、left、right、bottom來進行單面設置邊框
```
// html
<div class="one"></div>
// css
.one{
/* 邊框 border 粗細 顏色 樣式
樣式分:solid 實線 dashed虛線
*/
border: 1px #333 solid;
}
```
#### 5.`css`表格
- ##### 5.1表格介紹
- table -- 表格定義
- thead -- 定義表格的表頭
- tbody -- 定義表格的主體
- tr -- 定義表格的行
- th -- 表頭單元格
- td -- 標準單元格
- ##### 5.2表格修飾介紹
- border-collapse: ; collapse單元格合并
- 表格內部邊框通過th、td的border設置
- colspan 用于設置水平合并幾個單元格，如果主體有3個標準單元格，表頭想要合并3個單元格，則在th中樣式 colspan="3"
- rowspan 用于設置垂直合并幾個單元格，使用rowspan時，不可以設置thead和tbody，因為此時表頭為rowspan垂直合并的單元格
- 有間隔的表格，在表格與表格之間加一個tr，再給一個高度即可
```
// html
<table class="one">
<thead>
<tr>
<th>手機</th>
<th>商城</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="">小米</td>
<td>小米商城</td>
</tr>
<tr>
<td>蘋果</td>
<td>亞馬遜</td>
</tr>
<tr>
<td>華為</td>
<td>天貓</td>
</tr>
</tbody>
</table>
// css
.one{
width: 500px;
/* 邊框折疊，collapse則將所有邊框合并為一條 */
border-collapse: collapse;
line-height: 30px;
text-align: center;
}
.one th,.one td{
border: 1px #333 solid;
}
```
#### 6.`css`輪廓和透明度and盒子尺寸
- ##### 6.1輪廓
- outline: ; 輪廓不會增加盒子的寬度，其余用法與border相同
- outline: none; input框不使用outline則點擊不會變色
```
// html
<div class="one"></div>
<input class="two" type="text">
// css
.one{
/* 輪廓不會增加盒子的寬度，其余用法與border相同 */
width: 100px;
height: 100px;
outline: 1px #333 solid;
}
.two{
/* input框不使用outline則點擊不會變色 */
outline: none;
}
```
- ##### 6.2透明度
- opacity 設置透明度 從1-0，依次變得更透明
```
// html
<div class="one">
<div class="two"></div>
</div>
// css
.one{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.5;
}
.two{
width: 100px;
height: 100px;
background-color: #333;
}
```
- ##### 6.3盒子尺寸
- box-sizing: ; 默認值content-box：邊框和內邊距增加寬高；設置為border-box：border和padding不增加寬高。
```
// html
<div class="one"></div>
// css
/*
當盒子模型的
box-sizing: border-box;
默認為content-box
設置border，padding，它的寬高不會發生改變
*/
.one{
width: 100px;
height: 100px;
background-color: red;
box-sizing: border-box;
border-right: 5px #333 solid;
padding: 5px;
}
```
#### 7.浮動
- ##### 7.1浮動與其相關屬性
- float: ; 可以設定浮動方向 left | right | top 等等
- clear: ; 該屬性規定元素的哪一側不允許其他浮動元素。left|right|both|none|inherit，both兩邊都不允許出現浮動元素，inherit，從父類繼承。
- ##### 7.2浮動的特性
```
// html
<div class="parent">
<div class="child"></div>
<div class="child2"></div>
</div>
// css
.parent{
width: 200px;
background-color: red;
}
.child{
width: 100px;
height: 50px;
background-color: yellow;
/* 設置浮動后，發現父元素不見了，高度坍塌了
這是因為浮動之后，.child脫離文檔流，父元素無法繼承子元素的高度
*/
float: left;
}
.child2{
/* 可以看到，孩子1沒有浮動的時候，孩子1在上，孩子2在下
孩子1浮動后，孩子2擠上去了，如果孩子2不想受到孩子1浮動的影響
則可以使用clear:both;清除浮動的影響
*/
clear: both;
width: 150px;
height: 150px;
background-color: green;
}
```
- ##### 7.2浮動的清除
- 方法1：overflow: hidden;
- 方法2：再設置一個子元素，設置其屬性clear: both;
- 方法3：使用 :after{content: "";display: table;clear: both;}，類似于方法2，但是不需要重新建一個子元素，更方便。
```
// html
<div class="parent">
<div class="child"></div>
<div class="child2"></div>
</div>
// css
.parent{
/* 子元素浮動，想要父元素高度不坍塌 */
/* 方法1 overflow:hidden
overflow 屬性規定當內容溢出元素框時發生的事情。
hidden:內容會被修剪，并且其余內容是不可見的。
并且，還可以清除子元素的浮動，因為子元素雖然浮動了，但還是其子元素
所以會將沒有溢出的內容顯示出來，也就清除了浮動
*/
width: 300px;
background-color: red;
}
.child{
width: 100px;
height: 50px;
background-color: yellow;
float: left;
}
/* 方法2：再加一個子元素，使用clear: both; */
.child2{
clear: both;
}
/* 方法3：最常用方法 */
.parent:after{
content: "";
display: table;
clear: both;
}
```
#### 8.定位
- ##### 8.1相對定位
- postion: relative; 相對定位--即元素原先正常存在的位置。元素所占據的文檔流的位置不變，元素本身相對文檔流的位置進行偏移。
- ##### 8.2絕對定位
- postion: absolute; 絕對定位--相對于設置了定位的父級元素定位。相對于上一個設置了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位
```
// html
<div class="parent">
<div class="child"></div>
</div>
<div class="content"></div>
// css
.parent{
width: 200px;
height: 200px;
background-color: red;
/* 相對定位--即元素原先正常存在的位置
元素所占據的文檔流的位置不變，
元素本身相對文檔流的位置進行偏移
*/
position: relative;
left: 200px;
top: 200px;
}
.child{
width: 100px;
height: 100px;
background-color: yellow;
/* 絕對定位--相對于設置了定位的父級元素定位
相對于上一個設置了相對或者絕對或者固定定位的父級元素來進行定位，
如果找不到，則相對于body元素進行定位
*/
position: absolute;
left: 50px;
top: 50px;
}
/* 可以發現，.parent元素相對定位移動后，自己原先的文檔流依然存在，元素占據的文檔流不變
甚至2個div看上去在同一行，這是因為相對定位的元素文檔流不變，自身偏移不會影響其他元素
的文檔流
*/
.content{
width: 100px;
height: 100px;
background-color: #333333;
}
```
- ##### 8.3利用定位垂直居中的幾種方法
- 1.將top left設為50%，margin-top為要定位的塊的高度的一半，margin-left同理
- 2.將top、left、bottom、right都設置為0，margin設置為auto。可以理解為四周的拉扯都一樣，自然就垂直+水平居中
```
// html
<div class="phone">
<img src="images/phone.png" alt="">
</div>
// css
*{margin: 0;padding: 0;}
html{
width: 100%;
height: 100%;
position: relative;
}
.phone img{
width: 618px;
height: 128px;
position: absolute;
/*top: 50%;*/
/*left: 50%;*/
/*margin-top: -64px;*/
/*margin-left: -309px;*/
/* 另一種方法 不需要計算margin */
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
```
- ##### 8.4固定定位
- position: fixed; 固定定位，相對于瀏覽器定位。元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對于瀏覽器窗口進行定位。
```
// html
<div class="one"></div>
// css
.one{
/* 固定定位，相對于瀏覽器定位
元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方
相對于瀏覽器窗口進行定位
*/
position: fixed;
right: 20px;
bottom: 100px;
width: 100px;
height: 100px;
background-color: darkturquoise;
}
```
- ##### 8.5`z-index`
- 設置元素的堆疊順序 功能對象：設置了定位的元素。類似于權重，誰大誰在上面
```
// html
<!-- 設置元素的堆疊順序 功能對象：設置了定位的元素
類似于權重，誰大誰在上面
-->
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
// css
.parent{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.one{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: 40;
}
.two{
width: 50px;
height: 50px;
background-color: green;
position: absolute;
z-index: 30;
}
.parent:hover .two{
/* 鼠標放在.parent元素上時，更改.two的z-index
使其在上面
*/
z-index: 41;
}
```
