子元素绝对定位后，自动撑开宽度

当子元素 position:absolute后，其宽度默认继承父元素的宽度，当子元素内容过长时候，则内容会折行。 如图：

给子元素添加：

white-space:nowrap;

效果图：

添加white-space:nowrap;后，子元素的宽度自动撑开了。

---

visibility:hidden和display:none的区别

• 相同点：都是隐藏元素
• 不同点：
  • display:none;不占位置
  • visibility:hidden;占位置

---

fixed相对于父元素定位

---

使用 before、after伪元素

::before, ::after伪元素，默认是一个行内元素，所以当你设置width,和height的时候，是无效的。需要将元素设置为 inline-block(行内块状元素)；另外，content属性是一定要写的。

.item-title-text::before{
    content: '';
    display: inline-block;
    width: 8rpx;
    height: 30rpx;
    background-color: #CCAF7E;
    color: #CCAF7E;
    border-radius: 6rpx;
    margin-right: 12rpx;
    margin-top: 4rpx;
}

效果图如下：

---

CSS文件引用：

@import “cssName.css";

---

CSS基数和偶数项

li:nth-child(odd){}  /** 基数 **/
li:nth-child(even){} /** 偶数 **/

---

解决 inline,inline-block元素之间的间隙问题

比如多个span标签横向排列，或者是多个img标签竖直排列。中间，是有间距的。

1. 方法一：给父元素设置 font-size:0;
2. 方法二：先设置成inline-block;再用flex；
3. tip：如果图片竖直排列的话出现间隙，可以设置图片为display:block；

---

filter 滤镜

可以设置毛玻璃效果，反色，全灰色，阴影，等等。如:

filter: blur(1px); 

filter: grayscal(100%); /** 国家公祭日，很多网站的页面，都是灰色的 **/

---

calc算术计算

width: calc(100vw - 20px);

---

:hover伪类

:hover在鼠标移到链接上时添加的特殊样式。

提示:  :hover 选择器器可用于所有元素，不仅是链接。 如：h3:hover{color:red}

---

透明度 rgba和opacity（重要）

rgba设置的颜色值，子元素不会继承父元素的透明度。

opacity设置的值， 子元素继承父元素的透明度。

---

好看的效果

效果1 : 旋转的叠加的图片

思路：给每个盒子添加边框和阴影，然后再旋转角度。

部分代码如下：

<div class="box box1">
  <img src="./img/tiger.png" alt="" width="100" height="100">
  <p>图片1</p>
</div>
<div class="box box2">
  <img src="./img/panda.png" alt="" width="100" height="100">
  <p>图片2</p>
</div>

.box{
  background-color: #fff;
  box-shadow: 4px 4px 4px #ddd;
  border: 1px solid #eee;
}
.box1{
  transform: rotate(30deg);
  float:left;
  margin-right:40px;
}
.box2{
  transform: rotate(-30deg);
  float:left;
}