简单的html和css面试题

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

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。

扩展：使用visibility:hidden比display:none性能上要好，display:none切 换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺 寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加 载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

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

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

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

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

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

通过媒体查询，可以通过@media来进行媒体查询，当网页显示在不同的网 页中加载执行不同的css代码(当页面结构发生改变时)

通过浮动布局，定位布局，flex布局(只有盒子的宽高需要改变时)

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

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

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

3、一个元素如果成为浮动元素，那么这个元素就会脱离文档流：宽度如果 没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会在一行 排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑；

4.如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通 流)，使用float来使元素浮 动，从而脱离标准流(文档流/普通流) ​

可选值： ​

none，默认值，元素默认在标准流(文档流/普通流)中排列 ​

left，元素会立即 脱离标准流(文档流/普通流)，向页面的左侧浮动 ​ right，元素会立即脱离 标准流(文档流/普通流)，向页面的右侧浮动

5.简述http协议

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

HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它 是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说， 请求通常是由像浏览器这样的接受方发起的。

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

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

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

(具体查看对应笔记)

6.列举最少5个animation的子属性，并说明其含义

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

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

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

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

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

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

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

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

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.简述一个盒子在另外一个盒子中水平居中的方法？

1.margin:0 auto;

2.定位布局居中方式

3.flex布局 justify-content:center

9.简述文本在盒子中垂直居中的方法？

1.设置行高与line-height相同

2.利用line-height和vertical-align

3.flex布局，align-items:center

10.简述css3的盒子模型

内容盒子（W3C盒子模型）：

        盒子的宽：width+paddingLeft+paddingRight+borderLeft+borderRight

        盒子的高：height+paddingTop+paddingBottom+borderTop+borderBottom

        当我们为一个盒子指定width属性的时候，实际上width仅为内容的宽度，当padding和border变大的时候，内容宽度不变，盒子所占的总体宽度要变大。

边框盒子（IE盒子）：

        盒子的宽：width

        盒子的高：height

        当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。

11简述在css3中如何计算同一个规则的优先级

由三个因素决定，特权，特性值，顺序决定
   特权：在规则的后面添加!important
    特性值：
             1000 声明在style属性中的
            100 id选择器
            10 类选择器，伪类选择器
            1 元素选择器，伪元素选择器
            顺序：当特性值相同，后者覆盖前者

12.简述css3选择器有哪些？

标签选择器，id选择器，类选择器，后代选择器，子元素选择器，交集选择器，并集选择器，兄弟选择器（相邻兄弟选择器和通用兄弟选择器）、伪类选择器（动态的伪类选择器和a标签的伪类选择器）、否定伪类选择器、序选择器、伪元素选择器、属性选择器、通配符选择器、组合选择器