html标签之块级元素与行内元素

ゞ浴缸里的玫瑰 2022-06-13 03:53 255阅读 0赞

# html元素一般分为块级元素、行内元素、可变元素 #

# 块级元素： #

### 独占一行——如果没有css的作用，块元素会依次以每次另起一行的方式一直往下排，一行内只会有一个块级元素存在。 ###

### 可以设置宽高——会计元素可以收到css的作用，设置自身的宽高：height:100px; width:100px; ###

### 常见的块级元素主要有： ###

> div     p    ul   ol    li    table    h1~h6    form    menu    address    blockquote     dir    dl    blockquote

# 行内元素： #

### 行内并存——与块级元素相反，行内元素不会独占一行，就是说一行内可以有多个行内元素同事存在，依次向右排列，直到撑满父级元素的宽，才会换行； ###

### 设置宽高无效——css代码height:100px; width:100px;设置在行内元素身上时是不会有效果的；行内元素的宽高是有自身内容撑起来的；   常见的行内元素有： ###

> span    a    select    input   mg    abel   textarea    em    font    strike    strong

####  ####

# 可变元素： #

### 这一部分的元素根据上下文语境决定为块元素还是内联元素 ###

### 常见的可变元素有： ###

> applet - java applet   
> 
> button - 按钮   
> 
> del - 删除文本   
> 
>  frame - inline frame   
> 
> ins - 插入的文本   
> 
> map - 图片区块(map)   
> 
> object - object对象   
> 
> script - 客户端脚本

# 块级元素与行内元素之间的相互转换： #

> ### 在实际开发过程中，我们经常会遇到需要把一个块级元素转换成行内元素，或者要给一个行内元素设置宽和高的情况，这时我们会用到一个属性：display，通过对元素的该属性设不同的值，我们可以改变元素的一些特性，该属性对应的值有： ###

> display:block——设为块级元素，拥有块级元素的特性；
> 
> display:inline——设为行内元素，拥有行内元素的特性；
> 
> display:inline-block——设为行内块级元素，同时具备行内元素与块级元素的一些特性，即可在一行内同时存在；又可以设置宽高；
> 
> display:none——使元素消失，是真正的消失，既看不到元素，元素在网页上也不占据位置，排在该元素之后的元素会自动补到该元素原来的位置上。