CSS设置块元素和行内元素

2025-07-23 06:52:54

CSS设置块元素和行内元素 CSS-设置块元素和行内元素什么是行元素什么是块元素一：块元素块元素单独占据一行，并且排斥和其他元素在同一行，在浏览器中，块元素出现的形状是矩形，并且盛放其他元素。块元素 : 列表表格 div h1 p … 这些都是块元素二：行内元素行元素都是默认和其他元素在

CSS设置块元素和行内元素

CSS-设置块元素和行内元素

什么是行元素什么是块元素

一：块元素

块元素单独占据一行，并且排斥和其他元素在同一行，在浏览器中，块元素出现的形状是矩形，并且盛放其他元素。

块元素 : 列表表格 div h1 p … 这些都是块元素

二：行内元素

行元素都是默认和其他元素在同一行。其中就包括strong，em，span，input img。行内元素可以和其他元素位于同一行，不可以容纳块元素，但是可以容纳其他行内元素。

而且有些行元素是不可以设置宽高的比如:span strong em …

但是有些元素是可以设置宽和高的比如:input img …

还有其他的自己测试测试

display属性的使用

block 块元素
inline 行内元素
inline-block 行块元素简单来说就是行和块能在一行
none 元素隐藏不会占用文档空间

我们来根据这4个元素进行演示

block 块元素

我们拿<span>标签来做演示都知道这个标签是行元素不能设置宽和高那么我就想给他设置宽和高怎么办

案例:

<!DOCTYPE html>
<html lang=en>
<head><meta charset=UTF-8><title>Title</title><link rel=shortcut icon href=images/favicon.ico type=”image/x-icon”/><style>* {padding: 0px;margin: 0px;}span {/*将元素改变为块元素*/display: block;width: 100px;height: 100px;border: 2px sandybrown solid;overflow: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><span>一般来说男女朋友在分手的时候大多会选择好聚好散，但也有一部分会因为各种原因到最后落得是两败俱伤。</span></body>
</html>

inline 行元素

一般情况下如果主动将块元素设置为行元素那么设置宽和高将会失效

我们拿div举例都知道div是块元素那么我就想让他变成行元素和其他行元素在一行怎么办

案例:

<!DOCTYPE html>
<html lang=en>
<head><meta charset=UTF-8><title>Title</title><link rel=shortcut icon href=images/favicon.ico type=”image/x-icon”/><style>* {padding: 0px;margin: 0px;}
.dw{width: 200px;height: 100px;border: 2px sandybrown solid;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}span{border: 2px sandybrown solid;}.dw div {/*将元素改变为块元素*/display: inline;border: 2px #f47e84 solid;}</style>
</head>
<body>
<div class=dw>
<span>行元素</span>
<div>div-行元素
</div>
</div>
</body>
</html>

inline-block 行块元素(常用)

将块元素的换行取消保留块元素的特性

案例:

<!DOCTYPE html>
<html lang=en>
<head><meta charset=UTF-8><title>Title</title><link rel=shortcut icon href=images/favicon.ico type=”image/x-icon”/><style>* {padding: 0px;margin: 0px;}
.dw{width: 200px;height: 100px;border: 2px sandybrown solid;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}span{border: 2px sandybrown solid;}.dw div {/*将元素改变为块元素*/display: inline-block;border: 2px #c67df4 solid;height: 40px;}</style>
</head>
<body>
<div class=dw>
<span>行元素</span>
<div>div-行块元素
</div>
</div>
</body>
</html>

none 元素隐藏(常用)

将元素隐藏消失在文档中不占用空间其他元素会将此空间占用

但是如果将隐藏元素显示出来那么会出现在隐藏之前的位置

一般都是配合js使用的或者结构伪类(鼠标状态只能使用层次选择器来实现显示和隐藏)

怎么显示可以根据需求将元素设置为inline , block 或者inline-block

案例:

设置display: none;后

鼠标悬浮将隐藏div显示

代码

<!DOCTYPE html>
<html lang=en>
<head><meta charset=UTF-8><title>Title</title><link rel=shortcut icon href=images/favicon.ico type=”image/x-icon”/><style>* {padding: 0px;margin: 0px;}.dw {width: 200px;height: 100px;border: 2px sandybrown solid;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.dw div {border: 2px #c67df4 solid;height: 40px;display: none;}.dw button:hoverdiv{display: block;}</style>
</head>
<body><div class=dw><button>鼠标悬浮显示</button><div> div-none</div>
</div>
</body>
</html>

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/shuma/731249.html

本站网友下沙新远影城	24分钟前发表
2px sandybrown solid;position
本站网友露卡素左旋肉碱官网	12分钟前发表
200px;height
本站网友福州经济适用房	7分钟前发表
absolute;top
本站网友剖腹产疤	4分钟前发表
0px;margin
本站网友 dg怎么了	10分钟前发表
100px;border

CSS设置块元素和行内元素