CSS Reset原则与块内嵌元素转换特性.pdfVIP

样式初始化

⚫cssreset原则：

但凡是浏览默认的样式，都不要使用。

body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-

size:12px;}

ol,ul{margin:0;padding:0;list-style:none;}

a{text-decoration:none;}

img{border:none;}

块元素和内嵌元素

⚫块的特征

1、默认独占一行

2、没有宽度时，默认撑满一排

3、支持所有css命令

⚫内嵌(内联、行内)的特征

1、同排可以继续跟同类的

2、内容撑开宽度

3、不支持宽高

4、不支持上下的margin和padding

5、代码换行被解析

块和内嵌的转换

⚫disy：block显示为块

使内联元素具备块属性的特性

⚫disy：inline显示为内嵌

使行块属性具备内联元素的特性

disy：inline-block;

⚫Inline-block的特点和问题

特性：

1、块在一行显示；

2、行内属性支持宽高；

3、没有宽度的时候内容撑开宽度

问题：

1、代码换行被解析；

2、ie6ie7不支持块属性的inline-block;

inline-block的应用、cursor

⚫a、分析结构（div包一排a）

⚫b、a支持宽高，并且在一排显示

⚫c、有hover效果

⚫d、当前状态不能点！

⚫cursor指针样式（规定要显示的光标的类型）

⚫cursor：pointer|text|move……

⚫cursor:url(hand.cur),pointer;

雅虎面试题

⚫这么一段HTML，请挑毛病：

P;;哥写的不是HTML，是寂寞。

brbr;;我说：br不要迷恋哥，哥只是一个

⚫;空格符

雅虎面试题

⚫：

⚫p哥写的不是HTML，是寂寞。/p

⚫p我说：br/不要迷恋哥，哥只是一个/p

⚫最佳：

⚫p哥写的不是abbrtitle=HypertextMarkup

LanguageHTML/abbr，是寂寞。/p

⚫pcite我/cite说：br/q不要迷恋哥，哥只

是一个/q/p

⚫title元素的额外信息

⚫html：

前端规范

1、所有书写均在英文半角状态下的小写；

2、id，class必须以字母开头；

3、所有必须闭合；

4、html用tab键缩进；

5、属性值必须带引号；

6、!--html注释--

7、/*css注释*/

8、ul,li/ol,li/dl,dt,dd拥有父子级关系的；

9、p,dt,h里面不能嵌套块属性；

10、a不能嵌套a；

11、内联元素不能嵌套块；

CSSsonTwo(Part

2)

特性

TagStyle

Initialization

⚫cssresetPrinciple:

Donotuseanybrowserdefaultsty.

body,dl,dd,p,h1,h2,h3,