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

<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设为元素高的一半
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容