2020面试系列-css面试题

盒模型

盒模型就是把元素用一个矩形盒子表示，包括content，padding，border，margin，盒模型分为标准盒模型和IE盒模型

标准盒模型：width = content

IE盒模型：width = content+padding +border

//标准盒模型
box-sizing:content-box;
//IE盒模型
box-sizing:border-box;

BFC

BFC是一个特殊的块，块内部元素和外部不会互相影响

形成BFC块的条件：

• float属性不为none
• overflow属性不为visible
• position：absolute｜fixed
• display:inline-block;

BFC的应用

• 清除浮动，BFC在计算高度的时候，浮动元素也会计算进去
• 解决margin重叠问题
• 自适应布局，消除文字环绕，BFC不与浮动元素重叠

清除浮动的方式

• 创建BFC块，给父元素添加属性，overfow：hidden | float:left .....
• 浮动元素后面添加空div，并设置属性clear：both
• 父元素添加伪类

.clearfix:after{display:block;clear:both;content:'';visibility:hidden;height:0;}
.clearfix{zoom:1}

多元素浮动参差不齐

利用clear属性，给最左一列元素增加属性clear:left

.left{clear:left}

利用display：inline-block

　　//最外层容器font-size设置为0，目的是去除inline-block元素间默认间距；
    // 内层元素设置display：inline-block，同时重置font-size，并且设置vertical-align:top向上对齐
.wrapper{font-size:0};
.item{float:left;dispaly:inline-clock;verticle-align:top;font-size:12px}

实现水平垂直居中

.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

自适应布局

//左边左浮动，右边加个overflow:hidden;
 .left{width:200px;background:red;float:left;}
 .right{background:blue;overflow:hidden;}


//左边左浮动，右边加个margin-left;
.left{width:200px;background:red;float:left;}
.right{background:blue;margin-left:200px}


//左边绝对定位，右边加个margin-left;
.left{width:200px;background:red;position:absolute;}
.right{background:blue;margin-left:200px}


//左右两边绝对定位，右边加个width,top,left,right
.left{width:200px;background:red;position:absolute;}
.right{background:blue;position:absolute;left:200px;top:0;right:0;}

弹性盒布局

任何一个容器都可以指定为Flex布局，
行内元素也可以使用Flex布局，
Webkit内核的浏览器，必须加上-webkit前缀
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
容器的属性
flex-direction 决定主轴方向  row（默认水平） | row-reverse | column | column-reverse
flex-wrap  决定如何换行  nowrap（默认不换行） | wrap | wrap-reverse（换行，第一行在下方）
flex-flow   flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content  主轴对齐方式   flex-start（默认左对齐） | flex-end | center | space-between | space-around
align-items 交叉轴对齐方式  flex-start | flex-end | center | baseline | stretch（默认沾满整个容器高度）;
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-item属性
order  排序 ，越小越靠前，默认0
flex-grow 放大比例，默认为0
flex-shrink 缩小比例，默认为1
flex-basis 占据的主轴空间
flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self 覆盖agn-items属性 auto（默认继承align-item） | flex-start | flex-end | center | baseline | stretch

H5新特性

1.新增语义化标签 header、footer、section、nav、article、aside、time、main

2.增强表单 新增input类型：number、tel、email、time、week、month、url、range 新增表单元素：datalist、progress、meter、keygen、output 新增表单属性：autofocus、required、placeholder、min/max、

3.视频和音频标签 音频：

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
</audio>

视频：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

4.Canvas绘图 canvas学习地址

5.Svg绘图

6.地理定位

7.拖放API

8.webWorker Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。

9.webStoreage localStorage、sessionStorage

10.webSoket WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。 特点： （1）握手阶段采用HTTP协议，默认端口是80和443 （2）建立在TCP协议基础之上，和http协议同属于应用层 （3）可以发送文本，也可以发送二进制数据。 （4）没有同源限制，客户端可以与任意服务器通信。 （5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023

CSS3新特性

//边框

border-radius
box-shadow
border-image不支持IE
//背景

background-size : width height/百分比/contain/cover
background-origin: padding-box|border-box|content-box;//背景定位区域
background-clip: border-box|padding-box|content-box;//背景裁剪区域
//文本

text-shadow: 5px 5px 5px #FF0000;
word-wrap:break-word；长单词换行
//字体

@font-face
        {
        font-family: myFirstFont;
        src: url('Sansation_Light.ttf'),
             url('Sansation_Light.eot'); /* IE9+ */
        }
div
{
font-family:myFirstFont;
}
//2D转换

Chrome 和 Safari 需要前缀 -webkit-。 Internet Explorer 9 需要前缀 -ms- 火狐加需要前缀-moz- 欧朋需要前缀-o-
transform
translate(x,y)x,y轴平移  translateX()、translateY()
rotate(angle)正时针旋转
scale(x,y)收缩 scaleX() scaleY()
skew(x-angle,y-angle)倾斜角度
//3D转换 transform

Opera 不支持 3D 转换（它只支持 2D 转换）
translate3d(x,y,z) 
scale3d（x-angle,y-anlge,z-angle）
rotate3d(x,y,z,angle)
过渡（元素从一个状态到另一个状态的过程）

Safari 需要前缀 -webkit-。
trnasition-property过渡的属性名
trnasition-duration过渡时间
transition-timing-function过渡时间曲线
transition-delay过渡延迟，默认0
transition:all 1s linear 0;简写
//动画

//定义动画

@keyframes name动画名称{
from{属性} 为动画开始
to{属性} 动画结束
}
@keyframes name动画名称{
0%{}动画开始
25%{} 
50%{}
75%{}
100%{}动画结束
}
//引用动画

animation：
animation-name @keyframs规定的动画名称
animation-duration 规定动画完成时间
animation-timing-function动画速度曲线
animation-delay 规定动画开始时间
animation-iteration-count规定动画播放次数，默认1，infinite无限
animation-direction规定动画是否在下一周期逆向播放，默认nomal  alternate逆向播放
//简写
animation:name 2s linear 2s infinite alternate