###01- 列表
- 无序列表 ul>li unorder list
- 清除列表前面的标识 list-sytle:none;
- 列表默认有外边框和内边距
###02- CSS选择器02
```
/* 1.ID选择器 id是唯一的; 配合js来操作*/
#three{
color:blue;
}
/* 2. strong标签 重要的内容 默认加粗*/
/* 并集选择器 组选择器 */
span,strong{ color:green; }
/* 3.伪类选择器 '作用在标签身上 改变状态'
鼠标悬浮: hover
a:hover{ color:orange; }
```
###03-选择器权重计算
-**层级选择器累加权重值**
- **权重较高会覆盖较低的**
- **权重相同时后写的会覆盖前面的**
选择器 | 权重值
---|---
1.标签 | 1
2.类 | 10
3.ID | 100
4.行内式 | 1000
5.!important |10000
**提升属性的权重**
###04- CSS常用属性
```
/* 1.文本对齐
left center right
text-align: left;
/* 2.首行缩进 默认大小16px*/
/* text-indent: 32px; */ /* em 文字的倍数 */ text-indent: 2em;
/* 3.是否斜体 normal*/
/* font-style: italic; */
/* 4.是否加粗 normal*/
font-weight: bold; font-size:10px; line-height: 20px; font-family: "microsoft yahei";
/* 连写 一定规则*/
/* 加粗 斜体 字体大小/行高 字体 */
font:normal italic 10px/20px "microsoft yahei";
```
###05-表格(table)基本使用
```
table:
tr row 行数td description 内容th head ;居中 加粗
合并边框
border-collapse: collapse;
跨列合并:
colspan 找到第几行的哪个内容, colspan="几列";多余的删除
跨行合并:
rowspan 找到第几行的那个内容, rowspan = "几行";多余的删除
```
###06-表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07-表格案例</title>
<style>
/* 设置整个表格 */
.table {
width: 708px;
height: 248px;
/* 边框合并 */
border-collapse: collapse;
/* 整个表格水平居中 */
margin: 0px auto;
}
.table td,.table th{
border: 1px solid black;
/* 表格中的文字缩进10px */
text-indent: 10px;
}
.table th{
/* 文字水平居左 */
text-align: left;
background-color: aquamarine;
/* line-height: 35px; */
height: 35px;
}
/* 设置装图片的 td */
.table .picture{
/* 清除装图片单元格的内容缩进 */
text-indent: 0px;
}
.picture img{
/* 浮动解决了 一行中文字默认以底部对齐 */
float: left;
}
</style>
</head>
<body>
<!-- table>(tr>td*5)*6 -->
<table class="table">
<tr>
<th colspan="5">基本情况</th>
</tr>
<tr>
<td width=15%>姓 名</td>
<td width=25%></td>
<td width=15%>性 别 </td>
<td width=25%></td>
<td rowspan="5" width=20% class="picture">
<img src="./images/programmer.jpg" alt="程序员">
</td>
</tr>
<tr>
<td>名 族</td>
<td></td>
<td>出生日期</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>健康情况</td>
<td></td>
</tr>
<tr>
<td>籍 贯</td>
<td></td>
<td>学 历 </td>
<td></td>
</tr>
<tr>
<td>电子信箱</td>
<td></td>
<td>联系电话</td>
<td></td>
</tr>
</table>
</body>
</html>
###07- 元素溢出
-**overflow:**
- visible 默认 超出可视
- hidden 超出隐藏 裁剪
- scroll 可滚动 不推荐使用
- auto 自动
###08- 盒子模型真实宽高
真实的宽 = 左边框'border-left' + 右边框'border-right' + 内容宽'width' + 左边内边距'padding-left' + 右边内边距'padding-right';
真实的高 = 上边框'border-top' + 下边框'border-right' + 内容高'height' + 顶部内边距'padding-top' + 底部内边距'padding-bottom';
来源：oschina
链接：https://my.oschina.net/u/4312837/blog/4874133