- 属性选择器
p[class~="warning"] 部分属性值选择 p.warning 如果忽略了~，则说明要完全匹配
p[class^="cloud"]匹配class属性值以cloud开头的p元素
p[class*="bar"]匹配class属性值含有子串"bar"的p元素
p[class$="bar"] 匹配以bar结尾的p元素
p[lang|="en"]匹配属性等于en或者以en-开头的所有元素
h1+p{margin:0 auto;} 选择紧接在一个h1元素后的所有段落，h1和段落要有相同的父元素
-
!important比内联样式特殊性（1000）还要高
-
一般来说，框模型属性（外边距，内边距，边框，背景）都不能继承
继承bug 有些浏览器的表不会继承样式 -
建议以 ：link :visited :hover :active (伪类元素特殊性 10)
如果：link和visited后出现，是会覆盖hover的样式 -
web安全颜色：在256色计算机系统上总能避免抖动的颜色
-
通用字体系列
serif字体 sans-serif字体 monospace字体 cursive字体 fantasy字体
如果字体包括#或者$之类的符号，或者有一个或多个空格的 需要用''
例如 font-family：'New York'
-
line-height：1； 因为继承问题，行高会被子元素继承，如果一个大字体为子元素就会影响样式，除了显式指line-height还可以指定倍数
-
verical-align 设置length（*px） 会使（行内或表格）元素上移或下移，但是垂直对齐的文本并不会成为另一行的一部分，也不会覆盖其他行的文本
-
vertical-align：top /bottom 将元素行内框底端与行框的底端对齐
Paste_Image.png
Paste_Image.png
vertical-align：super/sub 将元素的基线相对于父元素的基线提高或者降低
Paste_Image.png
Paste_Image.png
vertical-align:text-top/bottom:将元素行内框的顶端和父元素的内容区的顶端对齐
vertical-align:*px;可以指定值
行框图
行内框：非替换元素为line-height的值
替换元素为内容区的高度
行框:包含该行中出现的行内框的最高点和最低点的最小框
-
vetical-align的值要根据相对于元素的line-height来算
-
word-spacing的值可能受text-align属性值的影响。如果一个元素是两端对齐的，字母和字之间的空间可能会调整。
-
合并垂直外边距：外边距会融合 p181
-
行内元素的内边距不会增加行框的高度
不会把上一行的文本挤上去
- margin百分数是相对于其父元素的width计算的
- 行内框与一个浮动元素重叠时，其边框、背景和内容太都在该浮动元素"之上"显示
块框与一个浮动元素重叠时，其边框、背景在浮动元素之下，内容在浮动元素之上显示 - position：relative 包含块为最近的块集框
position:absolute 包含块为最近的position值不是static的祖先元素 - clip:rect(top\right\left\bottom)|auto|inherit
应用于绝对定位函数 - visibility:hidden/visible 如果后代元素指定为visible 则父元素即使是hidden后代元素也可见
- position:absolute 左右外边距设为auto，left和right不是auto，会让元素居中；
Paste_Image.png
Paste_Image.png
left和right是整个子元素盒模型 相对于元素块的left和right
- positon定位时
同时定位right 和left且不符合框模型事，在从左向右的语言中，忽略right的值 （如果margin值为auto则，左右同时设定） - z-index 元素的所有后代相对于自己的祖先元素又有自己的叠放顺序，子元素的叠放顺序是相对于父元素而言的。
<p style="z-index:7">
<em style="z-index:43">
<strong style="z-index:-52"></strong></em>
</p>
<h1 style="z-index:6"></h1>
此刻strong 的z-index虽然为-52，因为其父元素p在h1之上，所以strong在h1之上
* 如果position：relative 过度受限
即{positon：relatie；top：10px；bottom：20px}
top要求他向下移动10x，而bottom要求他向上移动20px；此时css2.1指出，一个值会重置为另一个值的相反数即bottom总是等于-top，right总是等于-left
* list-style：list-style-image list-style-type list-style-position
* li::marker {margin-right:0.125em;}来使标志与列表项内容之间有适当的距离【css3草案】
* :before 和:after 把生成内容放在一个元素内容的前面或者后面；
* 如果：before和： after选择器的主题是块级元素，则display属性只接受none，inline，block，和 marker
* counter-reset 设置计数器的起点
counter-increment 将其递增一定的量
[CSS计数器(序列数字字符自动递增)详解--张旭鑫](http://www.zhangxinxu.com/wordpress/2014/08/css-counters-
automatic-number-content/)
* outline和border的区别
1.outline不占位，设置过大可能会覆盖其他元素
2.outline的形状不定，用户代理可以合并部分轮廓，创造一个连续非矩形的元素
* 最适合屏幕设计的字体是sans-serif字体，但是在打印媒体中serif字体更可读
* 非媒体屏幕
打印媒体and幻灯片媒体and声音样式
http://blog.csdn.net/jhqdlove/article/details/50526321
* 垂直居中技巧
positon：absolute；
top：50%；
margin设为元素高的一半
网友评论