html中的在css中如何設置樣式：
列表
html的列表設置見：https://mp.csdn.net/console/editor/html/104262963
原來的type ==> list-style-type
- 無序列表的值和原來的一樣
- 有序列表不一樣了
- 整數： 1 ==> decimal
- 大寫英文字母： A ==> upper-alpha
- 小寫英文字母： a ==> lower-alpha
- 大寫羅馬數字： I ==> upper-roman
- 小寫羅馬數字： i ==> lower-roman
簡單來說，就是html形象表示，css用英文表示
表格
設置邊框要同時對table、標題（th）和列（td）設置
1.只設置table
2.只設置th
3.只設置tr
4.只設置td
所以，只有設置table、th、td才能達到我們想要的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,th,td{
border: 1px solid cadetblue;
}
</style>
</head>
<body>
<table>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>籍貫</th>
<tr>
<td>1</td>
<td>旗木卡卡西</td>
<td>27</td>
<td>木葉村</td>
</tr>
<tr>
<td>2</td>
<td>漩渦鳴人</td>
<td>12</td>
<td>木葉村</td>
</tr>
</table>
</body>
</html>
設置邊框的值：寬度（用像素表示） 樣式（實線、虛線。。）、顏色
樣式：
- 實線：solid
- 細虛線：dotted
- 粗虛線：dashed
- 雙層：double
【原來設置邊距是將table、th、td組合在一起，成爲一個完整的邊框，所以出現了兩層的效果，這裏再加double，實際就變成了四層】
設置文字水平分佈：text-align（見https://blog.csdn.net/qq_43935969/article/details/104311760）
設置文字垂直分佈：vertical-align（top、middle、bottom）
CSS模型（盒子模型）：
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- Content(內容) - 盒子的內容，顯示文本和圖像。
當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。.
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
300px (寬) + 50px (左 + 右填充) + 50px (左 + 右邊框) + 50px (左 + 右邊距) = 450px
設置邊框（同上border，只不過拆開來寫）：
邊框的寬度：border-width（可以用像素）
邊框的樣式：border-style
邊框的顏色：border-color
只設置單邊（寬度 樣式 顏色）：
- border-top
- border-right
- border-bottom
- border-left
margin
margin：上 右 下 左 同時設置（只寫一個的話，默認四個一樣）
寫三個的話，上 左右 下
寫兩個的話，上下 左右
單邊：
- margin-top
- margin-right'
- margin-bottom
- margin-left
水平居中：
margin：auto（相當於：auto auto auto auto）
margin：0 auto（相當於：0px auto 0px auto）
padding
同上
padding：上下左右
可以三個、兩個
還可以單邊
但是沒有auto
一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
background-color: darkcyan;
}
p#p1{
padding: 50px;
}
</style>
</head>
<body>
<p>天道酬勤，寧靜致遠</p>
<p id="p1">天道酬勤，寧靜致遠</p>
</body>
</html>
position
值：
（1）relative：相對定位元素會相對於它在正常流中的默認位置偏移。
所以除了他自己，別人都不會動，相當於有人給它佔着位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
height: 500px;
width: 300px;
background-color:aqua;
position: relative;
top: 50px;
left: 100px;
}
#div2{
height: 300px;
width: 500px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
（2）absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
所以，一開始兩個div都是從開始。
float
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
若想兩個div水平方向，兩個都需要設置float才行