前端小组考核试题

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>

 效果：