前端小组考核试题

最新推荐文章于 2022-04-15 21:00:16 发布

_Vrtual .

最新推荐文章于 2022-04-15 21:00:16 发布

阅读量376

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_61466362/article/details/124107416

版权

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

块级元素：div、p、ul、dl、ol、table 等标签

行内元素：span、input、a、strong 等标签

区别：块级元素：独占一行、可以设置宽度、宽度默认为父元素宽度，高度由内容撑开

行内元素：一行可以显示多个、宽高默认由内容撑开、不可以设置宽度

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

list-style属性

方法：list - style ：none ；

3、清除浮动的方法

原理：闭合浮动

方法一：额外标签法（隔墙法）

给谁清除浮动就在其后额外添加一个空白标签，给其设置 clear ：both ；
  /* 隔墙法 新增盒子必须是块级元素 */
        .clear {
            clear: both;
        } 
方法二：给父元素添加overflow ：hidden
 /* 给父级元素加overflow */

      overflow: auto; 
方法三：使用after伪元素清除浮动
/* after伪元素 */
       .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix  {
            *zoom: 1;
        } 
方法四：使用双伪元素清除浮动
 .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
方法五：为父元素设置高度

4、你知道哪些选择器？css的优先级如何计算？

选择器：id 选择器、类选择器、标签选择器、通配符选择器

优先级计算：

间接选中就是继承若是间接选中谁离目标标签近就听谁的
相同选择器（直接选中）如果都是直接选中且选择器相同，谁在后面听谁的
不同选择器（直接选中）如果都是直接选中且选择器不相同，则按照选择器的优先级进行层叠 id > 类 > 标签 > 通配符 > 继承 > 浏览器默认 !important 优先级最高

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

css中由 text - 、font - 、color - 、line - 开头的样式可以继承

6、让元素不可见的方法，以及他们的区别

display ： none ；不占据空间
visibility ： hidden ；占据空间
opacity ： 0 ; 占据空间

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

Flex布局是css3新增的一种布局方式，我们可以通过将一个元素的display属性设置为flex 从而使它成为一个flex容器，它的所有子元素都会成为它的项目。

常用属性：flex-direction 决定项目按主轴或交叉轴排列

flex-wrap 决定项目的换行方式

flex-flow flex-direction和flex-wrap的缩写

flex-grow 指当前项目如何放大

flex-shrink 指当前项目如何缩小

8、让div水平居中的方法

1、父元素使用相对定位，子元素使用绝对定位，将子元素的左上角通过top:50%和left:50%定位到父元素中心，再通过margin负值来调整元素的中心点到父元素的中心，或者通过transform的translate来调整元素的中心点到父元素的中心。
<style>
        div {
                width:100px;
                height:100px;
                background-color:skyblue;
                position:absolute;
                left:50%;
                top:50%;
               /* margin-top: -50px;
                margin-left: -50px; */
                transform:translate(-50%,-50%)//2D转换
        }
    </style>
2、margin ： auto ；
<style>
        div {
            width:100px;
                height:100px;
                background-color:skyblue;
                position:absolute;
                margin:auto;
                top:0;
                left:0;
                right:0;
                bottom:0;
        }
    </style>
3、利用flex布局，在容器（父元素）上设置align-items：center和justify-content:center，实现水平垂直居中。
		.father{
                width:200px;
                height:200px;
                background-color: pink;
                display:flex;
                align-items:center;
                justify-content: center;
            }
            .son{
                width:100px;
                height:100px;
                background-color:skyblue;
            }

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

transition是过渡属性，需要事件触发，没法在网页加载时自动完成；animation是动画属性，不需要事件触发，设定时间后可自动执行；

transition过渡是一次性的，不能重复发生；
transition过渡只能设定开始和结束两个状态，不能定义中间状态；
一个transition过渡只能设置一个属性的变化；
animation动画可以通过keyframes设置多个关键帧；
animation动画可设定播放的次数或者无限播放；
animation动画可以设置多个属性。

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

绝对定位 position ：absolute ；

特点：

元素使用绝对定位之后不占据原来的位置即脱标

元素移动是相对于浏览器的

行内元素使用绝对定位之后，转换为行内块

嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发；父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发

相对定位 position ： relative ；

特点：

元素使用绝对定位之后占据原来的位置
相对定位是相对于自身移动
子绝父相
行内元素使用相对定位不能转化为行内块

固定定位 position ：fixed ；

特点：

元素使用绝对定位之后不占据原来的位置即脱标
元素移动是相对于浏览器的
元素使用固定定位之后，会转化为行内块

静态定位 position ：static ；

特点：静态定位就是标准流

11、BFC是什么?BFC的作用？

BFC ： Block formatting context 块级格式化上下文

它决定元素的内容如何渲染以及与其他元素的关系和交互

BFC作用：

清除浮动（1.当一个元素浮动后，会影响附近的文字的行为。2.浮动元素与处在正常流的元素重叠）
解决外边距塌陷
解决宽度自适应的两栏布局

形成BFC的条件

浮动元素 float 不为none
绝对定位元素 position 为 absolute 或 fixed
块级元素 inline-block
flex元素
overflow 不是visibility

代码题

1、用css画一条0.5px的线

<style>
        div {
	        background:black;
	        width:200px;
	        height:1px;
	        transform:scaleY(0.5)
        }
</style>

效果：

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

<style>
        div {
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: skyblue;
            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;
            }
        }
    </style>

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

<style>
        table {
        border-spacing: 0;
        border-top: 1px solid #999999;
        border-left: 1px solid #999999;
        margin: 16px auto;
        width: 300px;
    }
    th {
        border-right: 1px solid #999999;
        border-bottom: 1px solid #999999;
        padding: 8px 0;
    }
    td {
        border-right: 1px solid #999999;
        border-bottom: 1px solid #999999;
        padding: 8px 0;
    }
    tr:hover {
        background-color: rgba(218, 141, 239, 0.77);
    }
    </style>

<table>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>

效果：

附加题

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

   <style>
      .pie{
           width: 100px; 
           height: 100px;
           border-radius: 50%;
           background: red;
           background-image: linear-gradient(to right, transparent 50%, green 0);
        }
        .pie::before {
            content: '';
            display: block;
            margin-left: 50%;
            height: 100%;
            border-radius:0 50px 50px 0;
            background: red;
            transform-origin: left;
            transform: rotate(144deg);
        }
</style>

效果：

2、要求使用至多两个元素实现以下效果

 <style>
        #one {
            height: 100px;
            width: 300px;
            background-color: #999;
            position: relative;
            margin: 10px;
        }
        #two {
            position: absolute;
            top: -1px;
            left: 1px;
            width: 50%;
            height: 3px;
            background-color: red;
        }
    </style>

效果：

_Vrtual .

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端小组考核试题

1、常见的块级元素和行内元素有哪些？说说块级元素和行内元素的主要区别。块级元素：div、p、ul、dl、ol、table 等标签行内元素：span、input、a、strong 等标签区别：块级元素：独占一行、可以设置宽度、宽度默认为父元素宽度，高度由内容撑开行内元素：一行可以显示多个、宽高默认由内容撑开、不可以设置宽度2、去掉 ul li 前面的小点，需要用什么属性？具体方法是什么？list-style属性方法：list - style ：none ...
复制链接

扫一扫