html 块状元素转换,块状元素与内联元素的转换

在布局页面的时候,HTML标签分成两种,块状元素和内联元素(我们平时用到的标签div和p就是块状元素,链接标签a就是内联元素)。它们是很重要的两个概念,既然说到概念就先看看块状元素和内联元素的定义,在定义中你要留意它们两个的不同之处。

块状元素

一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素

内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为“a”。

在css设置display:block;就会将内联转换成块状,高和宽就会生效。

而设置display:inline;就会将块状转换成内联。

设置display:none;什么也不会显示。

以下我们来试验一下:

例:html>

span{

width:200px;

height:200px;

background:gray;

display:block;

}

当面对两个选择时,抛硬币总能奏效,因为在你把它抛在空中的那一秒里,你突然知道你希望它是什么。

以上代码是将(内联)元素转化为块状这样效果如下:

62eb5704c04758931ff6aab0954aaa54.pnghtml>

span{

width:200px;

height:200px;

background:gray;

display:block;

}

div{

width:200px;

height:200px;

background:red;

/*display:none;*/

display:inline;

}

当面对两个选择时,抛硬币总能奏效,因为在你把它抛在空中的那一秒里,你突然知道你希望它是什么。

当面对两个选择时,抛硬币总能奏效,因为在你把它抛在空中的那一秒里,你突然知道你希望它是什么。

以上代码是将

(内联)元素转化为块状这样效果如下:

f84fcc25729a8147a6c67c647748da4a.png

我们再试下使用display:none  所出现的效果:html>

span{

width:200px;

height:200px;

background:gray;

display:block;

}

div{

width:200px;

height:200px;

background:red;

display:none;

}

当面对两个选择时,抛硬币总能奏效,因为在你把它抛在空中的那一秒里,你突然知道你希望它是什么。

当面对两个选择时,抛硬币总能奏效,因为在你把它抛在空中的那一秒里,你突然知道你希望它是什么。

那么看下效果:

b530e0a744cff6cf312e10d66559e1e0.png

出来的效果是不是让人感觉

已经被删了呢?其实不是。注意看代码!!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值