html常见题目

1. display:none与visibility:hidden的区别是什么？

  display：隐藏对应的元素但不挤占该元素原来的空间。

  visibility：隐藏对应的元素并且挤占该元素原来的空间。

2. 说明 px、em、rem三者关系

  px为长度单位，表示一个像素点。

  em为相对长度单位，表示当前元素上的字体大小。

  rem为相对单位长度，表示根元素上声明的字体大小。

3. 如何实现响应式布局？

  通过媒体查询，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码（当页面结构发生改变时）通过浮动布局、定位布局、flex布局（只有盒子的宽高需要改变时）。

4. 简述浮动布局以及其工作方式？

  1.浮动布局可以用来解决块元素在x轴上排列的问题。

  2.浮动布局通常出现在div>div这种父子结构中，为子元素添加浮动特性。

  3.一个元素如果成为了浮动元素，则这个元素就会脱离文档流。若宽度没有确定则由内容高度决定，不再占用屏幕空间。同级别的浮动元素会在同一行排列，若一行不能容纳则换行显示。浮动元素会失去对父元素的支撑。

  4.若希望块元素在页面中水平排列，可以是块元素脱离标准流，使用float来使元素浮动起来，从而脱离标准流。

    none：默认值，元素默认在标准流中排列。

    left：元素会立即脱离标准流，向页面左侧浮动。

    right：元素会立即脱离标准流，向页面右侧浮动。

5. 简述http协议

  http协议是超文本传输协议，一般用于BS架构中，为数据在网络传输中规定协议。

  HTTP是一种能够获取HTML这样网络资源的通讯协议。他是在web上进行交换的基础，是一种client-server协议。请求通常是由像浏览器这样的接收方发起的。

  HTTP报文的分类有两种：请求报文和响应报文。请求报文就是客户端向服务端发送请求的信号，响应报文就是服务端响应处理后回传给客户端的信号。

  请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体。

  响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行、响应头、响应体。

6. animation的子属性并说明含义。

  animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画；

  animation-duration 动画指定需要多少秒或毫秒完成，告诉系统动画持续的时长；

  animation-timing-function 设置动画将如何完成一个周期，告诉系统动画执行的速度；

  animation-delay 设置动画在启动前的延迟间隔；

  animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次；

  animation-direction 指定是否应该轮流反向播放动画；

  animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式；

  animation-play-state 告诉系统当前动画是否需要暂停；

7.伸缩盒布局中的核心概念、常用规则、使用技巧等。

  核心概念：主轴、交叉轴、伸缩盒容器、伸缩盒元素；

  使用规则：

​   伸缩盒容器相关规则：display、flex-wrap、flex-direction、align-items、justify-content；

​   伸缩盒元素相关规则：flex-basic、flex-grow、flex-shrink、flex；

  使用技巧：伸缩盒容器常用于列级布局，与浮动布局类似可以将多个块元素在一行中显示，伸缩盒更简单一些，只需要为容器盒子添加display:flex属性，这个容器盒子就变成了伸缩盒容器，其子元素伸缩盒元素就会沿着主轴来排列，默认主轴是x轴，可以通过flex-direction来改变主轴。

8. 一个盒子在另一个盒子中水平居中的方法。

• margin:0 auto;
• 定位布局居中方式
• flex布局 justify-content：center；

9. 文本在盒子中垂直居中的方法。

• 设置行高和line-height相同
• 利用line-height和vertical-align；
• flex布局，align-items：center；

10. css选择器有哪些？

​   标签选择器、类选择器、ID选择器、后代选择器、子元素选择器、交集选择器、并集选择器、兄弟选择器、伪类选择器、序选择器、动态伪类选择器、a标签的伪类选择器、否定伪类、属性选择器、通配符选择器、组合选择器。