HTML + CSS 连载 | 13 - HTML 元素的隐藏和溢出一、HTML 元素编写的注意事项 对于块级元素和 i
一、HTML 元素编写的注意事项
对于块级元素和 inline-block 元素，可以包含其他任何元素，包括块级元素、行内级元素、inline-block 元素，一个特殊的情况是，p 元素作为块级元素不能包含其他块级元素。
对于行内级元素来说，一般只能包含行内级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1></h1>
<p></p>
<a href=""></a>
<img src="" alt="">
</div>
<!-- 特殊情况，p 元素中不要放div -->
<p>
123
<div>div</div>
456
</p>
<!-- 行内级元素中不要放块级元素 -->
<span>
321
<div>alpha</div>
<p>bravo</p>
456
</span>
</body>
</html>
二、HTML 元素的隐藏
HTML 隐藏元素是一种让元素不被用户直接看到的方法。它可以让我们在网页上隐藏一些元素，这些元素将不会被用户所看到，但它们的内容仍然存在于网页中。
有些时候，隐藏元素的作用非常重要。例如，当我们需要在网页上添加一些敏感信息时，我们可以使用隐藏元素来防止这些信息被不必要的人看到。同时，它也可以用来隐藏一些广告或者其他不必要的内容。
方式一：display 设置为 none
元素不显示出来，并且不占据位置，不占据空间，就跟不存在一样
方式二：visibility 设置为 hidden
设置为 hidden，虽然元素不可见，但是会占据元素应该占据的空间，默认为 visible，元素是可见的
<!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>
.box {
display: none;
}
.info {
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">我是box1</div>
<div>我是div</div>
<div class="info">我是info1</div>
<div>我是div</div>
</body>
</html>
方式三：rgba 设置颜色，将a的值设置为0
rgba 的 a 设置的是 alpha 的值，可以设置透明度，不影响子元素
p9-juejin.byteimg.com/tos-cn-i-k3…?
方式四：opacity 设置透明度，设置为 0 设置整个元素的透明度，会影响所有的子元素
<!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>
.box1 {
/* alpha：只是是指当前的 color/bgc 其中的颜色透明度为某一个值，不会影响子元素 */
/* 通过颜色来隐藏，不会隐藏子元素*/
color: rgba(255, 0, 0, 0);
/*通过设置背景颜色来隐藏，不会隐藏子元素*/
background-color: rgba(0, 0, 0, 0);
}
.box2 {
opacity: 0;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">
我是box1
<!-- 使用颜色来隐藏，不会隐藏子元素 -->
<img src="../images/1228984.png" alt="">
</div>
<div class="box2">
我是box2
<img src="../images/2970184.png" alt="">
</div>
</body>
</html>
三、HTML 元素的溢出
HTML 中子元素默认是存在于父元素的内容区域中的，理论上来说子元素最大可以等于父元素的内容区的带下，但是如果子元素的大小超过了父元素的内容区，超过的部分会在父元素的内容区外显示，这种现象称为 HTML 元素的溢出。
CSS 的 overflow 属性用于控制 HTML 元素溢出的行为，有以下几个值可选：
visible：溢出的内容照样可见hidden：溢出的内容直接裁剪scroll：溢出的内容直接裁剪，但是可以通过滚动机制查看，会一直显示滚动条，滚动条占据的空间属于 width 和 heightauto：自动根据内容是否溢出来决定是否提供滚动机制
<!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>
.box {
width: 300px;
height: 100px;
background-color: antiquewhite;
overflow: visible;
}
</style>
</head>
<body>
<div class="box">
特斯拉在赢得著名的19世纪80年代的“电流之战”及在1894年成功进行短波无线通信试验之后，特斯拉被认为是当时美国最伟大的电气工程师之一。他的许多发现被认为是具有开创性的，是电机工程学的先驱。1891年，特斯拉在成功试验了把电力以无线能量传输的形式送到了目标用电器之后，致力于商业化的洲际电力无线输送， 并且以此为设想建造了沃登克里弗塔。
</div>
</body>
</html>
在浏览器中打开页面，超出的部分仍然是可见的，并且 overflow 属性的默认值就是 visible。
修改 overflow 属性的属性值为 hidden：
.box {
width: 300px;
height: 100px;
background-color: antiquewhite;
overflow: hidden;
}
设置为 hidden 后，超出父元素部分的内容会被隐藏：
修改 overflow 属性的属性值为 scroll；
.box {
width: 300px;
height: 100px;
background-color: antiquewhite;
overflow: scroll;
}
设置为 scroll 之后，不管有没有超出内容，滚动条一定会占据一定的宽度；
因此我们可以将 overflow 的值设置为 auto，也就是可以根据内容自动添加滚动条；
.box {
width: 300px;
height: 100px;
background-color: antiquewhite;
overflow: auto;
}
具体效果如下：
四、CSS 不生效的原因
有时候编写的 CSS 属性不生效，可能是因为
- 选择器的
优先级太低 - 选择器
没有选中对应的元素 - CSS属性的使用方式不对
- 元素
不支持此CSS属性的设置，比如 span 元素不支持 width 和 height 的设置 - 浏览器
不支持此CSS属性，比如旧版本的浏览器不支持CSS3的一些属性 - 被同类型的
CSS属性覆盖，比如 font 覆盖了 font-size
在编写 CSS 的时候建议充分利用浏览器的开发者工具进行调试（增加、修改样式）、差错！
转载自:https://juejin.cn/post/7294442519966105634