文章目录
元素的显示方式和转换
块级元素
块级元素(inline):
块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。
常见块级元素:
header
,form
,ul
,ol
,table
,article
,div
,hr
,aside
,figure
,canvas
,video
,audio
,footer
特点:
- 块级元素会独占一行
- 高度,行高,外边距和内边距都可以单独设置
- 宽度默认是容器的100%
- 可以容纳内联元素和其他的块级元素
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div>块级元素1</div>
<div>块级元素2</div>
</body>
</html>
效果:
分析:
块级元素的高和宽可以被修改,而且块级元素会在一个块级元素之后另起一行。
行级元素
行级元素(block):
一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行。
常见行级元素:
a
,b
,strong
,span
,img
,label
,button
,input
,select
,textarea
特点:
- 和相邻的行内元素在一行上
- 高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效
- 默认的宽度就是它本身的宽度
- 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 150px;
height: 150px;
font-size: 40px;
background-color: cadetblue;
}
</style>
</head>
<body>
<span>行级元素1</span>
<span>行级元素2</span>
</body>
</html>
效果:
分析:
对他的高和宽进行修改,但是没有发生改变,对他的字体大小进行修改却发生了整体大小的改变,所以得出结论行级元素的宽高是与内容有关的,且不可修改高宽的属性,只能对内容修改。
行内块级元素
行内块级元素(inline-block):
他包含了行级元素与块级元素的特点,在同一行显示,可以设置元素宽度和高度,可以将块级元素和行级元素转化为行内块级元素。他不属于基本的元素,是通过修改获得的。
特点:
- 和其他行内或行内块级元素元素放置在同一行上
- 元素的高度、宽度、行高以及顶和底边距都可设置
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
width: 150px;
height: 150px;
font-size: 20px;
background-color: cadetblue;
display: inline-block;
}
</style>
</head>
<body>
<span>以前我是行级元素,</span>
<span>现在我只想做行内块级元素。</span>
</body>
</html>
效果:
分析:
他可以进行修改宽高,也属于同一行,包含着行级元素和块级元素的特点,他就是行!内!块!级!元!素!
显示方式之间的转化
想要转成什么显示方式 | 格式 |
---|---|
块级元素 | display:inline; |
行级元素 | display: block; |
行内块级元素 | display: inline-block; |
这些直接在元素里面添加就可以了,就会转换成相对应的格式。
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
font-size: 30px;
background-color: cadetblue;
display: inline;
}
</style>
</head>
<body>
<div>我以前是块级元素,</div>
<div>现在我是行级元素!</div>
</body>
</html>
效果:
分析:
在VSC中,修改宽高的代码已经出现了波浪线,证明他是错误的,所以现在的div
已经变成了行级元素。
毕竟编程我是初学者,难免有理解错误的地方,希望大家看完之后,发现错误可以评论出来,谢谢大家