css块级元素与行内元素讲解

css块级元素与行内元素讲解
css的块级元素与行内元素是我们在布局中的基础,但是一般的不会去细究它们之间的区别今天就把自己的心得写出来。

常见块级元素:div p form ul ol li 等;
常见的行内元素:span stronh em;

区别主要有一下几点:
1. 块级元素会独自占一行,行内元素不会独自占一行且相邻的两个块级元素可以在同一行显示
如图:
在这里插入图片描述
2.行内元素设置height 与 weith 是无效的,块级元素可以设置height 与 weith,不管块级元素的宽度设置为多少都会占一行展示的
如图:
在这里插入图片描述
3. 行内元素水平方向的margin和padding如margin-right、padding-left可以产生边距效果,但是竖直方向的如padding-bottom和margin-top不会产生边距效果,块级元素可以设置margin和padding属性,
如图:
在这里插入图片描述
4. 块级元素与行内元素的相关属性 display
块级元素为 display: block 行内元素为:display: inline,可以通过切换属性值来实现块级元素与行内元素之间的转换
5. 还有一个属性可以使元素既具有行内元素的属性又可以有块级元素的属性,写法如下:
display: inline-block

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值