前端小组第一次考核

一：简答题

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

(1).额外标签法也称隔墙法。(不常用)
即在浮动元素末尾添加一个空的标签（必须是块级元素），给其设置属性clear:both;即可。
更好的是使用双墙清除浮动，即在浮动元素的前面添加一个空的块级元素标签，也给其设置clear:both;属性即可。
优点：通俗易懂，书写方便
缺点：添加许多无意义标签，结构化差

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

(3).:after伪元素法 （常用）
让父级元素调用即可

css:

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

(4).双伪元素清除浮动 （常用）
本质上就是双墙法的高级应用，运用到了伪元素选择器
优点：代码简洁，没有添加新的标签，使用便捷，照顾低版本浏览器

css:

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

---

2.你知道哪些选择器？CSS优先级算法如何计算？

(1)CSS基础选择器：标签选择器，类选择器，id选择器，通配符选择器

(2)css复合选择器：后代选择器，子元素选择器，并集选择器，伪类选择器
CSS复合选择器详解

(3)css3新增的选择器：属性选择器，结构伪类选择器，伪元素选择器

CSS优先级算法：
当同一个元素指定多个选择器，就会有优先级产生
选择器相同时，则执行层叠性
选择器不同时，则根据权重进行执行

选择器	权重
继承 ， *	（0,0,0,0）
标签选择器	(0,0,0,1)
类选择器，伪类选择器	(0,0,1,0)
ID选择器	(0,1,0,0)
行内样式 style=“”	(1,0,0,0)
!important	无穷

权重的叠加:
如果是复合选择器，则会有权重叠加，需要计算权重
例如 .nav ul li (0,0,1,2)
只会叠加，不会进位，权重越大，优先级越高

---

3.让一个元素不可见的方法（至少两种），说说区别

(1)display:none;
使元素不可见，不会占用任何空间

(2)visibility:hidden;
隐藏元素后，继续占有原先位置

(3)opacity:0;（重要）
元素透明度（0-1），设置为0，隐藏元素但仍然占有原先位置

---

4.谈谈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: 定义子项的排列顺序（前后顺序）

---

5.让一个div盒子水平垂直居中的方法（至少两种）

HTML：

<div></div>

CSS:
(1)：外边距实现

	div {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: aqua;
      }

(2)：绝对定位实现

	div {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 0;
        left: 50%;
        margin-left: -50px;
        background-color: aqua;
      }

