第一章     HTML & CSS

1.1    样式种类

             i.               浏览器默认样式

          ii.               带有样式的标签

        iii.               内联样式

        iv.               style 标签

          v.               link 引入样式文件

1.2    结构与表现分离

结构与表现分离, 即 html结构与 css 样式分离, 这样做的好处是: 当页面的样式需要改变时, 仅需要更改样式所在的 css文件, 而不用去在每个 html 文件内做重复的修改; 通过修改某一个通用样式, 如 button 样式, 整个项目中的 button 都会变为最新的样式.

第二章     选择器与优先级

2.1    选择器种类

2.1.1 基本选择器

·           通配符 (*)

·           标签选择器 (div等)

·           class选择器 (.)

·           id 选择器 (#)

2.1.2 组合选择器

·           多组选择器 div, span, a.on

·           后代选择器 div span

·           子元素选择器 div > span

·           兄弟元素选择器 div + span, div ~ span 表示 div 后所有 span 兄弟节点

2.1.3 属性选择器

ie7+支持属性选择器:

·           input[type], input[type=”text”],input[type~=],input[type|=]

·           input[type*=], input[type^=],input[type$=]

2.1.4 伪类和伪对象

·           伪类选择器, 常见于 a标签,a:link,a:visited,a:hover,a:active;

·           伪对象选择器, :after, :before 等

2.1.5 其他CSS3选择器

·           E:nth-child(n)

·           E:not(span)

·           E:checked

2.1.6 CSS选择器在各浏览器中的支持

http://labs.qianduan.net/css-selector/

2.2    优先级

!important > 内联样式 > #ID > .class > TAG | [attr] | 伪类 > 伪对象 > 通配符 > 继承

样式继承(文本相关)

·           font,color

·           text-align,text-indent

·           line-height

·           letter-spacing,word-spacing

相关阅读 http://www.cnphp.info/css-style-inheritance.htm

2.3    相关 blog

http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 选择器

http://www.cnblogs.com/aaronjs/p/3156809.html#_h2_0 优先级

第三章     盒模型

3.1    两种盒模型

·           IE 盒模型, width = contentWidth + padding+ border, 布局优先

·           标准盒模型, width = contentWidth, 内容优先

3.2    box-sizing

·           border-box(IE模式) 大部分 input 元素使用 border-box 模式, 用以解决浏览器间 form 表单样式兼容性问题

·           content-box(W3C模式)

3.3    相关 blog

http://blog.163.com/zx_1258/blog/static/133233799201301331041110/ 盒模型

http://blog.163.com/zx_1258/blog/static/13323379920130133139102/  form 表单样式统一兼容性方案

第四章     inline, block和inline-block

4.1    inline 内联元素 

·           与其他元素依次排列在一行内, 直到遇到右边界才换行

·           不可设置宽和高, 设置了 width 和 height 也无效

·           可以设置水平方向的 padding 和 margin,  垂直方向的 padding 和 margin 不会影响布局(可以设置并且可以生效, 但是对其他元素没有影响)

·           扩展说明, 可以设置line-height, 并且会影响布局(可以对其他元素的位置产生影响)

4.2    block 块级元素

·           自己独占一行

·           可以设置宽,高, 默认情况下, 宽度自动填满整个父元素, 但即使设置了宽度, 仍是独占一行

·           可以设置任意方向上的margin,padding, 并都对布局产生影响

4.3    inline-block 内联块级元素

可以与其他元素同行排列的块级元素

4.4    扩展说明

·           ie6,7对该属性支持不完善, 需要做简单 hack, e.g.display:inline-block; *display:inline; *zoom:1;

·           inline-block 元素虽好, 但是有样式问题, 即在元素间产生几像素的水平空隙(不同浏览器下不同), 原因是换行符,空格符和制表符转换成空白符, 在字体大小不为0的情况下, 占据一定空间造成的;

4.5    相关 blog

 http://ued.taobao.org/blog/2012/08/inline-block/ 

inline-block今生前世(淘宝 UED)

第五章     浮动

float浮动, 即让元素脱离普通流漂浮起来, 向左或向右移动, 直到遇到父元素边缘或者另一个浮动元素的边缘;

元素浮动以后, 不会影响块级元素布局, 只会影响内联元素排列

5.1    浮动的使用

        i.               元素水平排列

      ii.               文字环绕图片

   iii.               对比 inline-block

a)        实现原理不同, float 元素已经脱离了普通流, inline-block 元素仍在普通流中

b)       都能水平排列元素, 但是 float 浏览器兼容性更好

c)        float 可以做文字环绕, 而 inline-block 只能做水平排列

5.2    清除/闭合浮动

5.2.1 清除浮动,

在当前元素使用Css属性 clear :left|right|both|none, 使元素清除浮动元素的影响:

·           被浮动元素覆盖

·           跟在浮动元素后

5.2.2 闭合浮动

i.               浮动元素后添加带 clear 属性的额外标签

a)        添加额外标签

b)       使用伪对象 :after | :before

ii.               创建BFC(Block Formatting Contexts, W3C标准) 或触发 hasLayout (IE独有, IE6-7, IE8已支持BFC) 属性

a)        触发BFC

                        1.               float 除了 none 以外的值

                        2.               overflow 除了 visible 以外的值

                        3.               display (inline-block,table-cell…)

                        4.               position (absolute, fixed)

b)       触发 hasLayout

                        1.               float 除了 none 以外的值

                        2.               display : inline-block

                        3.               position : absolute

                        4.               width, height 除 auto 以外的值

                        5.               zoom : 1

