前端小组考核总结（第一次）

漠–

已于 2022-04-12 21:11:56 修改

阅读量418

点赞数 3

分类专栏：前端文章标签： html css3 css

于 2022-04-12 20:24:58 首次发布

本文链接：https://blog.csdn.net/m0_61122217/article/details/124127477

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

简答题
代码题：
- 1.用css画一条0.5px的线
- 2.使用css实现淡入淡出动画效果
附加题：

简答题

1.常见的块级元素和行内元素有哪些？说说行内元素和块级元素的主要区别

常见的块级元素：p，div，table，ul，dl，ol等
行内元素：img，a，input，span，strong等
主要区别：块级元素独自占一行，行内元素不肚子占一行；块级元素的大小可以控制，而行内元素的大小不可控制。

2.去掉ul li 前面的小点，需要使用什么属性？具体方法是什么？

需要使用list-style
具体方法：

ul {
  list-style: none;
}

3.清除浮动的方法有哪些？

（1）额外标签法
在父元素的后面添加一个标签，再给该标签添加一个 clear: both 即可
（2）父元素添加overflow属性
给父元素添加 overflow：hidden，触发BFC方式，实现清除浮动
（3）使用after伪元素清除浮动

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

.clearfix {
    *zoom: 1;
}

（4）使用before和after双伪元素清除浮动

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

其中第三种和第四种在实际开发中比较推荐使用

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

基本选择器：通配符选择器，标签选择器，id选择器，类选择器，属性选择器；
伪类选择器：伪类选择器，伪元素选择器；
关系选择器：后代选择器，子元素选择器，相邻选择器，兄弟选择器。
优先级算法：先计算权重，权重相同时遵循就近原则（也就是后出现的那个）；
权重计算方式：
标签选择器权重为1，类选择器、伪类选择器、属性选择器权重为10，id选择器的权重为100，通配符的权重为0，!important的权重为为无穷大。（权重值又称特指度值）

5.css中哪些样式可以继承？

字体系列属性：font、font-family、font-weight、font-size、font-style；
文本系列属性：
内联元素：color、line-height、word-spacing、letter-spacing、text-transform；
块级元素：text-indent、text-align；
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout；
列表布局属性：list-style。
这些属性太多了，简记为：以color、font、text、line开头的属性可以继承即可。
拓展：
不可以继承的属性：
display：规定元素生成框的类型；
文本属性：vertical-align、text-decoration；
盒子模型的属性：width、height、margin、border、padding；
背景属性：background、background-color、background-image；
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip。

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

display：none

让元素直接消失，不再占用空间

visibility：hidden

隐藏元素，但依旧占用空间

opacity：0

7.你是否了解过flex布局？有哪些常用的属性？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
属性：
flex-direction —— 决定主轴的方向
flex-wrap —— 定义当一条轴线排不下，如何换行
flex-flow —— 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content —— 定义了项目在主轴上的对齐方式
align-items —— 定义项目在交叉轴上如何对齐
align-content —— 定义了多根轴线的对齐方式（项目只有一根轴线时不起作用）

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

一

margin：auto auto;

二

div {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}

三

