前端小组考核试题

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来调整元素的中心点到父元素的中心。

2、margin ： auto ；

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的线

 效果：

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

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

 效果：

附加题 

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

效果：  

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

 效果：