5.2.3 为什么要清除/闭合浮动

·           浮动元素不能撑开父元素, 从而使布局上产生’塌陷’效果;

·           浮动会影响后面的内联元素的布局

·           创建了 BFC 或触发了 hasLayout以后, 相当于创建了一个独立的盒子, 里面的元素与外面的元素在布局上不会相互影响

5.2.4 清除/闭合浮动解决方案

.clearfix:after {content:"\200B"; display:block;height:0; clear:both; } //在父元素内容尾部添加 clear 属性元素

.clearfix {*zoom:1; }

//触发 IE hasLayout 属性(IE6-7不支持 BFC)

5.2.5 相关阅读

 http://www.qianduan.net/about-float.html

http://www.iyunlu.com/view/css-xhtml/55.html 那些年我们一起清除过的浮动

第六章     定位与层级

6.1    定位分类

定位可分为在普通流和脱离普通流两类, 对应与 position 的取值:

·           static 为默认值, 元素存在与普通流中

·           relative 相对定位, 元素相对于它在普通流中的位置进行定位, 其本身在普通流中的位置仍然被保留

·           absolute 绝对定位, 元素相对于最近的已定位的父元素进行定位, 其在普通流中的位置已被抹除

·           fixed 绝对定位的一种, 以浏览器窗口为已定位的父元素进行定位

前两种在普通流中, 后两种已经脱离了普通流, 不再占据位置.

6.2    层级关系

元素的层级关系是一个复杂的话题, 层级关系会形成元素间的相互覆盖效果, 另外, 浮动也会使元素产生的相互覆盖效果.

对 z-index 定位会使元素间产生层级关系, 把页面看做一个坐标系, 一般的定位操作都是在 X 轴和 Y 轴上进行的, 而 z-index 则是控制 Z 轴的定位.

6.2.1 z-index 层级比较规则如下:

i.               父元素相同, 直接比较

a)        顺序规则, 默认或者position:static 情况下, 后面元素会覆盖前面元素

b)       定位规则

                        1.               已定位的元素会覆盖未定位的元素

                        2.               两元素均已定位, z-index 值大的会覆盖值小的

                        3.               两元素均已定位且z-index值相同, 后面的覆盖前面的

                        4.               两元素均已定位, z-index 一个为0, 一个为 auto, 视为同一层, 后面的覆盖前面的

ii.               父元素不同, 抽出z-index 层级树, 进行层级比较

a)        参与规则, 所有已定位的元素且z-index 值不为 auto 时, 参与层级定位(仅定位元素,position 不为 static, 不设置 z-index, 在 IE6/7下, z-index 默认值为0, 其他浏览器则默认值为 auto), 已定位且 z-index 值为 auto 的元素, 向上遍历至最近的已定位且值不为 auto 的祖先元素进行层级定位

b)       从父规则, 层级树中子元素的层级关系, 由其父元素的层级关系决定

c)        默认规则, 同一父元素下的子元素

                        1.               z-index 相同, 则后面的覆盖前面的

                        2.               z-index 不同, 值大的覆盖值小的

6.2.2 扩展阅读

http://www.cnblogs.com/ForEvErNoME/p/3373641.html

http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html

第七章     垂直水平居中

7.1    垂直居中

         i.    文字,元素居中

a)      height == line-height

b)      外层 display:table;

内层display:table-cell;vertical-align:middle;

(IE6/7不支持 display:table-cell)

       ii.    vertical-align : middle, 可以使文字相对于元素居中排版

7.2    水平居中

         i.    文字居中, text-align : center;

       ii.    元素居中

a)   宽度固定, margin: 0auto;

b)   宽度不固定,

外层 text-align:center;

内层 display:inline-block;text-align:left;

(IE6/7需要对 inline-block 属性进行 hack)

7.3    宽高固定的元素绝对定位解决垂直水平居中

外层: position:relative;

内层: position:absolute; top:50%; left:50%;

margin-top:-50%*Height;margin-left:-50%*Width;

第八章     表格与表单

8.1    表格

·           border-collapse: collapse, 合并相邻单元格边框

·           colspan,rowspan, 合并相邻单元格

·           thead,tfoot, tbody

·           tr行; th 标题, td 内容

·           设置border, 设置单元格 td 与 th 的 border, 结合 border-collapse;

·           使用 padding 控制单元格内部留白大小

8.2    表单

·           一个 label 对应一个 input 或者 inputgroup

·           使用 vertical-align使文字与 input 元素居中

·           表单元素使用box-sizing:border-box; 以在不同浏览器中得到一致样式

8.3    相关阅读

具体兼容性样式参见 bootstrap3 示例 http://v3.bootcss.com/css

http://www.w3school.com.cn/html/html_forms.asp表单

http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html表格

第九章     通用 reset 样式和常用meta 标签

9.1    浏览器样式 reset

一些标签带有浏览器自带默认样式, 比如table, blackquote, q, p,ul,ol,li,h1,h2,h3,h4,h5,h6 等, 为了在各个浏览器中保持样式一致, 需要重置一些浏览器特有的样式, 和设置一些通用的样式;

reset 样式表 http://www.cssreset.com

9.2    meta 标签

<metahttp-equiv=”X-UA-Compatible” content=”IE=edge”>, 使用 IE 浏览器时, 启用其最高版本

<metacharset=”utf-8” >, 页面编码格式 UTF-8

第十章     调试工具

10.1       chrome浏览器调试工具

10.1.1            样式表样式

10.1.2            计算后样式