和慕课网，w3school那些妖艳贱货完全不一样

html和css我大概学了3遍，第一次是在萌码，第二次是慕课网，最后一次是这本书，其中还看了一部分的w3school。

前面两次的学代码平台看似互动的界面，其实学习效果很差。。很多东西没有讲明白，比如css的布局，在前两个网站都是给几个例子让你跟着做，我当时又求快飞快的做完，然后过几天就什么都忘了。

这本书的CSS布局是精华部分，先从html的flow说起，然后讲float，position，果冻布局，表式布局。。。

下面是一些看书时记的笔记，细节部分怕忘了重新摘抄在这里：

1.target=“name”，name是窗口名字，_blank是一个特殊例子，意思是打开新窗口
2.一般使用id属性来当作锚，在a标签的href后面加上#id来寻找锚
3.<img>依然是空元素，因为image不是<img>的一部分，而是被<img>引用
4.CSS的PPI是96，就是每inch包含96像素
5.可以通过设置img的属性width和height来设置图片的尺寸，但是这个方法仍然会下载全尺寸大小的图片（建议使用thumbnail技术）
6.浏览器对<img>标签和其它标签有些不同，在载入页面的内容后才会根据img的src取回图片
7.font-size最常用的单位是关键字，比如xx-small, x-small, small medium….
8.可以把font-weight的值设置成100-900间的100的倍数
9.width属性专门用来指定盒子模型的content区域。盒子的真正宽度是左右padding，左右margin，左右border再加上content的width
10.width默认为auto，就是说它会自动填充到可以填充的区域
11.text-align将会调整块级元素内的所有行级元素
12.如果使用%和em，那么值是相对的。而如果你把line-height的值设为1，那么它会变成自身font-size的一倍，而不是父元素的font-size
13.可以为行级标签设置width，但是你看不到设置它们有什么用，除非你移动了它们的位置.除了<img>标签
14.伪类有5种状态：link, visited, hover, focus, active
15.cascade就是浏览器的决定，给定一组样式表和一组样式，哪一个样式会被使用
16.嵌套的block的margin发生折叠时，如果外层的元素有border，那么它们的margin不会碰到一起
17.每个设置了position位置的元素都有一个z-index，也就是z轴
18.默认position值是“static”
19.把border-spacing想象成一般元素的margin，还有border-collapse
20.vertical-align 来确认所有在table中的内容都垂直对齐，有top，middle，bottom
21.表式布局的关键是：display: table, table-row, table-cell。以及为cell设置的vertical-align
22.只有当元素使用absolute，fixed，relative才有Z轴。默认的“static”则没有Z轴
23.relative position取决于包含元素的标准流位置，然后再根据此位置做调整
24.行级元素，流的顺序是从左上到右下
25.如果用手机观看网页，手机浏览器会理解<aside>标签，并把它放在最下面而优先显示更重要的内容
26.<video> , controls, autoplay是布尔属性
27.<video>有 controls，autoplay，src，preload，poster，loop，width，height等属性
28.伪类 nth-child() 参数为odd even 2n 2n+1
29.于rowspan对应的是colspan，作用于<td>
30.列表属性：包括list-style-image，list-style-type，list-style-position
31.<select>下面的<option>不需要标明name属性
32.<fieldsets> <lengends>可以创建一个小块字段集合，增加可视化
33.在<select>中加入multiple这个布尔属性，选择框将会变成多选
34.pseudo-elements伪元素, p:first-letter, p:first-line
35.css属性选择器，基于属性的值来做选择 img[height="300"]
36.使用加号（+）选择CSS兄弟元素
37.CSS属性transition >过度时间 transform >变形


生词：
You betcha! 当然啦！