目录
1.简述css3选择器有哪些？
- 标签选择器
- id选择器
- 类选择器
- 后代选择器
- 子元素选择器
- 交集选择器
- 并集选择器
- 兄弟选择器
- 序选择器
- 伪类选择器
- 属性选择器
2.display:none与visibility:hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
扩展：使用 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个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
2173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
