目录
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个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的