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)

时间: 2024-10-14 20:27:53

css权威指南笔记的相关文章

css 权威指南笔记

部分属性选择: 选择class 属性中包含warning的元素 [class~="warning"]{font-weight:bold} 子串匹配属性选择器: 在现代浏览器中得到支持 包括ie7 特定属性选择器: css 权威指南笔记

css 权威指南笔记( 五)结构和层叠之三种样式来源

CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样式就叫做创作人员样式. 然后是用户代理样式(agent's+style),用户代理也就是我们通常所说的浏览器(IE.Firefox等等),这些浏览器会提供一些默认的样式,比如IE浏览器中,一个纯粹由html代码构成的网页里,我们会发现超链接会带有一个蓝色的前景色,这其实就用户代理样式,借用一些插件我

css权威指南--笔记

第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet):type(text/css):media:(all(所有表现媒体, screen,print),title(配合候选使用). 3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前. 4,向后可访问性:<style><!-- 样式 -->

css权威指南笔记(知识点总结)

第一章 css和文档 ?1.替换元素与非替换元素,替换元素如 img input等,大多数html元素都是非替换元素. 2.块级元素和行内元素?,块级元素会自动填满父级元素的内容框,表格与其他块级元素一致,唯一有区别的是表格会生成一个标记符,就是小黑点.在html中块级元素不能继承行内元素,也就是说块级元素不能嵌套在行内元素里面,但是css中块级元素能继承行内元素的样式. 3.link里面包含以下几个属性,rel:来源:href:路径:media:默认为all(一般浏览器支持all.print.

css 权威指南笔记( 五)结构和层叠

特殊性

css 权威指南笔记(二)元素

替换元素 用来替换元素内容的部分并非有文档内容直接表示. img input 非替换元素 其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示. 块级元素 块级元素生成一个 元素框,(默认)会填充父元素的内容区,旁边不能有其他元素,换句话说,他在元素前后生成分隔符.替换元素可以是块级元素,不过通常都不是. 行内元素 行内元素在一个文本行内生成元素框,而不会打断这行文本.可以出现在另一个元素的内容中,而不会破坏其显示. 块级元素行内元素图文 在HTML和XHTML中,块级元素不能继承自行内

css 权威指南笔记(三)结合css和XHTML

link rel stylesheet alternate stylesheet(候选样式表) title type media all screen print ..... 内联样式

css 权威指南笔记(四)选择器

规则结构 每个规则都有两个基本部分组成:选择器和声明块.声明块由一个或多个声明组成,每个声明则是一个属性-值对. 元素选择器 声明和关键字 关键字一般由空格隔开:有一种情况例外 font属性中的  斜线(/)分割 元素的字体大小和行高两个关键字. 分组 选择器分组 通配选择器 (*)css2引入 声明分组 各个声明最后使用分号: 类选择器和ID选择器 类选择器 多类选择器 各个词之间用空格分隔 不同平台的Internet Explorer 处理不同 ID选择器 属性选择器 简单属性选择器   h

CSS权威指南学习笔记系列(1)CSS和文档

题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对,请谅解和指出.谢谢大家.正文: 第一章 CSS和文档---------- 1.CSS,称为层叠样式表.使用CSS的理由有:a.易于使用,样式表能大大减少Web创作人员的工作量:b.在多个页面上使用样式,可以创建一个样式表,然后把这个样式表应用到多个页面:c.层叠,CSS还规定了冲突规则:这些规则统称