1.display:none与visibility:hidden的区别是什么？
答：display：隐藏对应的元素但不挤占该元素原来的空间；
vivibility：隐藏对应的元素并且挤占该元素原来的空间
2.说明px、 em 、 rem三者关系
答：px：长度单位，表示一个像素点
em：相对长度单位，表示当前元素上的字体大小
rem：相对长度单位，表示根(html)元素上声明的字体大小
3.如何实现响应式布局
答：1、如果是通过css原生代码，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码
2、如果是通过框架，例如bs，可以使用bs提供的响应式框架完成页面布局。
4.简述浮动布局以及其工作方式
答：1、浮动布局用来解决块元素在x轴上排列的问题
2、浮动布局通常出现在 div>div 这种父子结构中，为子元素添加浮动特性
3、一个元素如果成为浮动元素，那么这个元素就会脱离文档流：宽度如果没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑；
4、清除浮动：overflow:hidden;clear:both;父元素：height:xxpx;
5.简述http协议
答：http协议是超文本传输协议，常用于BS架构中，为数据在网络传输中规定协议。
请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体
响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行、响应头、响应体。
默认端口号：80
6.简述伸缩盒布局中的核心概念、常用规则、使用技巧等
答：1、核心概念：主轴、交叉轴、伸缩盒容器、伸缩盒元素
2、常用规则：
2.1、伸缩盒容器相关规则：display、flex-wrap、flex-direction、align-items、justify-content
2.2、伸缩盒元素相关规则： flex-basic、flex-grow、flex-shrink、flex
3、使用技巧：伸缩盒容器常用于列级布局，与浮动布局类似可以将多个块元素在一行中显示，伸缩盒更简单一些，只需要为容器盒子添加display:flex属性，这个容器盒子就变成了伸缩盒容器，其子元素伸缩盒元素就会沿着主轴来排列，默认主轴是x轴，可以通过flex-direction来改变主轴。
7.盒子模型种类及主要区别
答：CSS中有两个盒子模型，分别是W3C标准模型和IE的怪异模型
W3C标准模型：
IE的怪异模型：
主要区别：
①标准盒子的width和height表示内容content的宽高。 width=（content-width）heigth=（content-height）
②而怪异盒子的width包含padding、content-width、border。height包含content-height、border、padding
width=（border-left + padding-left + content-width + padding-right + border-right）
height=(border-top + padding-top + content-height + padding-bottom + border-bottom)
8.CSS3选择器的优先级机制
答：! important > style属性内联样式 > ID选择器 > class类选择器，属性选择器和伪类 > 标签选择器 > 通配选择器，选择符和逻辑组合伪类