前端常问面试题

1. html常问

1. Html5 的特性：
   简易性 可扩展性 跨平台性 通用性
2. 什么是小刷新和大刷新？
   小刷：浏览器F5刷新
   大刷：在浏览器地址栏刷新地址
3. display:none 与 visibility:hidden 的区别是什么？
   display:none 隐藏对应的元素不占据屏幕空间
   visibility：hidden隐藏对应的元素并且占据屏幕空间
4. 说明px、em、rem三者关系
   px为长度单位，相对于当前屏幕宽度而言，表示一个像素点
   em为相对长度单位，表示当前元素上的字体大小
   rem为相对长度单位，表示根（html）元素上声明的字体大小
5. 如何实现响应式布局？
   1、如果是通过css原生代码，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码
   2、设置弹性盒布局
6. 简述浮动布局以及其工作方式？
   1、用来解决块级元素在水平方向排列的问题
   2、一个元素如果成为浮动元素，该元素会脱离文档流：宽度如果没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会 在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑。
7. 简述http协议
   htpp协议是超文本传输协议，是客户端（一般指浏览器）和服务器进行交互遵循的通信协议
   请求报文：浏览器会将前端的请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体。
   响应报文：服务器接受到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对应报文进行解析，进而显示出来。响应报 文中包含响应行、响应头、响应体。
8. 前端三要素：结构（html）、表现（CSS）、行为（Javascript）
9. 前端5大主流浏览器：火狐（Firefox）谷歌(Google Chrome）、IE、Opera、Safaris

2. CSS常问

1. 简述一个盒子在另一个盒子水平居中的方法：
   ①margin：0 auto
   ②display：flex; justify-content：center
   ③子绝父相，子元素left:0; right:0; margin:auto;
   ④子绝父相，子元素left：50%，margin-left: -子width/2
2. 让文本在另一个盒子垂直居中的方法：
   line-height:height
3. 简述在css3中如何计算同一个规则的优先级
   1. !important 优先级别最高
   2. style属性 特征值1000
   3. id标签选择器 特征值 100
   4. class类选择器/伪类 特征值 10
   5. 标签选择器 特征值1
   6. 通配符选择器 特征值0
4. css选择器有哪些？
   1. id标签选择器
   2. 类选择器
   3. 标签选择器
   4. 序选择器 ：first-child nth-child last-child
   5. 伪元素选择器 ::after ::before
   6. 组合选择器 #id,.类名,标签{}
   7. 子代选择器 div>div
   8. 后代选择器 div div
   9. 通配符选择器/普遍选择器 *{}
   10. 属性选择器 input[type=text]