朝花夕拾《精通CSS》三、对一些标签元素的使用
一、背景
翻出我4年前看的《精通CSS》一书，可惜当初没有整理读书笔记的习惯，最近又很少写前端，遂很多东西、知识点遗忘了，恰且现在 css 也有些变化和进步，遂一起打包整理，输出成几篇 blog 系列，以犒自己。
二、文字
1、字体类型
（1）字型
字型分 serif(有衬线) 和 sans-serif(无衬线)。
sans-serif 被认为是比 serif 更容易阅读的。
（2）第三方字体
@font-face 可引入第三方字体。
2、字体大小
font-size可以设置字体大小，单位有 %、px、em、rem。
(1) 各单位对比
| 单位 | 绝对值 | 相对值 | 相对于什么元素 |
|---|---|---|---|
| px | √ | N/A | |
| % | √ | 父元素 | |
| em | √ | 父元素 | |
| rem | √ | 根元素 ( html / body [html 比 body 优先级高] ) |
(2) 为什么推荐用 rem？
首先 px 是相对大小，万一想适配屏幕时去放缩所有元素的字体，就很不方便，所以 pass。
然后 % 和em都有个问题：相对于父元素，这样导致每个元素的参考系都不同，计算起来很不方便。
所以推荐用 rem。
(3) 怎么使用 rem？
<style>
body {
font-size: 62.5%;
/* 因为浏览器默认字体大小为16px，
所以 100% = 16px
所以 62.5% = 10px */
}
#div1 {
font-size: 1rem;
/* 1rem = 1 * 10px = 10px */
}
#div2 {
font-size: 2.5rem;
/* 2rem = 2.5 * 10px = 25px */
}
</style>
Q：为什么 body 上的 font-size 设置成了 62.5%，而不是其他值？
A：因为这样 rem 的 base 值就是 10px，有两个好处：
1、指定时很好计算。
2、若是小数会被转成整数 (如 1.5rem = 15px )，因为 font-size 不支持含小数的 px。
三、图像
1、颜色
CSS 里的颜色值有三种类型:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
2、图像
(1) <img> alt 和 title 的区别
alt 是当图片不存在时的替代文字，title是对图片的描述与进一步说明。
为了 SEO，最好两个都加上。
3、背景
(1) 属性
顺序如下：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
在用 background 简写时，顺序跟上面保持一致：
body {background:#ffffff url('img_tree.png') no-repeat scroll right top;}
(2) 背景所在定位
background-position: [横向] [纵向]
取值类型：
关键词：top/bottom、left/right、center
百分比：x%
数值：px、em 等
Q：为什么 百分比% 的规则定义的与众不同？
A：其实是为了照顾人们的直觉：
background-position: 0 0; //图片靠着左上角
background-position: 50% 50%; //图片水平垂直居中
background-position: 100% 100%; //图片靠着右下角
(3) 背景占据区域
1、background-origin， background-clip的取值：
border-box： content + padding + border
padding-box【默认】 ： content + padding
content-box：content
2、background-origin， background-clip的区别：
前者是移动，后者是切割 (基于 background-origin 的值 )。
(4) 添加多个背景
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
1、多张图片的属性用逗号隔开。
2、第一张图片显示在最顶端，以此类推。
四、链接
1、link 样式
请最好按照下面的顺序添加伪类，否则有些会失效。
(1) a:link 显示
(2) a:hover 悬停
(3) a:active 点时
(4) a:visited 点过
当键盘移动到链接上时，还会有 a:visited。
2、页内跳转 - #
<div id="main">
<a href="#target">click!</a>
<span>block——1</span>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<span id="target">block——2</span>
</div>
1、点击 a 标签即可跳转。
2、浏览器打开 url#target 即可自动跳转 (当前页面刷新不行)
五、表格
1、一个表格的范例
<table summary="三年二班2019期末考试 - 学生各科目成绩">
<caption>
三年二班2019期末考试
</caption>
<thead>
<tr>
<th colspan="3">学生各科目成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td scope="col">语文</td>
<td scope="col">数学</td>
</tr>
<tr>
<td scope="row">张三</td>
<td>78</td>
<td>80</td>
</tr>
<tr>
<td scope="row">李四</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td scope="row">王五</td>
<td>62</td>
<td>73</td>
</tr>
</tbody>
</table>
(1) summary 类似<img> 的 alt 属性。
(2) th/td的 scope 属性用来标识是列头还是行头。
2、table 的 合并 / 分隔 - border / collapse
以上面的 demo 为例：
(1) 合并（collapsed）
table, td ,th{
border: 1px solid black;
}
table{
width: 200px;
}
/* 下面为重点 */
table{
border-collapse: collapse;
}
(2) 分隔（separated）
table, td ,th{
border: 1px solid black;
}
table{
width: 200px;
}
/* 下面为重点 */
table{
border-collapse: separate;
border-spacing: 10px;
}
若 border-collapse: separate ，而省略 border-spacing，那 border-spacing 也是有默认值的且非0。( 0 则跟 border-collapse: collapse 一样了 )
3、各个 table 相关标签的对比
| 是否支持? | border | width/height | 是否符合盒模型 | margin | padding | text-align | vertical-align |
|---|---|---|---|---|---|---|---|
| table | √ | √ / √ | × | √ | √ | √ | × |
| caption | √ | √ / √ | √ | √ | √ | √（默认居中） | × |
| thead/tbody | × | × / × | N/A | × | × | √ | √ |
| tr | × | × / √ | √ | × | × | √ | √ |
| th/td | √ | √ / √ | √ | × | √ | √（默认居中） | √ |
唉，table 真的有太多坑了。
4、淘汰的 table 属性
(1) table 标签的 cellspacing/cellpadding 属性已被淘汰，请用border-spacing 和padding代替。
(2) 直接在 table 标签定义的 border=1不推荐使用，请在 CSS 里：
table, td ,th{
border: 1px solid black;
}
六、表单
1、一个表单的范例
<form accept-charset="utf-8" action="form_action.asp" method="post">
<fieldset>
<div>
<!-- 关联 label 的方法一 -->
<label for="name">Name:</label>
<input name="name" id="name" type="text" />
</div>
<div>
<!-- 关联 label 的方法二 -->
<label>
Email:
<input name="email" type="text" />
</label>
</div>
<button type="submit">submit</button>
</fieldset>
</form>
1、fieldset 周围会加上一个细线边框（哪怕没有 legend 标签），想去掉就把 border 属性设置为 none 。
2、input 元素 focus 时默认会有一个蓝色轮廓，outline: none 可以去掉。
