前端第一阶段测试

选择

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、【问答】简述文本在盒子中垂直居中的方法？

Line-height:hreight

24、【问答】简述css3的盒子模型

1.内容盒子 w3c盒子 标准盒子
2.边框盒子 怪异盒子 IE盒子
3.内容盒子width和height是设置给盒子内容区的宽高
4.怪异盒子widht和height是设置给盒子本身

25、【问答】简述在css3中如何计算同一个规则的优先级

内联样式>内部样式/外部样式
!important优先级最高
Style属性 1000
Id选择器 100
类 伪类 属性 10
标签 伪元素 1 通配符 0

26、【问答】简述css3选择器有哪些？

Id class 标签 子代 后代 伪类选择器 伪元素选择器 否定伪类 兄弟选择器 组合选择器

如果觉得有用请给我点个赞⑧~