HTML+CSS测试题

前言

近日对HTML与CSS的学习已经告一段落了，htm和css说难不难说易不易，难于记得东西很多，易于操作，而且在布局方面比较锻炼你的思维逻辑。但是相对于后面js的学习还是算简单了，前两天我做了一份HTML+CSS的测试题，我整理了一下考试的题目与答案详解，答案里面我会习惯性的将相关知识一起注解上去，方便复习学习。

下面试卷奉上：

一、选择题

第九题选择题详解：

1.定义和用法
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。
2.语法

3.属性值
值 描述
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。
在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

二、简单题

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

• display : 隐藏对应的元素但不挤占该元素原来的空间。
• visibility: 隐藏对应的元素并且挤占该元素原来的空间。

扩展：
使用visibility:hidden比display:none性能上要好，display:none切换显示时面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

16.说明px、 em 、 rem三者关系

• px为长度单位，表示一个像素点
• em为相对长度单位，表示当前元素上的字体大小
• rem为相对长度单位，表示根（html）元素上声明的字体大小

拓展：

• px、em、rem都是计量单位，都能表示尺寸，但是有有所不同，而且其各有各的优缺点。
• Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素，利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。
• em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。
• rem也表示相对尺寸，其参考对象为根元素的font-size，因此只需要确定这一个font-size。

17.如何实现响应式布局？

• 通过媒体查询，可以通过@media来进行媒体查询，当网页显示在不同的网页中加载执行不同的css代码(当页面结构发生改变时)
• 通过浮动布局，定位布局，flex布局(只有盒子的宽高需要改变时)

拓展：
所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。
先做好PC端的样式，然后使用css中的@media媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化，栅格化的意思就是将页面划分成一块一块的区域，然后不同的终端适配就是将栅格重新排列

18.简述浮动布局以及其工作方式？
1、浮动布局用来解决块元素在x轴上排列的问题
2、浮动布局通常出现在 div>div 这种父子结构中，为子元素添加浮动特性
3、一个元素如果成为浮动元素，那么这个元素就会脱离文档流：宽度如果 没有指定则由内容决定；不再占据屏幕空间；同一级别的浮动元素会在一行 排列，如果一行无法容纳则换行显示；浮动元素会失去对父元素支撑；
4.如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通 流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流) ​
可选值： ​
none，默认值，元素默认在标准流(文档流/普通流)中排列 ​
left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动 ​ right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动

拓展：

• 浮动元素会引起的问题：

1.父元素的高度无法撑开，影响与父元素的同级元素。
2.与浮动元素同级的非浮动元素（内联元素）会紧跟随其后。
3.若非第一个元素浮动，则该元素之前的元素也需跟随其后，否则会影响页面的显示的结构。

• 清除浮动的几种方法：

方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如

，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用br、hr来进行清理。