第十六周总结-CSDN博客

本文链接：https://blog.csdn.net/qq_74114417/article/details/131029577

本周完善了利用css3实现遮挡层及其过渡效果，学习了清除浮动的六种方法，包括伪元素法。此外，还接触了CSS中的动画、2D/3D转换、flex布局和媒体查询等新知识。实训周的忙碌导致学习进度稍慢，计划下周重点复习和应用flex布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第十六周总结

一. 完善上周学习的内容

1. 利用css3实现一个遮挡层，并且在鼠标滑动过程中具有过渡效果

首先，需要创建一个带有遮挡层的容器，可以使用HTML的div元素和CSS中的伪元素::before或::after来实现。比如：

<div class="container">
  <div class="overlay"></div>
  <!-- 在这里添加内容 -->
</div>

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩颜色和透明度 */
}

接下来，需要在鼠标滑动时改变遮挡层的透明度。可以使用CSS的transition属性在两个不同的状态之间平滑地过渡。比如:

.overlay {
  opacity: 0; /* 初始值为0，即完全透明 */
  transition: opacity 0.5s ease-out; /* 过渡时间和速度曲线 */
}

.container:hover .overlay {
  opacity: 1; /* 鼠标划过时遮罩完全不透明 */
}

最后，将你想显示的内容放置在容器的内部，并设置其所需的样式。

.container {
  /* 其他布局样式 */
  text-align: center;
}

.container h1 {
  font-size: 3rem;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

2. 清除浮动的六种方法

额外标签法

1.1 末尾标签法

通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标签，结构化比较差，所以不推荐使用。下面三种写法都适用：

写法一：直接用style
<div style="clear:both"></div>
写法二：使用clear类
<style>.clear { clear:both }</style> <div class="clear"></div>
写法三：可以使用br等别的块级元素来清除浮动
<style> .clear { clear:both } </style> <br class="clear" />

1.2 内部标签法

把div放进父盒子里，这样盒子会撑开，一般也不会用。

overflow

给父级元素添加overflow样式方法。
这种方法代码比较简洁，可以通过触发BFC方式，但是因为本身overflow的本质是溢出隐藏的效果，所以有的时候也会有一些问题存在，比如内容增多的时候不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素。
```
   /* 加上这句话，就可以清除浮动   overflow = hidden|auto|scroll 都可以实现*/
.father {overflow: auto; }
```

伪元素法（最常用）

3.1 使用after伪元素清除浮动

after是在父元素中加一个盒子，这个元素是通过css添加上去的，符合闭合浮动的思想，结构语义化正确。

父元素中加一个类名为clearfix。但是这个方法IE6-IE7不识别，要进行兼容，使用zoom:1除法haslayout来清除浮动。

.clearfix:after{
    content:".";  /*尽量不要为空，一般写一个点*/
    height:0;     /*盒子高度为0，看不见*/
    display:block;    /*插入伪元素是行内元素，要转化为块级元素*/
    visibility:hidden;      /*content有内容，将元素隐藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7识别 */
}

3.2 after伪元素空余字符法

父元素中加一个类名为clearfix，也需要兼容IE6-IE7

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}

3.3 使用before和after双伪元素清除浮动(推荐)

这种方法完全符合闭合浮动思想。给父元素加一个类名为clearfix，需要兼容IE6-IE7

.clearfix:before, .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }