CSS3学习（3）-CSDN博客

本文链接：https://blog.csdn.net/qq_62527610/article/details/141359479

元素就是标签的意思，比如一对 <p></p>标签，可以叫p元素。

CSS显示

1.隐藏元素

h1.hidden {visibility: hidden;}

<h1>这是可见的标题</h1>
<h1 class="hidden">这是隐藏的标题</h1>
visibility可见性； hidden 隐藏的；
被隐藏的元素依然占着空间。就像披着隐身衣的哈利,有碰撞体积。

2.不显示元素

h1.hidden {display: none;}

<h1>这是一个可见的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</h1>
不显示和隐藏的区别就像，鬼魂摸不到，没有阴阳眼也看不见，隐形人摸得到，看不见。
可以通过使用 javascript 打开阴阳眼，将 display:none 变成 display:block。

3.元素转换

display: inline; 把块级元素显示为行内元素
display: block; 行内元素–>块级元素
意思：地铁上有一个人像一‘块’长方体，躺在座位上，他一个人占了一‘行’座位（大概有4-6个人坐的位置），这个车厢坐满了，你要么走去其他车厢坐（换行），要么让他坐起来（块–>行内）。

CSS定位

1.相对游览器窗口

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
不管游览器页面怎么缩放，一直位于游览器的固定位置(例如右下角)

2.相对元素正常位置

div.relative {
position: relative;
left: 30px;
}
元素正常位置意思就是没有任何规则时元素放哪，举例：在高铁站你站在第一位，排队等待过检票闸机，你离闸机很近，防止有人插队，此时有一位工作人员需要从此闸机进入，需要你后退两步（相对正常位置后退两步）。word里输入文字也是，一般都是顶格，而不是直接缩进，所以论文的首行缩进还得自己去调。

3.绝对定位

div.absolute {
position: absolute;
top: 80px;
right: 0;
}
举例：和朋友一起看集体照（电子版）时，你发现你位于第三排从左数第二个，不管是放大了看自己表情，还是缩小了看周围是谁，你都位于第三排第二个从左数第二个。
这里引申一点：绝对定位的元素会相对于最接近的，有定位的父元素进行定位。例如，当你把手机拿在手中水平往左移，那么手机照片里的你，相对地面也往左移了。

4.粘性定位

div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
意思：写入一个边的阈值，当页面滚顶到了规定值，它就粘在那里了。
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
webkit 内核（谷歌游览器）的要添加上私有前缀 -webkit-才有效，所以写了两个position。

5.重叠元素

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
重叠的意思就是多层叠加。如果为正数，表示离用户更近的层（相对屏幕而言），为负数表示离用户更远。爬出电视机的贞子的z-index就应该是正数。
举例：在word里插入图片，图片布局可以选择，位于文字下方（作为文字的背景图，看起来像ppt一样）。z-index: -1表示图片位于文字下方（因为此时文字位于默认层）。

CSS溢出

1.visible

overflow: visible;
溢出是可见的，内容将自动换行适应文本框，超出文本框的部分可见。想象一下高中写作文时，发现作文格子写满了，但你还有一句完美的总结，于是你将这句话写在了紧挨着最后一行的下方空白处。老师看卷子时，会发现你的作文“溢出”了，老师能看见这句话，只是整体试卷不那么美观了。

2.hidden

overflow: hidden;
溢出隐藏，内容将自动换行适应文本框，超出文本框的部分会被隐藏。想象一下，此时你发现天上的云样子很奇怪，于是拿起手机抬头拍照，你拍出了想要的照片，但你没发现，就在刚刚，你喜欢的人在不远处等着你路过，她偷偷看了你好几眼，但你一直在原地拍照，她以为你是想躲着她，就生气地走了。我们眼睛的视野范围是有限的，但地球online的渲染不是只有我们眼睛看到的部分，所以看不到的地方都算溢出信息，对我们而言都是隐藏的（看不到的）。