前端小组考核

试题如下：

1.常见的行内元素和块元素有哪些？阐述行内元素和块元素的主要区别：

常见的块级元素：div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、                                  tbody、td、tfoot、th、thead、tr；

常见的行内元素：span、a、em、strong、s、u;

区别：行级元素也不独占一行 而块级元素独占一行

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

list-style: none;

3.清除浮动的方法有哪些？

• 给父级元素添加overflow:hidden;
• 额外标签法；
• 伪元素法（给父元素添加::after）;
• 双伪元素法；
• 给前面一个父元素设置高度；

4.你知道哪些选择器？CSS优先级算法如何计算？
选择器：类选择器，元素选择器，id选择器，通配符选择器，伪类选择器，后代选择器，并集选择器，子选择器；

优先级算法：

当选择器相同时，执行层叠性（后来居上）；

当选择器不同时，根据选择器权重进行；

权重如下：

！important	最重要
行内样式   style=""	1，0，0，0
ID选择器	0，1，0，0
类/伪类选择器	0，0，1，0
元素选择器	0，0，0，1
通配符选择器	0，0，0，0

 5，CSS中哪些样式可以继承？

字体相关样式：font-    color

文本相关样式：text-     line-

光标属性：visibility

6.让一个元素不可见的方法，并说出他们区别：

• display:none;      此种方式设置的元素不会占用原来位置；
• visibility: hidden;   此种方式设置的元素将继续占用原来的元素，但不可视；
• opacity:0;             此种方式可以设置元素透明程度，原来位置依然占用；

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

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

8.让一个div水平垂直居中的方法：

• <style>
          div {
              height: 100px;
              width: 100px;
              position: absolute;
              top: 50%;
              left: 50%;
             transform: translate(-50%,-50%);
          }
      </style>

• <style>
          div {
              height: 100px;
              width: 100px;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              margin: auto;
          }
      </style>

• 使用绝对定位

   <style>
          div {
              height: 100px;
              width: 100px;
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: -50px;
              margin-left: -50px;
          }
      </style>

9.说说你知道的animation和transition的属性和作用：

animation:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

transition:

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

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

 static 定位:遵循正常的文档流对象；

 fixed定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：不占据空间；

relative定位：相对定位元素的定位是相对其正常位置，不脱标；

absoluate定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器；

11.BFC是什么？BFC的作用：

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

12.用CSS画一条0.5px的线：

<style>
       div {
           border-top: 1px solid black;
           transform: scale(1,0.5);
       }
</style>

 13.使用CSS实现淡入淡出的效果

 <style>
        div {
            height: 50px;
            width: 50px;
            background-color: aqua;
            transition: all 2s 0s;
        }
        div:hover {
            background-color: azure;
        }
    </style>

14.要求用至多两个元素实现边框只有右边一半并且居中的效果：

 .one {
           position: relative;
           background-color: antiquewhite;
           height: 60px;
           width: 100px;
       }
       .two {
           height: 30px;
           width: 2px;
           position: absolute;
           top: 50%;
           right: 0px;
           background-color: red;
           margin-top: -15px;
       }
    </style>