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:hover+div{display: block;}</style></head><body><div class="dw"><button>鼠标悬浮显示</button><div> div-none</div></div></body></html>
点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^
