HTML&CSS基础题

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

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

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

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

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

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

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

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

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

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

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

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

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

可选值：

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

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

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

6.简述http协议

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

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

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

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

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

(具体查看 http协议 )

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

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

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

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

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

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

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

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

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

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

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来改变主轴。

9.简述一个盒子在另外一个盒子中水平居中的方法？

1.margin:0 auto;

2.定位布局居中方式

3.flex布局 justify-content:center

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

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

11.简述css3的盒子模型

内容盒子(W3C盒子)

默认盒子模型 W3C盒子

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

width 属性仅表示盒子内容所占的宽度

height 属性仅表示盒子内容所占的高度

W3C盒子

内容区的宽

width

内容区的高

height

盒子的宽

width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高

height+paddingTop+paddingBottom+borderTop+borderBottom

所占屏幕空间的宽

width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRigh

所占屏幕空间的高

height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

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

边框盒子(IE盒子模型)

边框盒子模型

IE盒子使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

IE盒子

内容区的宽

        width-paddingLeft-paddingRight-borderLeft-borderRight

内容区的高

        height-paddingTop-paddingBottom-borderTop-borderBottom

盒子的宽

        width

盒子的高

        height

所占屏幕空间的宽

        width+marginLeft+marginRight

所占屏幕空间的高

        height+marginTop+marginBottom

边框盒子也称为怪异盒子，其特点为：当我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。

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

权重的计算规则 

内联样式，如: style="..."，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类、属性选择器，如.content，权值为0010。
标签选择器、伪元素选择器，如div p，权值为0001。
通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。
继承的样式没有权值

首先先计算选择器中有多少个id, id多的选择器优先级最高

如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的