1、样式种类：浏览器默认样式、带有样式的标签、内联样式、style标签、link引入样式文件。
2、选择器(http://www.ruanyifeng.com/blog/2009/03/css_selectors.html)
2.1基本选择器：1、通配符 ()
2、标签选择器 (div等)
3、class选择器 (.)
4、id 选择器 (#)
2.2组合选择器：1、多组选择器 div, span, a.on
2、后代选择器 div span
3、子元素选择器 div > span
4、兄弟元素选择器 div + span, div ~ span 表示 div 后所有 span 兄弟节点
2.3属性选择器:input[type],input[type=”text”],input[type~=],input[type|=]
input[type=], input[type^=], input[type$=]
2.4伪类和伪对象：伪类选择器，一般常用于a标签例如a:link,a:visited,a:hover,a:active；伪对象选择器, :after, :before 等。
2.5其他CSS3选择器:E:nth-child(n)、E:not(span)、E:checked
2.6选择器在各浏览器中的兼容性：参考文档-- http://labs.qianduan.net/css-selector/
3、优先级
!important > 内联样式 > #ID > .class > TAG | [attr] | 伪类 > 伪对象 > 通配符 > 继承
样式继承（文本相关）• font, color、text-align,text-indent(缩进)、line-height、letter-spacing(字母间距),word-spacing(段落中的字间距)
继承相关文档--http://www.cnphp.info/css-style-inheritance.html
4、盒模型布局
4.1两种盒模型
•IE 盒模型, width = contentWidth + padding + border, 布局优先
•标准盒模型, width = contentWidth, 内容优先
http://blog.163.com/zx_1258/blog/static/133233799201301331041110/
4.2box-sizing
border-box(IE模式) :大部分 input 元素使用 border-box 模式, 用以解决浏览器间 form 表单样式兼容性问题
content-box(W3C模式)
http://blog.163.com/zx_1258/blog/static/13323379920130133139102/ form 表单样式统一兼容性方案
5、inline,block和inline-block
5.1、 inline内联元素
•与其他元素依次排列在一行内, 直到遇到右边界才换行
•不可设置宽和高, 设置了 width 和 height 也无效
•可以设置水平方向的 padding 和 margin, 垂直方向的 padding 和 margin 不会影响布局(可以设置并且可以生效, 但是对其他元素没有影响)
•扩展说明, 可以设置 line-height, 并且会影响布局(可以对其他元素的位置产生影响)
5.2、bloock块级元素
•自己独占一行
•可以设置宽,高, 默认情况下, 宽度自动填满整个父元素, 但即使设置了宽度, 仍是独占一行
•可以设置任意方向上的margin,padding, 并都对布局产生影响
5.3、inline-block内联块级元素
附带：
•ie6,7对该属性支持不完善, 需要做简单 hack, e.g. display:inline-block; *display:inline; zoom:1;
(这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack)
•inline-block 元素虽好, 但是有样式问题, 即在元素间产生几像素的水平空隙(不同浏览器下不同), 原因是换行符,空格符和制表符转换成空白符, 在字体大小不为0的情况下, 占据一定空间造成的;
6、浮动(float浮动, 即让元素脱离文档漂浮起来, 向左或向右移动, 直到遇到父元素边缘或者另一个浮动元素的边缘;元素浮动以后, 不会影响块级元素布局, 只会影响内联元素排列)
6.1、浮动的使用：元素水平排列、文字环绕图片、对比inline-block:a--实现原理不同, float 元素已经脱离了普通流, inline-block 元素仍在普通流中.b--都能水平排列元素, 但是 float 浏览器兼容性更好.c--float 可以做文字环绕, 而 inline-block 只能做水平排列.
6.2、清除浮动
在当前元素使用Css属性 clear : left|right|both|none, 使元素清除浮动元素的影响:•被浮动元素覆盖、•跟在浮动元素后
eg--.clear{clear:both;height:0;overflow:hidden;}
6.3、闭合浮动
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
6.4、为什么要清除/闭合浮动
•浮动元素不能撑开父元素, 从而使布局上产生’塌陷’效果;
•浮动会影响后面的内联元素的布局
•创建了 BFC 或触发了 hasLayout 以后, 相当于创建了一个独立的盒子, 里面的元素与外面的元素在布局上不会相互影响
6.4、清除/闭合浮动解决方案
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; } //在父元素内容尾部添加 clear 属性元素
.clearfix { zoom:1; }
//触发 IE hasLayout 属性(IE6-7不支持 BFC)
文档推荐：http://www.iyunlu.com/view/css-xhtml/55.html
7、定位与层级
7.1定位分类--定位可分为在普通流和脱离普通流两类, 对应与 position 的取值:
•static 为默认值, 元素存在与普通流中
•relative 相对定位, 元素相对于它在普通流中的位置进行定位, 其本身在普通流中的位置仍然被保留
•absolute 绝对定位, 元素相对于最近的已定位的父元素进行定位, 其在普通流中的位置已被抹除
•fixed 绝对定位的一种, 以浏览器窗口为已定位的父元素进行定位
前两种在普通流中, 后两种已经脱离了普通流, 不再占据位置.
7.2层级
层级关系会形成元素间的相互覆盖效果, 另外, 浮动也会使元素产生的相互覆盖效果.对 z-index 定位会使元素间产生层级关系, 把页面看做一个坐标系, 一般的定位操作都是在 X 轴和 Y 轴上进行的, 而 z-index 则是控制 Z 轴的定位.
7.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 不同 , 值大的覆盖值小的
文章推荐--http://www.cnblogs.com/ForEvErNoME/p/3373641.html
8、垂直水平居中
8.1、垂直居中
i.文字,元素居中
a)height == line-height
b)外层 display:table;
内层 display:table-cell;vertical-align:middle;
(IE6/7不支持 display:table-cell)
ii.vertical-align : middle, 可以使文字相对于元素居中排版
8.2、水平居中
i.文字居中, text-align : center;
ii.元素居中
a)宽度固定, margin: 0 auto;
b)宽度不固定,
外层 text-align:center;
内层 display:inline-block;text-align:left;
(IE6/7需要对 inline-block 属性进行 hack)
8.3宽高固定的元素绝对定位解决垂直水平居中
外层: position:relative;
内层: position:absolute; top:50%; left:50%;
margin-top:-50%Height; margin-left:-50%Width;
9、表单表格
9、1表单
•一个 label 对应一个 input 或者 inputgroup
•使用 vertical-align 使文字与 input 元素居中
•表单元素使用 box-sizing:border-box; 以在不同浏览器中得到一致样式
http://www.w3school.com.cn/html/html_forms.asp
9、2表格
•border-collapse : collapse, 合并相邻单元格边框
•colspan, rowspan, 合并相邻单元格
•thead, tfoot, tbody
•tr 行; th 标题, td 内容
•设置border, 设置单元格 td 与 th 的 border, 结合 border-collapse;
•使用 padding 控制单元格内部留白大小
http://www.ruanyifeng.com/blog/2009/05/html_table_mastering.html
网友评论