块级元素和行内元素,行内块元素
2021/11/14 23:40:55
本文主要是介绍块级元素和行内元素,行内块元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
行内元素,块级元素和行内块元素
学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签。而某些不会独占一行,典型如 <span> 标签。其实这是因为 CSS 的标签是有区分元素类型的,这些元素类型分为行内元素,块级元素和行内块元素。
一.行内元素
又称为内联元素,行内元素的大小是靠本身内容的大小,宽高都设置无效。
span{width: 300px;height: 300px;background: lightgreen;}
常见特点如下:
- 和相邻的行内元素在一行上
- 高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效
- 默认的宽度就是它本身的宽度
- 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)
常见的行内元素:
<a>,<strong>,<b>,<em>,<del>,<span>
二.块级属性
每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性。
div{width: 300px;height: 300px;background: lightblue;} <div>我是div</div> <div>我是div</div>
常见的特点如下:
- 块级元素会独占一行
- 高度,行高,外边距和内边距都可以单独设置
- 宽度默认是容器的100%
- 可以容纳内联元素和其他的块级元素
常见的块级属性:
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
三.行内块属性
在行内元素中有几个特殊的标签,<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属性
常见的特点如下:
- 和相邻的行内元素(行内块)在一行上,但是中间会有空白的间隙
- 默认的宽度就是本身内容的宽度
- 高度,行高,内边距和外边距都可以设置
四.另外注意的是:块级元素和行内元素的转化
通过 display 属性转换,其中 display 有三个值:
1.块转行内:display:inline;
2.行内转块:display:block;
3.块,行内元素转换为行内块:display:inline-block
这篇关于块级元素和行内元素,行内块元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了