前端第一阶段测试

选择
- 问答
如果觉得有用请给我点个赞⑧~

选择

1、【单选】下列哪个是子代选择器 A

A、p>b
B、p b
C、p+b
D、p.b

2、【单选】下述有关css属性position的属性值的描述，说法错误的是？B

A、static：没有定位，元素出现在正常的流中
> B、fixed：生成绝对定位的元素，相对于父元素进行定位
~~>fixed就是固定定位不要想复杂了~~
C、relative：生成相对定位的元素，相对于元素本身正常位置进行定位
D、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位

3、【单选】元素的alt和title有什么异同，选出正确的说法？B

A、表现一样
> B、alt作为图片的替代文字出现，title是图片的解释文字
C、title作为图片的替代文字出现，alt是图片的解释文字
D、以上说法都不正确

4、【单选】表格中合并单元格之间的空间的属性为 B

A、cellpadding
> B、cellspacing 设置cellspacing=0
C、rules
D、border

5、【单选】我们可以在下列哪个HTML中引入CSS文件？B

 A、<style>  B、<link>  C、<meta>  D、<script>

6、【单选】在 css 选择器当中，优先级排序正确的是D

A、id选择器>标签选择器>类选择器
B、标签选择器>类选择器>id选择器
C、类选择器>标签选择器>id选择器
> D、id选择器>类选择器>标签选择器

7、【单选】css中 display属性的属性值不包含？E

A、inline
B、block
C、inline-block
D、table
E、hidden

8、【单选】以下哪个是html的注释 D

A、/* 注释内容 */
B、// 注释内容
C、# 注释内容
D、

9、【单选】form元素的enctype的属性值默认是？A

A、application/x-www-form-urlencoded
B、multipart/form-data
C、text/plain
D、appliction/json

10、【单选】a标签在新窗口打开链接添加什么属性？A

A、target
B、href
C、src
D、width

11、【单选】以下哪个不是Html块元素的特点 D

A、独占一行空间
B、可以指定宽和高
C、高度由内容决定
== D、可以和其他行内元素共享一行空间==

12、【多选】html元素的核心属性有哪些？ABCD

A、id
B、class
C、title
D、style
E、src

13、【多选】前端三要素是哪三个 CDE

A、vue
B、react
C、html
D、css
E、Javascript

14、【多选】以下哪个不是Html块元素 DE

A、<div></div>
B、<p></p>
C、<h1></h1>
D、<span></span>
E、<em></em>

问答

15、【问答】

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

1.隐藏元素不占据原先空间，绑定js事件不生效，引起浏览器重排重绘
2.隐藏元素占据空间，绑定js事件不生效，引起浏览器重绘

16、【问答】

说明px、 em 、 rem三者关系

1.px是像素单位
2.em是相对单位，相对自身font-size而言，如果自身没有，再参考父元素的font-size，默认1em=16px
3.rem是相对单位，相对于html元素字体大小而言的

17、【问答】

如何实现响应式布局？

媒体查询概念核心使用场景使用媒体查询方法 Link Style @media

18、【问答】

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

1.作用：可以让块元素水平排版，
2.特点：使用浮动布局元素脱离文档流，原先位置不保留，不占据原先空间，
3.使用浮动布局元素需要清除浮动。
清除浮动：
1.兄弟元素给兄弟元素设置clear:both
2.父元素给父元素设置::after{display：block；content：“ ”；clear：both}

19、【问答】

简述http协议

1.超文本传输协议，浏览器和服务器请求应答通信协议。
2.浏览器发送给服务器数据会被封装成请求报文：
请求行：method url http1.1
请求头：Content-Type
空行：回车换行分割请求头
请求体：post请求携带数据会被封装请求体中
3.服务器响应给浏览器数据会被封装成响应报文：
响应行：状态码状态码描述 http1.1
响应头:Content-Type
响应体：{status:200,data:[],message:””}

20、【问答】

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

Animation-name 动画名称
duration 动画持续时间
timing-function 动画速度曲线
delay动画等待时间
iteration-count动画迭代次数
deriction动画是否反向播放
fill-mode动画播放第几帧

21、【问答】

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

核心概念：容器弹性元素交叉轴主轴
给元素设置个display为flex，该元素成为弹性盒，子元素也就是弹性元素永远沿着主轴方向排列，主轴方向默认为水平方向
交叉轴方向默认为垂直方向，主轴和交叉轴可以通过flex-direction 更改排列方向容器属性：
display:flex 开启伸缩盒
flex-direction:row(默认值) column row-reverse column-reverse 更改主轴排列方向
flex-wrap:设置父容器空间不足时候是否换行显示默认不换行 nowrap(默认值) wrap(换行)wrap-reverse(换行反转)
flex-flow：flex-direction 和 flex-wrap 简写
justify-content 设置弹性元素在主轴对齐方式
flex-start
flex-end
center
space-around
space-between
space-evenly
strecth
align-items 设置弹性元素在交叉轴对齐方式
flex-start
flex-end
center
baseline
strecth
align-content 设置弹性元素多行对齐方式
flex-start
flex-end
center
space-around
space-between
space-evenly
strecth 元素属性：
order 更改弹性元素排列顺序
flex-grow 当父容器空间有剩余是否占满默认不占满默认值0
flex-shrink 当父容器空间不足时候是否进行等比例压缩默认是等比例压缩默认值1
设置为0表示不进行等比例压缩
flex-basis 给弹性元素设置宽度默认auto 优先级高于width
flex:flex-grow flex-shrink flex-basis 简写
align-self 设置弹性元素自身在交叉轴对齐方式

22、【问答】

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

1.margin 父width-子width/2 设置给左右
2.Padding 父height-子height/2 设置左右给父元素设置border-box
3.子绝父相,left,right为0 ,margin:auto
4.子绝父相,left:50% margin-left:-width/2
5.父元素diaplay:flex 子元素margin:auto;
6.父元素display:flex justify-content:center

23、【问答】简述文本在盒子中垂直居中的方法？