div {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

9.说说你知道的中 animation 和 transition的属性以及作用

animation：
animation-name 用来引用动画
animation-duration 控制动画持续的时间
animation-timing-function 控制动画的运动曲线
animation-delay 控制动画多久以后开始
animation-iteration-count 控制动画的执行次数（infinite为无限次）
animation-direction 控制动画是否反向播放
animation-fill-mode 控制动画结束时的状态
transition：
transition-property 指定属性的name、transition效果
transition-duration 指定完成过渡的时间
transition-timing-function 指定完成过渡的运动曲线
transition-delay 指定过渡在延迟多久开始

10.你知道哪些定位？说说他们的区别

绝对定位
脱离文档流
元素使用绝对定位之后不占据原来的位置（脱标）
元素使用绝对定位，位置是从浏览器出发。
嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
给行内元素使用绝对定位之后，转换为行内块。
相对定位
未脱离文档流
还占据原来的位置
使用相对定位，位置从自身出发
父元素相对定位，子元素绝对定位（子绝父相）
行内元素使用相对定位不能转行内块
固定定位
脱离文档流
不占据原来的位置
相对于浏览器进行定位
会将元素转化为行内块

11.BFC是什么？BFC的作用？

BFC即块格式化上下文，它决定元素的内容如何渲染以及与其他元素的关系和交互。一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。
BFC的作用：
清除浮动（1.当一个元素浮动后，会影响附近的文字的行为。2.浮动元素与处在正常流的元素重叠）
解决外边距塌陷
解决宽度自适应的两栏布局
拓展：创建BFC的条件
根元素，也就是html元素
overflow属性值（处理块级元素溢出的内容）＝hidden|auto或scroll(≠visible)的块级元素
Float不为none的浮动元素
position属性是fixed或absolute的定位元素；
display属性为inline-block,table-block,table-caption或flex。
IFC是行级格式化上下文
它有这样的一些布局规则：
行级上下文内部的盒子会在水平方向，一个接一个地放置。
当一行不够的时候会自动切换到下一行。
行级上下文的高度由内部最高的内联盒子的高度决定。
作用：
水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

代码题：

1.用css画一条0.5px的线

由于最小的单位为1px，所以这里我们采用定义长度或高度为1px，再对其进行缩放操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale
    =1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 1px;
            transform: scaleY(0.5);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale
    =1.0">
    <title>Document</title>
    <style>
        @keyframes move {
            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        div {
            width: 200px;
            height: 200px;
            opacity: 0;
            background-color: pink;
            animation: move 3s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

3.使用css实现一个，选中行变色的细边框的表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale
    =1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 50px;
            background-color: pink;
        }

        div:hover {
            background-color: red;
        }
    </style>

</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

附加题：

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: pink;
            overflow: hidden;
        }

        @keyframes move {
            0% {}

            50% {
                transform: translateX(-100px);
            }

            100% {}
        }

        img {
            animation: move 6s 1s infinite;
        }
    </style>
</head>

<body>
    <div class="a">
        <!-- 这里的图片地址可以换 -->
        <img src="img/bear.png" alt="">
    </div>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale
    =1.0">
    <title>Document</title>
    <style>
        .pie {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: pink;
            /*线性渐变，给右半部分着色*/
            background-image: linear-gradient(to right, transparent 
            50%,skyblue 50%);
        }

        .pie::before {
            content: '';
            display: block;
            margin-left: 50%;
            height: 100%;
            /*让伪元素变成一个半圆*/
            border-radius: 0 50px 50px 0;
            background: pink;
            /*希望蒙版围着圆的中心点旋转*/
            transform-origin: left;
            /*旋转伪元素，要显示40%的比例，我们可以设置
            0.4*360=144deg*/
            transform: rotate(144deg);
        }
    </style>
</head>

<body>
    <div class="pie"></div>
</body>

</html>

涉及的知识盲区
线性渐变
background-image：linear-gradient(to 方向/角度，颜色一，颜色二，…，颜色n)

3.要求使用至多两个元素实现以下效果（二选一）：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 0;
        }

        .a {
            position: relative;
            top: 11px;
            display: inline-block;
            width: 200px;
            height: 100px;
            background-color: pink;

        }

        .b {
            content: '';
            display: inline-block;
            position: absolute;
            left: 0;
            top: 10px;
            vertical-align: middle;
            height: 1px;
            width: 100px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 0;
        }

        .a {
            position: relative;
            display: inline-block;
            width: 200px;
            height: 100px;
            background-color: pink;

        }

        .b {
            content: '';
            display: inline-block;
            position: absolute;
            left: 200px;
            top: 25px;
            vertical-align: middle;
            height: 50px;
            width: 1px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

</html>

漠–

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端小组考核总结（第一次）

文章目录1.常见的块级元素和行内元素有哪些？说说行内元素和块级元素的主要区别2.去掉ul li 前面的小点，需要使用什么属性？具体方法是什么？3.清除浮动的方法有哪些？4.你知道哪些选择器？CSS优先级算法如何计算？5.css中哪些样式可以继承？6.让一个元素不可见的方法（至少两种），并说说他们的区别7.你是否了解过flex布局？有哪些常用的属性？8.让一个div水平垂直居中的方法（至少两种）9.说说你知道的中 animation 和 transition的属性以及作用10.你知道哪些定位？说说他们的区别1
复制链接

扫一扫