CSS基础（6.display）

最新推荐文章于 2024-06-07 19:12:10 发布

__XYQ

最新推荐文章于 2024-06-07 19:12:10 发布

阅读量187

点赞数

分类专栏：前端基础知识文章标签： css

本文链接：https://blog.csdn.net/qq_41144008/article/details/78775342

版权

前端基础知识专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题目</title>
</head>
<body>
<div style="background-color: brown; display: inline">它默认为块级标签，这里强行改为行内标签</div>
<span style="background-color: greenyellow; display: block">它默认为行内标签，这里强行改为块级标签</span>
<div style="background-color: hotpink">yiqing</div>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题目</title>
</head>
<body>
<span style="background-color: red; height: 100px; width: 70px;">YiQing</span>
<!--这里改了高度和宽度，可是，实际上什么都没有改变-->
<!--行内标签无法设置高度和宽度-->
<a style="background-color: green;height: 100px; width: 70px;">XYQ</a>
<!--因为a标签也是行内标签，它也无法设置，只有块级标签可以这样操作-->
<br><br>
<span style="display: inline-block; background-color: blue; height: 100px; width: 70px;">YiQing</span>
<!--加上这样的操作，发现改变成功了
此时，它既有inline的属性，又有block的属性-->
</body>
</html>
<!--还有一个display: none,这里用不到，用于JS-->