前端第一阶段测试(12道）【简答题】css+html

1.【问答】display:none与visibility:hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。

2.【问答】说明px、 em 、 rem三者关系
px为长度单位，相对于当前屏幕宽度而言，表示一个像素点
em为相对长度单位，表示当前元素上的字体大小
rem为相对长度单位，表示根（html）元素上声明的字体大小

3.【问答】如何实现响应式布局？
1.如果是通过css原生代码，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码
2.设置弹性盒布局

4.【问答】简述浮动布局以及其工作方式？
1.用来解决块元素在水平方向排列的问题
2.一个元素如果成为浮动元素，那么这个元素就会脱离文档流：宽度如果没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑；

5.【问答】简述http协议
超文本传输协议
客户端(一般指的是浏览器)和服务器端进行交互遵循的通信协议
请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体。响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行、响应头、响应体。

6.【问答】列举最少5个animation的子属性，并说明其含义
/* 设置动画名称 /
animation-name
/ 设置动画持续时间 /
animation-duration
/ 设置动画执行速度 /
animation-timing-function
/ 设置动画等待时长 /
animation-delay: 2s;
设置动画播放次数 n 和infinite/
animation-iteration-count
/* 设置动画是否反向播放 alternate反向播放*/
animation-direction
/* 动画结束时候应用最后一帧 */
animation-fill-mode

7.【问答】简述伸缩盒布局中的核心概念、常用规则、使用技巧等
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来改变主轴。

8.【问答】简述一个盒子在另外一个盒子中水平居中的方法？
margin:0 auto;
display:flex justify-content:center
子绝父相,子元素left:0 right:0;margin:auto
子绝父相,子元素left:50% ;margin-left:-height/2

9.【问答】简述文本在盒子中垂直居中的方法？
line-height:height

10.【问答】简述css3的盒子模型
盒子种类: 1.w3c盒子 内容盒子 标准盒子
2.边框盒子 IE盒子 怪异盒子
1.w3c盒子width设置给内容区的
2.边框盒子的width设置给盒子的

11.【问答】简述在css3中如何计算同一个规则的优先级
1.!important 优先级别最高
2.style属性 特征值1000
3.id标签选择器 特征值 100
4.class类选择器/伪类 特征值 10
5.标签选择器 特征值1
6.通配符选择器 特征值0

12.【问答】简述css3选择器有哪些？
1.id标签
2.标签选择器
3.class选择器
4.序选择器 :first-child nth-child last-child
5.伪元素选择器 ::after ::before
6.组合选择器 #id,.类名,标签{}
7.子代选择器 div>div
8.后代选择器 div div
9.通配符选择器/普遍选择器 *{}
10.属性选择器 input[type=text]
.