第一章
一、样式
1、行间样式，代码不可维护，不推荐
2、内联样式，不可重用，不推荐
3、外联样式，可重用，可维护，推荐 <link rel="stylesheet" href="...css" />
二、边框
1、组成：border: 1px [ solid | dashed |double ] red;
1.1 双实线的宽度用border- 4px; 设置
2、方向：border-[ top | bottom | left | right ]
3、组合用法：border-top-[ width | style | color ]
4、边框的形状：非矩形（倒三角、倒梯形……）
4.1 通过边框实现三角形
.angle{
0;
height: 0;
border: 10px solid #fff;
border-top-color: #ccc;
/*border: 1px solid red;/*只设置一个方向的边框不可实现*/
/*border-top: 10px solid black;*/
}
三、背景
1、背景和内容的区别：背景不占用容器宽高，不可选中；容会撑开容器宽高，可被选中；
2、常见背景样式：
2.1 background-color: red;
2.2 background-image: url(../img/1.jpg);
2.3 background-repeat: [ repeat | no-repeat | repeat-x | repeat-y ] 默认平铺整个容器
2.4 background-position: x y;
2.4.1 background-position: [ left | right | center ] [ top | bottom | center]
2.4.2 当第二个值没有的时候，默认yY轴居中
2.5 background-attachment: fixed（背景不随滚动条滚动，固定在浏览器可视区）| scroll（背景随着滚动条的滚动而滚动《要求背景够长》）
2.6 background-size: width height; //ie8不支持
2.6.1 background-size: 100px 50%;
2.6.2 background-size: [ cover(把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。)
| contain (把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。) ]
3、背景复合样式：不分属性书写顺序，通常按照颜色相关、图片相关、位置相关（包含是否滚动）
backgroun: red url(../img/1.jpg) no-repeat center top scroll;
四、文字
1、font-weight: [ normal | bold | bolder ];
2、font-style: italic; 斜体
3、font-size： 16px;
4、font-family: "微软雅黑" | "楷体" | .......
5、line-height 行高，当line-height=height，文字垂直居中
5.1 多行文字测量行高的方式：
5.1.1 确认文字大小，确认两行文字之间的大小
5.1.2 两行文字之间的大小除以2，就是每行文字的上下空隙的大小。当行高为奇数时，上小下大1px的原则
5.1.3 通过辅助线测量行高
6、文字复合样式：需要注意书写顺序
6.1 font: bold italic 26px/50px "楷体"; //26px/50px表示font-size/line-height
五、文本
1、color: red;
2、text-align: [ center | left | right ];
3、text-indent: 2em; （通常用em作为缩进字符单位）
4、text-decoration: [ none | underline ];
5、letter-space:10px; 字母间距（不区分中英文）
6、word-spacing: 10px; 单词间距（以空格为解析单位）
7、white-space: [ normal | nowrap ]; 强制不换行nowrap
8、测量文字大小时，从上到下的方式（文字是方的，宽高一致，但是宽中有一部分是空格《为了让文字与文字之间不会粘在一起》，所以文字大小以高为准）
8、空格大小：字体格式为宋体时，空格大小是当前文字大小的一半；字体格式不一样，空格大小不一样！
六、盒模型
1、padding：
1.1 设置padding之后会撑大容器内容，padding不包含在width里面
1.2 方向：顺时针 top right bottom left padding: 10px 20px 30px 40px;
1.3 padding-bottom 无效问题： 注意html文档流默认是从左往右，从上往下的。现在你的文字高度不够，达不到距底端10px的位置，所以只有上内边距起作用，下内边距没表现出其作用。 又比如当设置float:left，那么margin-left直接起作用，假如内部元素的宽度不够，那么margin-right也可能不会表现出作用。要margin-right起作用，就float:right，这时margin-left又不一定表现出作用了。 就像一个房间里的人，虽然规定了其同天花板的距离必须小于1米，但很可能这个规定没有起作用，就是这个道理。
2、margin：外边距
2.1 相邻盒模型，在相邻间隙中，都有margin的时候，虽然各有各的margin，但是最终显示是取大原则，选择大的margin作为两盒字的边距
2.2 margin问题
2.2.1 margin-top传递问题：父子级包含的时候，子级的margin-top会传递给父级，解决办法：给父级加上border
2.2.2 margin叠压问题，见2.1
2.2.3 margin-bottom 无效问题，有时候需要设置某块级元素在该父类的底部显示，但是此时设置margin-bottom:0; 却无效。--》
2.2.3.1 理解错了这个属性的含义，它指的是你所设置的元素的下外边距，但不代表它在父元素的底部，也不代表它的子元素都会在它的底部显示。 margin-bottom是指该元素与其后的兄弟节点之间的距离。
2.2.3.2 绝对定位然后设置bottom:0才有效。
2.2.3.3 如果目标元素下方没有其他同辈元素，为什么margin-bottom:0不代表它在父元素的底部？--》
不代表，举个例子：你有两个盒子要自上而下放置，如果给第一个盒子设置了margin-bottom:10px，那么第二个盒子会距离第一个盒子10px，如果设置为0，那就会紧挨着第一个（当然第二个的margin-top也是设为0时），margin-bottom是设置同级元素间的间隔，并不是设置它在父元素中的位置。
3、盒子的大小：( border + padding ) * 2 + width ( margin 不算 , 这里前提是左右对称 )
4、让元素在父级的底部显示：
法1. 使用bottom（以及top、left和right）属性，但这要求该节点的position属性是absolute（绝对定位），且其父节点的position属性为relative（相对定位），则该节点即可相对其父节点定位。
第二章
一、a标签
1、超链接
2、伪类 设置顺序：L V H A，防止冲突
2.1 :link 未访问过的链接的初始颜色
2.2 :visited 访问过后的颜色
2.3 :hover 鼠标移入（悬停）
2.4 :active 鼠标按下时的颜色
有两个div一个是#a,一个是#b，能通过#a:hover来改变#b的样式吗?
1、如果你#b元素是#a元素的子元素，可以直接通过 #a #b {...}
2、#a与#b是亲兄弟关系，有相同的父节点，且#b跟#a紧临，可以通过 #a + #b{..}来控制#b里面的元素样式；
注：加号（+）为：相邻同胞选择器。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
二、span标签：行内区分样式时使用。
三、常用标签
1、header：头部信息，注意合适的时候用合适的标签，全部用div--》用header等语义化标签代替
2、nav：导航
3、footer：底部信息
4、section：版块，用于划分页面上不同版块，或者文章不同章节。
5、article：页面中一套结构完整且独立的内容部分，例如论坛中某个帖子（包括楼主和所有评论），较少用。
6、aside：侧边栏、广告等侧边信息
7、time：用来表现时间或日期
8、h1~h6标题标签，最好一个页面只有一个h1标签，注意：H1标签涉及到SEO问题，类似于title
1、H1标签最好一个页面只用一次，不要一直用。H1可以用但不要泛滥，合理的使用H1标签可以给网站带来好的效果，而使用的不恰当会给网站带来不利影响，严重的甚至会导致K站。 2、H1标签中使用的关键词，应该是页面最主要的关键词或品牌词，并且应该是在网页标题中使用的关键词。 3、H1标签之间肯定是需要包含关键词的，但是这个关键词也是需要具有可读性和合理性，不要为了强调而把这个关键词加进去，而是因为这个关键词需要被强调才来加H1标签，注意先后。是先有关键词，然后给关键词加H1标签。 4.如果把H1标签加在LOGO图片，图片ALT信息上要加上网站名或品牌词，这样才能更加突出首页的关键词，不然给一个图片加H1，你觉得有什么效果？ 5.H1标签尽量靠近在html中的body标签，越近越好，以便让搜索引擎最快的找到主题。从上面的例子就可以发现H1标签都在body代码的最前面，为什么?因为搜索引擎的抓取就是从上而下来的，这样可以让H1标签强调的关键词最快被发现。 6.内容页H1标签一般都是用在内容的大标题，最好也是只用一次，不过有很多内容页也用了2次，一次用在LOGO或出现在网页最前面的主关键词，一次用在内容的大标题上。如果最前面没有主要的关键词，建议最好还是只用在大标题上一次。 7.当不想将H1标签用在LOGO上并且网页主要的关键词在后面的时候，如果还是想加H1标签并且想H1标签的关键词靠前，可以利用DIV+CSS布局来调整主关键词的位置，这样也不会影响页面效果。 8.不要总想着加H1标签，很多大网站也是没有用H1标签，像百度、新浪、爱站网等压根就没用H1标签，所以只要真真切切的为用户提供信息就可以了，至于是不是一定要用H1标签就不一定了。
9、p：段落
10、strong：强调，加粗
11、em：强调，斜体
12、ul li：列表（无序）；ol li：列表（有序）；dl dt dd：自定义列表（dt-自定义列表title；dd-自定义列表项）
13、mark：标记（黄色背景标记）
14、img：图片标签
四、CSS标签样式初始化（css reset）
1、书写原则：
1.1 用到什么标签就清除所用标签初始化样式，建议不要直接将所有标签全部加上清除样式代码
1.2 不要将所有标签设置成统一一致的reset，要按需分类设置。
2、浏览器都有默认样式，但凡是浏览器的默认样式，都不要使用！因为每个浏览器下标签的默认样式可能会出现不一致！
3、需要重置的样式：
3.1 盒模型相关的样式：border、margin、padding
3.2 标签特有的样式：ul>li ol>li
五、常用选择器
1、ID选择器，当前页面具有唯一性 #id
2、类（class）选择器，统一标签设置多个类，用空格分割 .class
3、标签选择器，选择当前页面所有该标签 标签名（div{……}）
4、群组选择器，用逗号隔开 p, h1, div{……}
5、包含选择器，用空格表示包含 div a{......}
6、通配符，不建议使用，原因：杀伤力强（影响范围广），性能差 *
7、css3特有的选择器：
7.1 > 这些是CSS3特有的选择器，A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代子元素。
六、选择器优先级
1、浏览器F12发现：
1.1 样式被中划线，说明样式被覆盖；
1.2 样式前面出现感叹号（！），说明样式写错了
2、行间样式（1000）>Id选择器（100）>class类选择器（10）>标签选择器（1）
第三章
一、块元素和行内元素
1、块元素特征：
1.1 默认独占一行 ，支持所有CSS命令
2、内联元素特征：
2.1 显示同排，内容撑开高度，不支持宽高，不支持上下margin（左右margin可以），代码换行被解析（代码换行，出现效果被浏览器解析，结果以空格形式出现）
3、块元素和内联元素的转换
3.1 display: [ inline | block | inline-block ];
3.2 display 只是样式修改，不会改变标签本质