第二章 css选择器和良好的结构体
2.权重： 选择器种类对应权重
通配选择器
元素选择器、伪元素选择器
class选择器、伪类选择器、属性选择器
10
id选择器
100
行内样式
1000
！
1000+
tips:绝大多数情况避免使用!，在日后的多人开发中很容易覆盖别人写的样式。
3.属性的继承：
1.不可继承的：
css">display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before、unicode-bidi。2.所有元素都可以继承:
visibility和cursor。3.内联元素可继承的有：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。4.块状元素可继承的有：
text-indent和text-align。5.列表元素可继承的有：
list-style、list-style-type、list-style-position、list-style-image。6.表格元素可继承的有：
border-collapse。4.规划维护样式表： 设计代码的结构
为了便于维护样式表，最好将代码按照一定的逻辑分成几大块，你也可以像下面这样去构建你的代码结构。
辅助样式
页面结构
页面组件
覆盖 注释的一些功能性用法
tip：或许我们可以像下面一样，用一个样式表中用不到的特殊标识符放在注释前面，这样我们就可以根据注释的意义去直接快捷查找对应的代码区块，这对代码的重构和日后的维护都是大有帮助的。
第三章 可视化模型
本章的阅读会让你对网页常用的布局手段有更深的了解，同时你也会知道一些需要注意的点。
一、盒模型 1. 先来看看盒模型
众所周知，盒模型分为两种，标准盒模型和ie盒模型，我们来看看两者的区别。
1. 标准盒模型：
2. ie盒模型：
总结
- 平常我们对div写的width时，width=。
- 当对div设置box-=-box时，width=++。
- 方面和width是相似的，请自行分析。
2.外边距叠加问题
外边距叠加
同级元素外边距叠加情况
定义：垂直布局中，当上方有设置盒子-属性，下方盒子有设置-top属性时，两者的就会发生叠加。叠加规则：双方实际距离变为外边距较大的一方的数值。 图示：
父级元素和子级元素的叠加
定义：当一个没有边框或者内边距的父级元素有-top属性而其子元素也具有-top属性时，两者就会发生叠加。叠加规则：marin值会保留两者中较大的一方，并且-top效果是在父级元素上。个性解决方案：给父级元素加上或者（不提倡）。图示：
元素的顶外边距和底外边距叠加
定义：一个没有内边距和边框的==空元素==，它的顶外边距和底外边距也是可以发生叠加的，假设再碰到另一个有外边距的==空元素==，它们会继续叠加。上图：
通用的解决方案
这里只说一种简单的方法，还有其他方法可以自行谷歌（涉及了css2.1中的BFC规范等问题）
外边距叠加带来的意义
简单来说就是形成上下段落的等距分配布局，还是看图来的直接，上图！
二、布局方式
这里开始会正式开始讲解布局，因为是按照原作学习时的顺序走的，我们先来接触定位。
tips:定位虽然是最直接最有效的布局方式，但是这里我认为千万不要大量使用，定位的滥用应该会降低网页的性能。（我之前某处看到的…）
1. css中的三种定位机制
1. 普通流
2. 浮动流
3. 定位流
定位流又可以分为
绝对定位（）相对定位（）固定定位（fixed）
先来了解一个概念——“文档流模型”
默认情况下：你所构造的所有元素都是在二维平面上的，它们在一个面上，没有高低之分，属于一个维度。而当你使用了浮动流布局，定位流布局后，情况就会不一样了。这个时候会多一个维度，高度。也就是说它们会有高低之分，可以高的覆盖低的。从屏幕上看就是在原先的x、y轴上，多了一个z轴。z轴是指向程序员的。假设默认文档流在z轴的0点处，那么浮动的元素就会在1这个位置，定位的元素就会在2（这只是为了说明定位元素一般情况下高于浮动元素而假设的两个相对数值）。而它们的子元素会和它们高度平级，也就是被父元素拖起来，实际高度以父元素为基准。而因为实际的网络布局中情况远比现在所设想的复杂，所以会有一个z-index属性来控制相同的定位机制产生的高度一样的问题。
当然上面的说法只适合初步理解，具体的可以看第八章。
z-index区间是[-,]。xxx是因为不同浏览器的具体数值是不一样的。结合一张图片理解下文档流模型。
1.定位流 1. 绝对定位： 规则：以自己嵌套关系最少的父级（祖辈级）为参考点进行定位。条件：元素本身是绝对定位（），父级或祖辈级元素是定位流（任意一种定位都可以）。效果：脱离默认文档流，同层的定位元素可以横向排列，不再独占一行，并且不会发生叠加问题。 2. 相对定位： 规则：以自身现在的位置为参考点进行定位（）。条件：设置相对定位。效果：脱离默认文档流，自己原先的位置仍然被“占有”，相当于人过来了，影子留那里占着位置…不再独占一行，并且如果不设置位置信息，就会原地浮起，位置不变。（这个特性在一些情况下十分好用） 3. 固定定位： 规则：以浏览器可视窗口为参考进行定位（fixed）。条件：设置fixed（ie6下无效）。效果：因为相对于浏览器窗口定位，所以浏览时位置相对不会改变。
就像我所知道的，大量的定位流布局对性能会有影响，所以还有一种布局可以满足日常需要。
2.浮动流 条件：设置元素浮动。效果：脱离默认文档流，可以横向排版。问题：
引起父级容器高度塌陷默认比定位流高度低，可能被无意中遮挡住想显示的效果。解决方案：
如果被定位流挡住的话，可是使用z-index去调整层级关系父级容器高度塌陷，见下表。 清除浮动手段引起的新问题推荐指数
父级div定义高度
真正的需求中布局太死板，后续问题很多
1星
结尾处加空div标签 clear:both
html结构中增加了无意义的div，结构冗杂
2星
父级div定义 伪类:after 和 zoom
无发现，较完美的手段，兼容性好
5星
父级div定义 :
所有的子元素都不能超出父元素范围定位，不然会消失，这种情况下表现不好
4星
父级div定义 :auto
内部元素超过父元素时会出现滚动条
3星
父级div 也一起浮动
产生新的浮动
2星
父级div定义 :table
会产生各种问题，用这种古老的东西
0星
结尾处加 br标签 clear:both
类似第二种，br现在已经很少用了
0星
第四章 链接应用样式
多变的链接操作
一、链接的样式 1. 链接的颜色 css提供了：link、：、：hover、：focus、：，五种伪类去实现对链接颜色的控制。顺序：
a:link-> a:visited-> a:hover->a:focus->a:active
2.链接的样式 个性化链接可以通过伪类和背景图片满足代码：
a:hover {color:#666;text-decoration:none;background:url(img/a.jpg) repeat-x left bottom;
}已访问样式的设置
方法：利用：原因：如果不设置已访问样式，用户会不知道自己点过哪些网站，造成大量的回溯操作。跳转到页面指定位置处
可以通过给a标签的href属性设置#id，就可以跳转到id所在的元素位置。问题：如果网页过于复杂，用户无法第一时间找到跳转后想看到的地方。 解决方案：使用：代码如下：
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
style>
head>
<body><h1>这是标题h1><p><a href="#news1">跳转至内容 1a>p>
<p><a href="#news2">跳转至内容 2a>p><p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。p><p id="news1"><b>内容 1...b>p>
<p id="news2"><b>内容 2...b>p><p><b>注释：b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。p>body>
html>
凸显不同的链接
其实就是根据链接的网站主体的业务方向，给链接一个背景图片用以识别。
1.首先利用属性选择器给所有的外部链接添加一个识别图片
a[href^="http:"]{background:url(img/a,jpg) no repeat right bottom;padding-right:10px;
}
2.但是这样会选中使用绝对路径的内部链接（自己站点的链接），所以再做下面操作把内部链接的多余识别图像删除掉
a[href^="http://www.yvming.com"],a[href^="http://yvming.com"]{background:url(img/a,jpg) no repeat right bottom;padding-right:0px;
}二、hover和其他 hover可以和其他元素的配合实现翻转效果
css精灵图
定义：将多张图片复合在一张图片上的技术。好处：可以减少http请求次数，同时相对的请求总大小反而还会减少。使用：配合背景图定位使用。
css工具提醒
实现：不借助，通过hover控制或者等属性和定位流实现。优势：用css实现简单方便，不需要来往于和dom之间，对性能有一定的帮助。 第五章 列表和导航
导航及css映射的的制作思路
一、导航条 1. 制作我的导航 原理：通过ul、li标签和hover就可以实现部分导航需求。步骤：
去掉ul标签的默认项目符号；根据水平或者垂直需求选择浮动或者不浮动;(-block也是可以的，不过我记着这个属性在一些浏览器下会因为代码间的空格对网页效果产生一个默认的空隙)；ul，li都不要设置宽度，这样更灵活，li的面积用撑起来，可以保证每个选项都看起来比例合理；项目标识：不推荐使用默认的项目符号，太单一了，而且不好控制。可以使用背景图定位。具体点就是先用留出位置，再用背景属性；效果：配合hover去写就好了，效果变化可以十分灵活，看你怎么写咯。 2. 下拉菜单的思路 原理：如果我告诉你hover的效果是可以冒泡的，你信吗。其实当我们对于父级元素设置hover效果后，它的子元素也会有同样的效果，这也就为子菜单的实现提供了基础。实现：
首先我们得需要一个横向菜单，里面的每一项li都是子菜单的父级；子菜单做成垂直菜单，配合hover就可以实现。
tips：我觉得这已经很够了，相信不是小白的看一下思想都能知道大概怎么做。
二、css图像映射 解释：将li定位到图像规定地区，你可以通过点击图片到对应的网站。要点：其实就是div和插入的图片大小要定的一致。实现：父级定位，然后再分别定位li，可以通过透明度设为0去实现。个人方法：（）
首先给父级定位；插入和父级大小一致的图像；通过.log配合e.和e.找出各个需要跳转的图像位置区间；通过和e.和e.进行判断，根据区间配合.open(““);实现指定页面的跳转。优点：我觉得不会有很多不合理的，位置被定的乱七八糟的li。
个人认为这种功能用的不太多，好像地图之类的图像上出现的概率大点。
第六章 布局
常见的布局和应用
一、基础布局
在进行布局之前，我们首先要进行布局思考，将网页划为几个区域同时思考它们的重复性。
1. 居中布局 定义：一般指水平居中的布局实现
1. 设置具体宽度，然后： 0 auto；
2. 定位1（详情见代码）；
3. 定位2（详情见代码）。
4. 借助flex居中，父级div设置：flex；（一些浏览器需要做兼容）子级居中div设置-：；
定位1：
#box {position：absolute；left：50%；margin-left：-1/2容器宽度
}定位2：
#box {position：absolute；left：50%；transform:transition(-50%);
}2. 多列布局
借助浮动就可以实现
3. 流式布局： 定义：根据页面大小调整页面各部分比例；实现：每个具体数值的地方都用百分比去设置；说起来容易实际挺困难，需要非常精准的计算。缺点：很难精确地按照设计图纸固定每部分位置，用的很少（最多的还是固定宽度）。 4. 圣杯布局 优点：允许主要内容先行加载实现：一个外围容器，先中间后两边都左浮动；负值+容器+相对定位负值； 5. 双飞翼布局 优点：允许主要内容先行加载实现：一个外围容器，先中间后两边都左浮动；负值+中间加内容容器+内容容器； 二、高级布局简介 1. flex布局
就是利用css3的flex属性就行布局，优点特别灵活，缺点对部分浏览器不兼容
2. 响应式布局
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
第七章 bug相关
css是一门语法简单的语言，而其难点更多在于老式浏览器带去的显示差异。很多情况下，编写css时bug并不是那么多，很多来源于编程人员对css规范认识不够深刻和正确。而如何判断bug产生的正确来源和如何去正确的解决bug，便成了一个要点…
一、常见的css问题 1.输入错误及语法错误
顾名思义，多发生在程序员自己敲错了代码或者语法
2.特殊性和分类次序 比如选择器过多的嵌套（这里指嵌套层数>3的，一般不超过三层是合适的做法）造成了更特殊的覆盖了原有的导致的效果异常。书写顺序错误，比如典型的：link和：顺序解决方法：或者谷歌等浏览器的调试工具。这些工具可以看出来是那些规则导致现在样式的，又是有哪些规则被覆盖了。 3.外边距叠加
具体的可以参考第三章
二、捕捉bug 1. 初步判断bug 检查html，css语法（这个现代ide都会有的，相对容易做到）通过浏览器自带调试工具使用更符合w3c标准的浏览器开发（谷歌就不错，不过现在个人更青睐火狐）从开始就避免bug（少用花哨的技术，不要写多余没用的嵌套结构） 2. 精确追踪bug 隔离问题
单独测试bug所在区域，可以尝试大幅修改一些属性，看看反应。
提取bug
用少量html，css重现bug，然后进行对症分析，判断是整体结构其他属性影响，还是本身问题，还是不同浏览器内核造成的问题。
要实际解决问题，而不是解决表面现象。（比如位置计算不对，然后一直负达到效果一致，但事实上这种做法可能只是在你这个特有的电脑分辨率上，你这个品牌浏览器的这个版本的中效果ok）
如果经过很多筛查，还是没办法找到问题，可以去相关社区，论坛等寻求帮助。
三、了解“布局”
定义：ie6为什么有那么多bug？这是因为ie显示引擎使用一个称为布局的内部概念。ie通过使用布局控制元素的尺寸和位置。如果一个元素没有布局，那么它的大小和位置由最近的，具有布局的祖父类元素决定。
默认拥有布局的元素。
设置下面属性会自动拥有布局。
ie7中，下面的属性也会触发拥有布局
第八章 详细探究文档流模型
算是比较深入的理解页面的三维排序
一、7阶层叠水平 假设有两个div，一个设置-block，另一个设置float：left。那么谁会在上面呢？浮动会脱离默认文档流，它应该在上面吧！？
公布答案：来看下图。。。(做的有点糙)
没错，-block的在上面。why？
7阶层叠水平模型
解答：其实这些都是已经规定好的，它们遵守7阶层叠水平模型，按照这个去看，问题就解决了。认识：还是看我的图来认识一下吧。。。
看了我这个图，估计就知道-block为什么在float元素之上了。
但是，层叠上下文又是什么呢？接着看。
二、z-index和层叠上下文
认识z-index
定义：用来决定同一个层叠上下文中元素的高低；条件：需要是定位元素；（除去）
认识层叠上下文
定义：层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。如何触发产生层叠上下文？满足下列条件之一即可。
根元素 (HTML)z-index 值不为 “auto”的 绝对/相对定位一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 : flex|- 属性值小于 1 的元素 属性值不为 “none”的元素mix-blend-mode 属性值不为 “”的元素值不为“none”的元素值不为“none”的元素
9. 属性被设置为 “”的元素 : fixed在 will- 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值--- 属性被设置 “touch”的元素
