第一章
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 计算后样式