css权威指南笔记

1. 替换元素和非替换元素

替换元素：用来替换元素内容的部分并非由文档内容直接表示，用作其他内容的占位符（img, 表单元素，embed等嵌入元素）

非替换元素：元素的内容内容包含在文档流中，大部分元素都是替换元素。

替换元素和非替换行内元素的区别：替换元素可以设置width、height、margin和padding；非替换行内元素不可以设置width、heigt、垂直margin和padding，可以设置水平margin和padding。

2. 候选样式表

将link标签的rel属性设置为alternate stylesheet，设置title属性，如果浏览器支持候选样式表，title属性值会显示在候选样式表列表中，只有当用户选择该样式表时，该样式表才会生效。

<link rel="alternate stylesheet" title="common" href="css/common.css"/>

3.@import

@import url media(@import ‘main.css’ screen),可以放在style标签里和css文件里，但是必须放在所有样式的前面。

4.多类选择器

.warning.red 选择同时包含这些类名的选择器

5.选择器优先级（权重）

特殊性：内联样式（1000），id（100），类、属性、伪类（10），元素、伪元素（1），*（0），继承样式无特殊性；特殊性为0大于无特殊性。

重要性（！important）：读者的重要性大于创作人员的重要性

权重：读者的重要性>创作人员的重要性>创作人员的正常申明>创作人员的正常申明>用户代理声明

6.em和px的关系

1em=font-size声明的px数(font-size: 16px,则1em = 16px)

7. font

font-size的作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小，通常显示的字符会比em框小，以便每个em框能够容纳下所有的字符（1个em框是一个字符的容器，font-size相对大小的缩放因子是向上1.5向下0.66，绝对大小的缩放因子是1.2）

缩写（font: font-style font-variant font-weight font-size/line-height font-family，缩写必须包含font-size和font-family，前面属性顺序不定）

百分数（Font-size相对于父元素计算、line-height相对于font-size计算）

8. line-box, inline-box, em盒

行盒的内容默认让所有inline-box字体的底部、匿名inline-box字体的底部、替换元素的底部延行框的基线对其；对inline-box和替换元素用vertical-align会移动inline-box和替换元素，因此有可能影响line-box的高度。可替换元素的行内框高度就是元素的高度+padding+margin+border，行间距不会应用到可替换元素；不可替换元素垂直margin和padding和border不影响行内框的高度。

9. white-space

处理空格和换行符

pre: 保留空格和换行符，不允许自动换行

nowrap: 合并空格忽略换行符，不允许自动换行

pre-line: 合并空格保留换行符，允许自动换行

pre-wrap: 保留空格保留换行符，允许自动换行

normal: 合并空格忽略换行符， 允许自动换行

10. 元素框

只有width、height、margin可以设置为auto。

Width+border+margin+padding = 父元素的width

a.       如果width、margin-left、margin-right都不为auto，则会忽略margin-right，强制将margin-right设为auto，以补全父元素的width

b.       如果width、margin-left、margin-right中只有一个为auto，则这个值会自动补全，以适应父元素的width。

c.       如果width不为auto，margin-left、margin-right为auto，则margin-left、margin-right会设置为相等的值，此时元素居中显示

d.       如果width和margin-left、margin-right之一为auto，则margin-left、margin-right为auto的会强制置为0，width自动设为所需的值，以补全父元素的width

e.       如果width、margin-left、margin-right都为auto，则margin-left、margin-right会强制置为0，width等于父元素的width

f.        如果margin-top、margin-bottom为auto，则都会重置为0

11. 垂直外边距合并

a. 两个相邻元素的垂直外边距合并，如果两个都为整数则取较大的作为垂直margin；如果一正一负则正数减去负数的绝对值作为垂直margin；如果都为负数，则取绝对值较大的margin作为垂直margin

b. 三个个相邻元素的垂直外边距合并（一个负元素包含一个子元素和一个相邻的元素垂直外边距合并），如果三个都为正数则取较大的正数作为垂直外边距；如果一正两负，则正数减去负数绝对值的最大值作为垂直外边距；如果两正一负，则正的最大值减去负的绝对值作为垂直外边距，如果三个都是负数，则取绝对值最大的margin作为垂直外边距。

