前端小组考核试题

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 选择器、类选择器、标签选择器、通配符选择器

优先级计算:

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

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

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

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

  1. display : none ; 不占据空间
  2. visibility : hidden ; 占据空间
  3. 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 ; 

特点:

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

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

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

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

相对定位 position : relative ;

特点:

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

 固定定位 position :fixed ;

特点 :

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

 静态定位 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>

 效果:

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值