元素类型与样式初始化

逃离我推掉我的手 2021-11-10 15:14 251阅读 0赞

### 一. 样式初始化 ###

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 自定义鼠标样式

转载于:https://www.cnblogs.com/aorange/p/10907046.html

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5初始化样式

@fontFamilyDefault: PingFang SC, miui, system-ui, -apple-system, BlinkMacSystemFont,

曾经终败给现在/ 2023年07月09日 05:23/ 0 赞/ 10 阅读

相关项目初始化之配置初始化css样式

在配置初始化项目时一般都需要将所有标签的样式重置这是我常用的reset.css html, body, div, span, applet, object, i

- 日理万妓/ 2023年01月02日 14:24/ 0 赞/ 239 阅读

相关 css样式初始化(base.css)

@charset "UTF-8"; /css 初始化 / html, body, ul, li, ol, dl, dd, dt, p, h1, h2,

柔情只为你懂/ 2022年06月06日 08:55/ 0 赞/ 324 阅读

相关 Java各类型初始化与输出

public class KY2_1 { public static void main(String[] args) {

末蓝、/ 2022年05月23日 01:57/ 0 赞/ 180 阅读

相关 css 样式初始化代码

> 个人用的比较多的样式初始化： > > /公共样式/ > > /1.样式重置/ > body,div,dl,dt,dd,ul,ol,

ゝ一纸荒年。/ 2022年05月08日 07:18/ 0 赞/ 243 阅读

相关前端基础学习笔记样式初始化元素类型

样式初始化就是把默认样式中的margin和padding取消、改变列表list-style、text-decoration文本装饰、图片边框 <body>

青旅半醒/ 2022年04月15日 00:56/ 0 赞/ 193 阅读

相关 CSS通用样式初始化

@charset "utf-8"; /\通用\/ body \{ font: 12px "microsoft yahei", Arial, Helvetic

朴灿烈づ我的快乐病毒、/ 2022年04月13日 04:20/ 0 赞/ 273 阅读

相关移动端 css 初始化样式

/\\ reset \\/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li,

朱雀/ 2021年12月23日 07:59/ 0 赞/ 387 阅读

相关元素类型与样式初始化

一. 样式初始化 1. 为什么要样式初始化清除浏览器默认样式,以免造成不必要的兼容问题 2. 通配符的弊端　　　　\\{ 　　　　

逃离我推掉我的手/ 2021年11月10日 15:14/ 0 赞/ 252 阅读

相关 css样式初始化

/css 初始化 / html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form,

╰+攻爆jí腚メ/ 2021年07月27日 02:55/ 0 赞/ 440 阅读