CSS中的显示模式及模式之间的互相转换
上一次介绍了css中的div和span标签和二者在使用中的区别,本文介绍关于显示模式和显示模式之间的转换。接着div和span,二者引出两个概念,块级元素和行内元素。块级元素:独占一行,如果没有设置宽高度,那么默认和父元素一样宽高,如果设置了宽高,那么就按照设置来显示。这个对于的是容器级标签。行内元素:不会独占一行,如果没有设置高度和宽度,那么默认和吗、内容一样宽,行内元素是不可以设置
·
上一次介绍了css中的div和span标签和二者在使用中的区别,本文介绍关于显示模式和显示模式之间的转换。
接着div和span,二者引出两个概念,块级元素和行内元素。
块级元素:独占一行,如果没有设置宽高度,那么默认和父元素一样宽高,如果设置了宽高,那么就按照设置来显示。这个对于的是容器级标签。
行内元素:不会独占一行,如果没有设置高度和宽度,那么默认和吗、内容一样宽,行内元素是不可以设置宽度和高度的。对于的是文本级标签。
行内块级元素:为了能够让元素既能够不独占一行,又可以设置宽度和高度,在行内元素中前提高块级元素,这样就可以达到设置宽度和高度的目的。
display的常用取值:
block 块级
inline 行内
inline-block 行内块级
part1 块和行内元素 默认显示结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式</title>
<style>
div{
height: 100px;
background: lightskyblue;
}
span{
height: 100px;
background: indianred;
}
</style>
</head>
<body>
<div>make it possible!</div>
<span>nothing is impossible!</span>
</body>
</html>
调试结果:
显示模式之间的转换:
块级和行内之间互相转换位置:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式</title>
<style>
div{
display: inline;
height: 100px;
background: lightskyblue;
}
span{
display: block;
height: 100px;
background: indianred;
}
</style>
</head>
<body>
<div>make it possible!</div>
<span>nothing is impossible!</span>
</body>
</html>
调试结果:
行内块元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示模式</title>
<style>
div{
display: inline-block;
height: 100px;
background: lightskyblue;
}
span{
display: inline;
height: 100px;
background: indianred;
}
</style>
</head>
<body>
<span>
nothing is impossible!
<div>make it possible!</div>
</span>
</body>
</html>
调试结果:
更多推荐
已为社区贡献2条内容
所有评论(0)