元素类型与样式初始化

Posted 2021-12-02 aorange

一. 样式初始化

1. 为什么要样式初始化

   清除浏览器默认样式,以免造成不必要的兼容问题

2. 通配符的弊端

　　　　*{

　　　　margin:0;padding:0;

　　　　}

1. 需要逐个清除默认样式

body,p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
ul,ol{list-style:none;}
img{border:0px;}/*清除ie图片边框*/
a{text-decoration:none;color:#222;}

二. 标签的分类

1. 块级元素

块级元素会占据一行的位置,它后面的元素内容会换行显示,块级元素里面可以放任何内容,主要用来布局。

 

1.1 块元素的特性

1. 独占一行. 默认宽度100%

2. 支持宽高.行高

3. 支持margin和padding

4. 可以包裹内联元素和其他块元素

5. p不内包裹块元素特殊块级元素

1.2 常见的块元素

div / dl /table/ form / / ol / ul /li/h1-h6/ p

2. 行内元素

行级元素它只占据他内容所占的位置,其它的内容在他后面显示，但是行级元素里面不能放块级元素

 

2.1 行内元素的特性

1. 默认一行显示

2. 不支持宽高

3. 支持padding,但是上下padding只对自身有效

4. margin上下无效,左右有效.

5. 不支持margin:auto

6. 标签之间空格被解析

7. a能包裹块元素`特殊内联元素

2.2 常见的行内元素

a / b / em / i / img / input / lable / span

3. 行内块元素

以行级元素形式排列，以块级元素样式显示**

3.1 行内块元素特性

1. 不独占一行

2. 支持width/height

3. 支持margin

4. 支持padding

5. 不支持margin:auto

6. 同类标签之间会有间隙

4. 去除行内元素与行内块元素解析的空格

1. 去掉两个标签之间的空格

2. 用注释标签代替空格

3. font-size:0

5. 元素之间的相互转换

通过样式display属性控制，元素类型可以相互转换

1. display:block：变成块级元素,还有显示的意思

2. display:inline：变成内联元素

3. display:none：不显示 , 它（包括它的子元素）将会被隐藏起来,你审查元素的时候找不到

4. display:inline-block：以行级元素形式排列，以块级元素样式显示**

6. 鼠标样式

使用cursor属性,设置鼠标样式

1. cursor : pointer 小手掌 =====>这个比较常用. cursor : move 表示对象可以移动. cursor : wait 表示正在加载. cursor : help 表示需要帮助. cursor : url(1.png),pointer 自定义鼠标样式