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才行