(3)：flex布局实现

		body {
            display: flex;
            justify-content: center;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

---

6.说说animation和transition的属性和作用

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

格式：

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

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

---

transition（过渡）：是从一个状态渐渐过渡到另外一个状态

格式：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

属性：想要变化的css属性，宽度高度，背景颜色，写一个all就可以
花费时间： 单位是秒s，必须写单位
运动曲线：默认是ease（可以省略）
何时开始：单位是s，可以设置延迟触发的时间（可以省略）

---

7.你知道哪些定位？说说区别

（1）静态定位是元素的默认定位方式，无定位的意思
语法：

 选择器 {
 	position: static;
 }

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

（2）相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：

 选择器 {
 	position: relative;
 }

相对定位的特点：
1.他是相对于自己原来的位置来移动的，参照点是原来的位置
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它

（3）绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：

 选择器 {
 	position: absolute;
 }

绝对定位的特点：
1.如果没有祖先元素或者祖先元素没有定位时，则以浏览器为准定位
2.如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置

（4）固定定位是元素固定于浏览器可视区的位置
语法：

 选择器 {
 	position: fixed;
 }

固定定位的特点：
1.以浏览器为可视窗口为参照点移动元素
2.固定定位不再占有原先的位置

---

8.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:

<div class="box"></div>

css:

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

思路：
由于浏览器最小单位是1px，所以直接设置0.5px完全是不可行的
这里用到CSS3新增的属性transfrom缩放属性
设置高度为1px的线，给其缩小0.5倍即可

---

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

html：

<div></div>

css：

div {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: aqua;
            border-radius: 50%;
            animation-name: move;
            animation-duration: 3s;
        }
        @keyframes move {
            0% {
                opacity: 0;
            }
            25% {
                opacity: 0.5;
            }
            50% {
                opacity: 1;
            }
            75% {
                opacity: 0.5;
            }
            100% {
                opacity: 0;
            }
        }

思路：
这里运用到animation属性和opacity透明属性

---

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

html:

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
   </div>

css:

 * {
            /* 清楚内外边距 */
            padding: 0;
            margin: 0;
        }
        .box {
            /* 父盒子设置flex布局 */
            display: flex;
            /* 让子元素水平居中 */
            justify-content: center;
            align-items: center;
        }
        ul li {
            /* 利用定位，让li放在一行上显示 */
            position: absolute;
            top: 0;
            list-style: none;
            width: 100%;
            height: 100%;
            /* 调用动画 */
            animation-name: move;
            animation-duration: 6s;
            animation-iteration-count: infinite;
        }
        ul {
            /* 设置具体的父盒子，让其在屏幕中间显示 */
            /* 让子元素li从右往左移动 */
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 200px;
            background-color: aqua;
            transform: translateY(270px);
            overflow: hidden;
        }
        /* 利用结构伪类选择器设置每一个轮播图片 */
        li:nth-child(1) {
            background-color: aqua;
        }
        li:nth-child(2) {
            background-color: brown;
            left: 100%;
        }
        li:nth-child(3) {
            background-color: aquamarine;
            left: 200%;
        }
        li:nth-child(4) {
            background-color: blue;
            left: 300%;
        }
        li:nth-child(5) {
            background-color: brown;
            left: 400%;
        }
        /* 设置动画，让li从右向左移动 */
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            20% {
                transform: translateX(-100%);
            }
            40% {
                transform: translateX(-200%);
            }
            60% {
                transform: translateX(-300%);
            }
            80% {
                transform: translateX(-400%);
            }
            100% {
                transform: translateX(0);
            }
        }

思路:
1.利用ul li来具体实现
2.li设置五个需要轮播的图片，利用flex布局将其放在一行上面

3.设置动画，让其从右往左，父盒子固定，就形成轮播图了

---

4.使用div + css实现一个圆形，红色占60%，绿色占40%

html：

<div class="box"></div>

css：

 .box {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        /* 设置大背景为颜色多的红色 */
        background-color: red;
        margin: 50px auto;
    }
    /* 利用伪元素选择器 */
    /* 首先先让圆分两半 */
    .box::before {
        content: '';
        display: block;
        float: left;
        width: 50px;
        height: 100px;
        /* 设置左半圆 */
        border-radius: 50px 0 0 50px;
        background-color: red;
        /* 让左半圆绕着右中心点的基点逆时针旋转覆盖一部分绿色 */
        transform-origin: right;
        transform: rotate(-36deg);
    }
    .box::after {
        content: '';
        display: block;
        float: right;
        width: 50px;
        height: 100px;
        /* 设置右半圆 */
        border-radius: 0 50px 50px 0;
        background-color: green;   
    }

思路：
1.三个部分 大的背景部分 左半圆红色 右半圆绿色
2.让大背景部分设置为颜色多的红色，让其在左半圆逆时针旋转过后，剩余部分还显示红色
3.右半圆保持不动，让左半圆绕着右基点逆时针旋转覆盖住一部分

---

5.要求至多两个元素实现以下效果

html：

<div></div>

css：

div {
            width: 200px;
            height: 100px;
            margin: 100px auto;
            background-color: aqua;
        }
        div::before {
            content: '';
            display: block;
            width: 100px;
            height: 100px;
            border-top: 10px solid green;
        }

思路：
就利用伪元素选择器，设置子盒子为父盒子一半，父盒子不设置上边框，子盒子设置上边框即可

---