C．四个元素垂直外边距合并，以此类推，若两正两负，则取正的最大值减去负的最大绝对值作为垂直外边距；若一正三负，则取正值减去负的最大绝对值作为垂直外边距；若一负三正，则取最大正值减去负的绝对值作为垂直外边距；若全为正值，则取最大值作为垂直外边距；若全为负值，则取最大绝对值的margin作为垂直外边距。

d. 若父元素有border或者padding，则父元素和子元素不会出现垂直外边距合并。

e. 只有父元素的height为auto时，子元素和父元素的margin-bottom才有可能合并。

10. body和html是唯一的两个可以向上继承css属性的元素，这就是为什么平时body的高度为0，我们设置body的background-color时，整个屏幕都会有颜色的原因，background-color会向上继承到html的包含块即初始包含块，而初始包含块为整个可视区域。

11. margin-top、margin-bottom、padding-top、padding-bottom为百分数时，是相对于父元素的宽度而不是高度。

12. 只要设置了border-style，border-width就默认为medium，边框颜色默认是内容的前景色。

13. 浮动

浮动的本质是文字环绕浮动元素，浮动元素不能比行框顶端高，浮动元素外边距不会合并。

a．  行内框与一个浮动元素重叠时，其内容、边框、背景都在该浮动元素之上显示。

b．  块框与一个浮动元素重叠时，其边框、背景都在该浮动元素之下显示，内容在该浮动元素之上显示。

c．  浮动元素不能超过行框的顶部。

d．  浮动元素会包含住所有的后代浮动元素。

e．  Clear只能用于块级元素不能用于inline和inline-block。

14. 定位

定位元素width+padding+margin+border+left+right=包含块的width

a.       除bottom外，top，left，right为auto时表示该定位元素放置在没定位之前的位置。

b.       width、left、right为auto，则放置在没定位前的位置，width为恰好能包围住其内容，而余下的宽度则由right重新计算填充；如果left和right，margin-left，margin-right一个为auto，那么这个auto会重新计算以适应包含块的width。

c.       如果左右margin为auto，left，width，right不为auto，此时左右外边距会设置为相等的值[(包含块width – left –right – width）/2]，若设置left与right相等，此时会水平居中。

d.       如果上下margin为auto，top，bottom，height不为auto，此时上下外边距会设置为相等的值[(包含块height – top –bottom – height）/2]，若设置top与bottom相等，此时会垂直居中。

e.       如果左右margin，left，width，right都不为auto，而此时的和又与包含块的width不相等，此时会忽略right，重新计算以适应包含块的width。

f.        如果左右margin，top，height，bottom都不为auto，而此时的和又与包含块的height不相等，此时会忽略bottom，重新计算以适应包含块的height。

g.       绝对定位的可替换元素（图像等），只设置了width或者height，那么height或者width会按照原始比例绘制。

15. content

a．content生成的都是inline-box（内联元素）

b．content： 字符串|url|counter|attr|open-quote|close-quote|no-open-quote|no-close-quote

c．quotes、open-quote、close-quote

p{quotes：‘a’ ‘b’ ‘c’ ‘d’}  p:before{content: open-quote}  p:after{content: close-quote}  p>span:before{content: open-quote}  p>span: after {content: close -quote}

d. counter, counters, counter-reset, counter-increment

.reset {
    counter-reset: wangxiaoer;
 }
 .counter:before {
    counter-increment: wangxiaoer;
    content: counters(wangxiaoer, '-') '. ';
    font-family: arial black;
 }

Counter嵌套时，遇到counter-reset会重置

 

 

14. HTML XHTML

a.  XHTML标签必须小写，HTML标签可以大写

b.  属性都要小写

c.  XHTML标签必须严格嵌套，HTML标签不必严格嵌套

d．XHTML标签必须封闭，HTML标签比一定封闭

e．XHTML属性值必须用引号引起来，HTML不一定用引号

f．XHTML属性值必须用完整形式，HTML不一定用完整形式

g．XHTML中应该区分内容标记和结构标记(例如不许将div嵌入p)