前端系列-Css3方面

1、清除浮动有哪些？

      父级div使用overflow:hidden、overflow:auto、float:left、clear:both、

      父级div使用position:relative属性，子级div使用position:absolute属性

      父级div使用伪元素:after

      使用额外的父级div，并设置父级div为float:left或clear:both属性；

2、display和visibility的区别是什么？

      相同点：display、visibilty都是隐藏元素的

      不同点：display是元素隐藏，隐藏的是元素不占文档流；而visibility隐藏的元素仍然占文档流；

3、把鼠标移动到按钮并点击时，会产生一串什么样的事件？

      hover focus active--->悬浮、聚焦、响应

4、如何让超出宽度的文字显示为省略号？

.ellipsis{
   width:200px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
}

//显示两行出现省略句
.ellipsis-2-lines{
   display:-webkit-box;
   overflow:hidden;
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
}

5、如何实现黑白效果？

      使用filter:grayscale(100%);

6、css度量单位都有哪些？

      em：相对于当前对象内文本的字体尺寸；

      rem：是相对于HTML根元素字体大小；

      vw：1vw = 视口宽度的1%；

      vh：1vh = 视口高度的1%；

      vmax：vmax选取vw和vh中最大的那个；

      vmin：vmin选取vw和vh中最小的那个；

      fr：单位是一个自适应单位；

      rpx：750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素；

      ch：表示“0”字形的宽度；

7、内容没超过一屏时，div在底部固定，内容超过一屏时，div随内容滚动？

<div class="box">
   <div class="top">
      <p>dddddddd</p>
   </div>
   <div class="bot">底部</div>
</div>

html,body{
  height:100%;
}
.box{
   min-height:100%;
   background:red;
}
.box{
  display:flex;
  flex-direction:column;
}
.top{
  flex:1;
}
.bot{
  background:green;
  color:#fff;
  height:40px;
  line-height:40px;
}

8、两边宽度固定，中间弹性布局，如何实现？

 <div class="container">
        <div class="sidebar-left">左侧栏</div>
        <div class="content">
            <p>中间内容</p>
        </div>
        <div class="sidebar-right">右侧栏</div>
    </div>

       .container{
            display: flex;
        }
        .sidebar-left,.sidebar-right{
            width:200px;
            background: red;
            flex-shrink: 0;
        }
        .content{
            flex-grow: 1;/*弹性增长，占据剩余空间*/
            background: yellow;
            padding: 10px;
        }

9、移动端在旋转屏幕时，如何解决字体大小自动调整的问题？

html,body,form,fieldset,p,div,h1,h2{
   -webkit-text-size-adjust: 100%;
}

10、如何解决在移动端设备上下拖动滚动条时的卡顿问题？

body{
     -webkit-overflow-scrolling: touch;
     overflow-scrolling:touch;
}