- 属性选择器
p[class~="warning"] 部分属性值选择 p.warning 如果忽略了~,则说明要完全匹配
![](/i/eg_tulip.jpg)
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 将元素行内框底端与行框的底端对齐
vertical-align:super/sub 将元素的基线相对于父元素的基线提高或者降低
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,会让元素居中;
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设为元素高的一半