读后总结--精通css高级web标准解决方案（第二版）

2016-07-04 13:29:00

为啥读这本书

现在前端圈子过于浮躁，掌握基础无疑比掌握一个js框架重要
css怎么都能写出来，但是要写的好写得快还得多读书
css魔法推荐的，读完这个读读css揭秘
当然，根本原因还是觉得自己掌握不好

开始总结吧~

一. 基础知识

经过上世纪没有 css的痛苦时的混沌时期，人们开始了进步之路
1.语义化标签：提高可读性和更合适默认样式
2.设置ID和类名：上一步的加强，同时也为样式提供钩子（hook）
3.如何分配ID和类名：保持与表现方式无关，应该根据“他们是什么”，而不是“它们外观如何命名”
4.选择ID还是类名：类应该应用于概念上相似的元素，这些元素可以出现在同一个页面上的多个位置，而ID应该应用于不同的唯一的元素
5.不应该乱用类名：这样会导致文档增加很多无意义的类，可以结合后代选择器+标签选择器的形式避免
6.删除不必要的div：比如ul外套div是完全没有必要的
7.css版本

版本时间特点
css1 1996 字体颜色外边距等
css2 1998 增加浮动，等位以及更高级的选择器
css2.1 2002 修正上一个版本错误，精确的描述css的浏览器实现
css3
8.html版本

版本时间特点
html4.01 1999
xhtml1.0 2000 4.01的xml版本，语法严格按照xml格式
html5
xhtml2 流产
9.文档类型：通过读取doctype来了解试用哪个文档类型定义（DTD），由此知道使用html哪个版本，并添加有效性验证
10.浏览器呈现模式：标准模式、混杂模式（向后兼容，但会导致意想不到的bug）、几乎标准模式
11.DOCTYPE切换对应的呈现模式：详情可查看https://hsivonen.fi/doctype/

二. css选择器

1.常用选择器（现代浏览器制霸）：标签选择器，后代选择器，ID选择器，类选择器，通用选择器
2.伪类选择器：根据文档结构之外的其他条件对元素应用样式

:link和:visited称为链接伪类，只能应用于锚元素
:hover、:active、:focus称为动态伪类，上可以应用于任何元素
:hover、:active,IE6只能应用于锚链接:focus完全忽略
:active、:focus,IE7完全忽略但:hover正常使用
3.高级选择器：IE6不支持，但是不会导致css报错，会忽略。请记住，对于重要功能或站点功能避免使用（不考虑兼容老浏览器除外）

子选择器（>）、相邻选择器（+）：IE7支持，但html元素之间不能有注释
属性选择器

4.css使用优先级：用户!important>作者!important>作者>用户>浏览器默认
5.选择器使用优先级：所有选择器基数相加最高者显示

内联样式： 1000
ID选择器： 100
类、伪类、属性选择器： 10
标签选择器、伪标签选择器： 1
6.继承：有的css属性会继承
7.@import：这种方法可以引用css文件，但是会导致文档加载缓慢，不建议使用
8.注释：/ /主要用于分割css结构
9.css结构分割：作者提倡使用单一css，不敢苟同，可使用scss等编译工具来优化编码（不过写这本书时候没有），但css结构分割时必须的，以免结构混乱
10.优化样式表：删除注释，删除无用空格换行，开启gzip压缩

三. 盒模型

1.概述：页面上每个元素被看做一个矩形框，这个框由元素的内容（content）、内边距（padding）、边框（boder）和外边框（margin）组成。此外，css2.1增加outline属性（IE7以下不支持），与border属性不同，outline绘制在元素框之上，所以不影响元素的大小或定位
2.标准盒模型宽度：盒子宽度 = contentWidth + padding(Left + Right) + boder(Left + Right) + margin(Left + Right)，即如果设置元素宽度表面只设置content宽度
3.IE盒模型：盒子宽度 = 设置元素的宽度，即padding，boder，margin都从盒子内算起，content占剩下部分（其实挺科学的不是）
4.box-sizing:css3的这一属性可以指定盒模型为标准盒模型还是IE盒模型
5.外边距叠加：当两个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者，另外，行内框、浮动框或绝对定位框之间的外边距不会叠加。
6.定位概述：

名称属性例特点
块框（块级元素） display:block; p、h1、div 一般从上到下一个一个排列
行内框（内联元素） display:inline; a、span 水平排列，可使用垂直内边距、边框、外边距，但不能使用水平内边距、边框、外边距；修改高度唯一方法是修改行高
7.display:inline-block;css2.1新属性（>=IE8）将块级元素像行内元素显示
8.匿名块框：将一些文本添加到一个块级元素的开头时，可以:first-line为元素指定样式

匿名块级元素块级元素

9.相对定位：相对定位的元素，它将出现在它所在位置，然后通过设置垂直或水平位置，让这个元素“相对于”他的起点移动。无论是否移动，元素仍然占据原来的空间。
10.绝对定位：

绝对定位使元素的位置与文档流无关，因此不占据空间。
绝对定位元素相对于距离它最近的那个已定位的祖先元素确定。如果元素没有已定位元素，那么就相对于画布或html元素
z-index会控制这些框的叠放次序。
IE6bug:相对于的相对定位框的右边或下面时，相对定位框需要设定尺寸，要不然会相对于画布

11.浮动

浮动的框可以左右移动，知道它的外边缘碰到包含框或另一个浮动块的边缘。
浮动框不再文档的普通流中，所以普通流中的块框表现的就像浮动框不存在一样
浮动框会让文本元素缩进环绕
阻止环绕可以为其使用clear属性（其原理是给文本内容足够且精确的高度）
父元素内部的子元素如果使用浮动会使得父元素高度塌陷
父元素高度塌陷和清除浮动的解决方法

.clearfix:after{content:'';display:table;clear:both}
.cleafix{zoom:1;}
或者
.clearfix:after{content:'';display:block;overflow:hidden;clear:both}
.cleafix{zoom:1;}