有关css的面试题
1、有关清除浮动
（1）什是浮动？
元素进行浮动后就不会占据原有的物理位置了，即使是块状元素也会失去width和height属性****
（2）关于清除浮动的几种方式？
1：clear：both
2：定义伪类元素after和zoom
示例代码：
.clear-float{
zoom:1
}
.clear-float:after{
display:block;
clear:both;
content:’’;
visibility:hidden;
height:0;
}
3: div定义overflow：hidden
4：为父级定义display：table；
5：父级定义overflow：auto；
2、有关盒子box的属性？
怪异盒IE包括padding和border box-sizing: content-box
标准盒W3C不包括 box-sizing：border-box
盒子的属性有
border(border-radius、border)、padding、margin、box-shadow、width、height...
3、怎么实现让块级元素水平垂直居中？(在不知道最外层元素宽高的情况下)
1：使用display布局
display:flex;
justify-content:center;
align-items:center;
2：使用margin：0 auto；
height:50px;
line-height:50px;
3：使用定位
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
4:使用定位
position：absolute；
left：0；
right：0；
top：0；
bottom：0；
margin:auto;
4、关于css的权重和优先级？*
（1） 权重
① 行内样式（+1000） > id选择器（+100） > class选择器（+10） > 标签选择器（+1）
（2） 优先级
① !important提升样式优先级，优先级别是最高的
② 如果都用 !important 提升样式的优先级，则按权重高的显示
5、关于多端适配的理解？以及怎么解决多端适配？*
1、使用响应式布局bootstrap4框架；
2、使用高度百分比，单位使用相对单位，例如：rpx、rem，例如使用高度固定，宽度自适应
3、在调试小程序的时候，使用条件编译
4、使用flex、grid布局
6、http三次握手，四次挥手是指什么？*
所谓三次握手指的是建立以TCP连接时，需要客户端和服务器总共发送三个包；
三次握手的目的是连接服务器指定端口，建立TCP，并同步连接双方的序列号和确认号并交换TCP窗口大小信息，在socket编程中，客户端执行connect()时。将触发三次握手。
四次挥手指的：TCP的连接的拆除需要发送四个包，因此被称为四次挥手。客户端或服务器均可主动发起挥手作用，在socket编程中，任何一方执行close()操作均可产生挥手动作。
7、关于跨域和解决方案？*
跨域原因：
由于http的同源策略，从这个域中加载的脚本从根本上是不允许访问另一个域中的文档和资源属性的
何为同源：
URL由协议、域名、端口和路径组成，如果两个URL的协议域名端口和路径完全相同，则表示他们属于同源；
解决方案：
方案①：Jsonp需要目标服务器配合一个callback函数
方案②：通过document.domain来跨子域
方案③：使用window.name来跨域
方案④：使用HTML5中新引进的window.postMessage方法来跨域传送数据
方案⑤：使用代理服务器来跨域
方案⑥：CORS全称是"跨域资源共享"
8、Flex属性是哪几个属性的简写？*
flex：flex-grow flex-shrink flex-basis的简写
flex默认是0 1 auto
该属性有两个快捷值 auto 和 none
基本上很少使用单个属性，因为浏览器会推算相关值
关于flex布局，请查看这里，有更为详细的解释，阮一峰的网络日志
www.ruanyifeng.com/blog/2015/0…
9、关于响应式布局和自适应布局详解？*
(1) 什么是响应式布局？
即在不同屏幕的分辨率的终端上浏览网页的不同展示方式。
通过响应式布局能使网站在手机和平板电脑上有良好的阅读体验。
(2) 响应式布局设计的步骤？
1、设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1"/>
2、通过媒体查询来设置样式Media Queries
3、设置多种视图宽度
(3) 需要注意的点
① 宽度需要设置百分比
② 怎么处理图片缩放
③ 其他属性
10、Html5的新特性
① 新的语义元素，比如：<header>、<footer>、<section>等。
② 新的表单控件，比如：数字、日期、时间等
③ 强大的图像支持，借由：<svg>、<canvas>
④ 强大的多媒体支持，借由：<video>、<audio>
⑤ 强大的新API，比如用本地存储取代cookie
11、css3的新特性？
①rgba和透明度
②background-image、background-size、background-repeat等
③Word-wrap单词换行
④text-shadow文字阴影
⑤font-face属性：定义自己的字体
⑥border-radius圆角
⑦边框图片 border-image:url(border.png) 30 30 round
⑧盒阴影box-shadow
⑨媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性；
12、Css中怎么实现form表单自动关闭功能？
1、在IE的Internet选项菜单里的内容--自动完成里面设置\
2、设置Form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能\
3、设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能
13、Css中常用的长度单位px、em、rem、vh有什么区别？
1、px是相对长度单位，px是相对于显示器屏幕分辨率而言的
2、em是相对长度单位，参考物是父元素的字体尺寸（没有父级尺寸设置的话，就会以浏览器的默认字体尺寸）
3、rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位，如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
4、如果这个属性根据它的font-size进行测量，则使用em，其他情况都使用em
14、Css选择修饰符有哪些？那些可以继承？
CSS选择符：
id选择器(#myid)、
类选择器(.myclassname)、
标签选择器(div, h1, p)、
相邻选择器(h1 + p)、
子选择器（ul > li）、
后代选择器（li a）、
通配符选择器（*）、
属性选择器（a[rel=”external”]）、
伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]\
!important 比内联优先级高
15、说一下怎么减少页面加载时间的方法？
1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部hs、css文件放在最下面
4、减少dom操作，尽可能用变量替代不必要的dom操作
16、css优化、提高性能的方法有哪些？
1、加载性能
2、选择器性能
3、渲染性能
4、可维护性
17、::before和:after中双冒号和单冒号有什么区别？
在before元素前面，after元素的后面插入内容
经典使用场景(使用font-face小图标结合content)
18、说一下html的离线缓存
主要会问localStorage和sessionStorage
1、localStorage长期储存在数据，浏览器关闭后数据不会丢失
2、sessionStorage数据在浏览器关闭后自动删除
