- 替换元素和非替换元素
替换元素:用来替换元素内容的部分并非由文档内容直接表示,用作其他内容的占位符(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)