第一阶段总结

前端方向第一阶段测试

1、下列哪个是子代选择器
p>b 子代
p b 后代
p+b 兄弟
p.b 选中p的同时选中类名
2、下述有关css属性position的属性值的描述，说法错误的是？
static：没有定位，元素出现在正常的流中
fixed：生成绝对定位的元素，相对于父元素进行定位
relative：生成相对定位的元素，相对于元素本身正常位置进行定位absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位
3.元素的alt和title有什么异同，选出正确的说法？
表现一样
alt作为图片的替代文字出现，title是图片的解释文字
title作为图片的替代文字出现，alt是图片的解释文字
以上说法都不正确

<meta>原字符，与浏览器协商，做用户看不见的设置

4、表格中合并单元格之间的空间的属性为
cellpadding 单元格内部填充
cellspacing 单元格之间
rules
border
5.在 css 选择器当中，优先级排序正确的是
id选择器>标签选择器>类选择器
标签选择器>类选择器>id选择器
类选择器>标签选择器>id选择器
id选择器>类选择器>标签选择器（元素选择器）
6.css中 display属性的属性值不包含？
inline block inline-block table hidden
7.form元素的enctype的属性值默认是？
application/x-www-form-urlencoded查询字符串请求方式 GET： POST:请求体
multipart/form-data：**块级，大文件传输form表单必须是
multipart/form-data，POST
text/plain 字符串格式
appliction/json 字符串格式

8.a标签在新窗口打开链接添加什么属性？
target href src width
9.以下哪个不是Html块元素的特点
独占一行空间
可以指定宽和高
高度由内容决定
可以和其他行内元素共享一行空间
10、html元素的核心属性有哪些？
id class title s style src
13、 多选 2 分
前端三要素是哪三个
vue react html css Javascript
14、 多选 2 分
以下哪个不是Html块元素

<div></div>
<p></p>
<h1></h1>
**<span></span>**行内
**<em></em>**

15.display:none与visibility:hidden的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。visibility: 隐藏对应的元素并且挤占该元素原来的空间，有留白
overflow:hidden 溢出不显示
16.说明px、 em 、 rem三者关系
字体可以继承大小
px为长度单位，表示一个像素点
em为相对长度单位，表示当前元素上的字体大小
rem为相对长度单位，表示根（html）元素上声明的字体大小
17.如何实现响应式布局？
1、如果是通过css原生代码，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码
2、如果是通过框架，例如bs，可以使用bs提供的响应式框架完成页面布局。
18、 问答 6 分
简述浮动布局以及其工作方式？
1、浮动布局用来解决块元素在x轴上排列的问题
2、浮动布局通常出现在 div>div 这种父子结构中，为子元素添加浮动特性
3、一个元素如果成为浮动元素，那么这个元素就会脱离文档****流：宽度如果没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会在一行排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑；overflow:hidden;clear:both;父元素：height:xxpx;
19、简述http协议
http协议是超文本传输协议，常用于BS架构中，为数据在网络传输中规定协议。
请求报文：浏览器会将前端请求封装成请求报文发送给后端，请求报文中包含请求行、请求头、请求体
响应报文：服务器接收到前端发来的请求，会将响应内容封装成为一个响应报文，浏览器会对响应报文进行解析，进而显示出来。响应报文中包含响应行、响应头、响应体。
默认端口号：80
Url http://ip:port/program/index.html?Username=zs&pwd=123
请求行 HTTP/1.1 URL GET\r\n
请求头： content-type:xxx\r\n
Request-size:xxx\r\n
\r\n
请求体：

请求行 HTTP/1.1 URL POST\r\n
请求头： content-type:xxx\r\n
Request-size:xxx\r\n
\r\n
请求体:{‘username’:’zs’,’pwd’:123}
面试题
https:加密 安全 seruicty 端口号： 443

20、列举最少5个animation的子属性，并说明其含义
animation-name 动画帧名称
animation-duration 动画持续时间
animation-delay 动画延迟时间
animation-timing-function 时间曲线函数
animation-direction 动画运行方向
animation-iteration-count 动画迭代次数
animation-fill-mode 动画填充模式
animation 速写形式
21、简述伸缩盒布局中的核心概念、常用规则、使用技巧等
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来改变主轴。Flex:解释一下（拉伸比例等）
21、简述一个盒子在另外一个盒子中水平居中的方法？
● margin:0 auto;
● 浮动布局、定位布局、
弹性布局居中方式：● Display:flex justify-content:center
23、 简述文本在盒子中垂直居中的方法？
https://blog.csdn.net/ziminghuohua/article/details/72795003
单行文不能：Line-height /Padding
多行文本：display:flex align-items:center
24、简述css3的盒子模型

1. 简述盒子：margin/border/padding/width/height
2. 有哪些盒子模型：边框盒子/IE盒子/怪异盒子 内容盒子/W3C盒子/默认盒子
   Border-box content-box
3. 盒子特征
   计算自身空间、设置宽高
   25、简述在css3中如何计算同一个规则的优先级
4. 优先级：引入进行比较 行内（内联）> 内部、外部
5. 选择器的规则相同：代码顺序 !Important
6. 权重优先级 1000 100 10 1

26、 简述css3选择器有哪些？
ID选择器、类名选择器、标签选择器、层次选择器、属性选择器、伪元素选择器、伪类选择器、普遍选择器
行内（内联）>ID>类=伪类>元素选择器