css权威指南读书笔记

• 属性选择器
  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 将元素行内框底端与行框的底端对齐

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 元素的所有后代相对于自己的祖先元素又有自己的叠放顺序，子元素的叠放顺序是相对于父元素而言的。

此刻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设为元素高的一半