前端小组考核改错

一.简答题

1.清除浮动的方法有哪些

（1）额外标签法

在浮动元素末尾添加一个块级元素标签并给其设置属性clear:both;。更好是用双墙法，即在浮动元素最前面和最后面都添加一个额外的标签。

优点：通俗易懂，书写方便
缺点：添加许多无意义标签，结构化差

（2）给父级添加overflow属性

给父级元素添加overflow属性，将属性值设置为hidden,auto或scroll
优点：代码简洁
缺点：无法显示溢出的部分

（3）:after伪元素清除浮动法

给父级添加即可，代码如下

.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            *zoom: 1;  
        }

（4）双伪元素清除法

也是给父级添加，代码如下

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

2.让元素不可见的方法，有什么区别

（1）display:none;

不保留原来位置

（2）visibility:hidden;

保留原来位置

（3）opacity:0;

元素透明度（0-1），设置为0，隐藏元素但仍然占有原先位置

3.flex布局

flex布局又称“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
当我们为父盒子设置flex布局后，子元素的float，clear和vertical-align属性将失效
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

（1）常见的父项属性
flex-direction:设置主轴方向
justify-content: 设置主轴上的子元素的排列方式
flex-wrap: 设置子元素是否换行
align-content: 设置侧轴上的子元素的排列方式（多行）
align-items: 设置侧轴上的子元素的排列方式（单行）
flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

（2）常见的子项属性
flex: 子项目占的份数
align-self: 控制子项自己在侧轴的排列方式
order: 定义子项的排列顺序（前后顺序）

4.animation属性的作用

animation（动画）：动画是使元素从一种样式逐渐变化为另一种样式的效果

代码如下

@keyframes 动画名称 {
            0% {
                transform: translate(0,0);
            }
            100% {
                transform: translate(0,0);
            }
        }

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
用百分比来规定变化发生的时间，或用关键词“from”和“to”
动画的两个必须属性：animation-name: 动画名称; 和 animation-duration: 持续时间;
 

5.BFC是什么，作用如何

BFC即块级格式化上下文
BFC属于普通流，相当于一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.

触发BFC属性的条件:
(1) 块级元素具有overflow ，且值不是 visible
(2) float不为none的浮动元素
(3) 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
(4) 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex

BFC的具体作用
(1) 避免外边距重合
(2) 清除浮动
(3) 阻止元素被浮动元素覆盖
 

二.编程题

1.用CSS画一条0.5px的线

html

css

.box {
        height: 1px;
        width: 100%;
        background-color: aqua;
        transform: scaleY(0.5);
      }

2.使用CSS实现淡入淡出的动画效果

3.使用CSS实现一个简单的轮播图

    
    
    
    
    



    

        请看这个div的“上边框”是只有一半的