【实验室考核（上）】

第一次前端小组考核

一、常见的块级元素和行内元素有哪些？说说行内元素和块级元素的主要区别
块级元素：p,div,table,ul ,dl,ol,h1~h6等
行内元素：img,a,input,span,strong,em,i等
块级元素特点：
1.总是在新行开始
2.高度，行高，内边距外边距都可控
3.可以容纳内联元素（文本元素），与其他块级元素
行级元素特点：
1.相邻元素在一行上显示多个
2.高，行高，内边距与外边距不可改变
3.内联元素只能容纳文本或其他内联元素
二、去点ul li前面的小点，需要使用什么属性？具体方法是什么？

li {
  list-style:none;
}

三、清除浮动的方法有哪些？
清除浮动的策略：闭合浮动
方法一：额外标签法即隔墙法
给谁清除浮动，就在其后额外添加一个空标签，为其添加clear:both属性

<div style="clear:both"></div>

优点：通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化较差
方法二：父级添加overflow属性
给浮动盒子的父元素添加overflow属性，将其属性值设置为：hidden,auto或scroll
方式三：after伪元素法
：after方式是额外标签法的升级版，也是给父元素添加
代码如下：

.clearfix:after{
     content:"";
     display:block;
     height:0;
     clear:both;
     visbility:hidden;
   }
.clearfix {
      *zoom:1;
   }

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
方式四：双伪元素清除浮动
双伪元素清除浮动是给父盒子添加属性
代码如下：

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

优点：代码更加简洁
缺点：照顾低版本浏览器
方式五：为父元素设置高度
优点：简单粗暴，直接有效
缺点：需要手动更改宽度，后面如果还需要更改高度，会带来麻烦
四、你知道哪些选择器？css优先级算法应如何计算？
1.基本选择器：通配符选择器、标签选择器、类选择器、id选择器
2.高级选择器：后代选择器、并集选择器、伪类选择器、交集选择器
css优先级算法：

• 1.判断是否直接选中（间接选中即为继承）： 如果为间接选中，遵循就近原则
• 2.如果选择器相同时，则为层叠性
• 3.如果选择器不同时，则判断权重：

通配符或继承：0 标签：1 类：10 id :100 行内：1000
其中：id>标签>通配符>继承>浏览器默认
注意:!important设置的样式优先级最高
五、css中哪些样式可以继承？
以text-/line-/font-/color-开头的属性
六、让一个元素不可见的方法，并说出他们的区别
1.display:none;不占据空间
2.visibility:hidden;占据空间
3.opacity:0;占据空间
七、让一个div水平垂直居中的方法
（1）父元素使用相对定位，子元素使用绝对定位，将子元素的左上角通过top:50%和left:50%定位到父元素中心，再通过margin负值来调整元素的中心点到父元素的中心，或者通过transform的translate来调整元素的中心点到父元素的中心。
（2）子绝父相，子元素设置四个方向都为0，并将margin设为auto,由于宽高固定，因此对应方向实现平分，可以水平垂直居中。
（3）利用flex布局，在容器（父元素）上设置align-items：center和justify-content:center，实现水平垂直居中。

• 子绝父相+transform:translate(-50%,-50%)

.father{
                width:200px;
                height:200px;
                background-color: pink;
                position:relative;
            }
            .son{
                width:100px;
                height:100px;
                background-color:skyblue;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(50%,50%);
                }

• 子绝父相+Margin:auto；

		.father{
                width:200px;
                height:200px;
                background-color: pink;
                position: relative;
            }
            .son{
                width:100px;
                height:100px;
                background-color:skyblue;
                position:absolute;
                margin:auto;
                top:0;
                left:0;
                right:0;
                bottom:0;
            }

• Flex布局

.father{
                width:200px;
                height:200px;
                background-color: pink;
                display:flex;
                align-items:center;
                justify-content: center;
            }
            .son{
                width:100px;
                height:100px;
                background-color:skyblue;
            }

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

1.animation的属性

2.transition的属性

属性	描述
transition-property	规定设置过渡效果的css属性名称
transition-duration	规定完成效果需要多少秒或毫秒
transition-timing-function	指定过渡函数，规定速度效果的速度曲线
transition-delay	指定开始出现的延迟时间

九、你知道哪些定位？说说他们的区别
1.相对定位：position:relative;
主要特点：

• 使用相对定位，位置从自身出发.
• 占据原来的位置
• 父元素相对定位，子元素绝对定位
• 行内元素使用相对定位不能转行内块

2.绝对定位：position:absolute;
主要特点：

• 元素使用绝对定位之后不占据原来的位置（脱离标准流）
• 元素使用绝对定位，位置是从浏览器出发。
• 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，且位置是从浏览器出发
• 嵌套的盒子，父盒子使用定位，子盒子绝对定位，位置是从父元素位置出发。
• 给行内元素使用绝对定位之后，转换为行内块（不推荐使用）

3.固定定位：position:fixed;
主要特点：

• 固定定位之后，不占据原来的位置（脱离标准流）
• 元素使用固定定位之后，位置从浏览器出发
• 元素使用固定定位之后，会转换为行内块。

十、BFC是什么？BFC的作用？
BFC可以理解为一个区域（会计格式化上下文），在这个区域内的元素无论如何布局，都不会影响区域外的元素
作用：

1. 利用BFC避免margin重叠
2. 自适应两栏布局
3. BFC的区域不会与float box重叠
4. 清除浮动