CSS显示模式

CSS显示模式

概述:显示模式是指元素以什么方式显示,如div默认独占一行,span默认可以多个在一行排列,了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素三大显示模式。

1、元素默认显示模式与元素特性总结

  • 本身属性为display:block的元素称为块级元素

    • 常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol

  • 本身属性为display:inline的元素称为行级元素

    • 常见行级元素:span,strong,em,i,a,b

  • 本身属性为display:inline-block的元素称为行级块元素

    • 常见行内块元素:img,input(表单元素后续会讲到)

2、块级元素特性总结

  • 独成一行,可以设置宽高

  • 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

  • 在不设置高度的情况下,块级元素的高度是它本身内容的高度

  • 可以设置上下左右的内边距和外边距

3、行内元素特性总结

  • 默认并排,不可以设置宽高,宽高取决于内容

  • 行内元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)

  • 行标签之间有间隙,不可以设置上下外边距

4、行内块元素特性总结

  • 默认并排,可以设置宽高,宽高取决于内容

  • 可以设置任意方向的内边距和外边距

  • 并排时中间有间距

5、元素类型转换

特殊情况下我们需要进行元素的模式转换,改变默认元素模式使其拥有另一种元素模式的特性,使用display属性能够将三者任意转换。

  • display:inline转换为行内元素 【不常用】

  • display:block转换为块状元素 【常用】

  • display:inline-block转换为行内块状元素 【比较常用】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值