HTML及CSS面试题2

1、转换为块元素的方法分别是？

1. display:block
2. float:取值不为none
3. position:absolute
4. position:fixed

2、如何让子元素位于父元素垂直水平居中显示?

1. 定位方式：
   a. 父元素：{position:relative}
   b. 子元素：
   ■ width:value;
   ■ height:value;
   ■ position:absolute
   ■ top:50%
   ■ left:50%
   ■ margin-top：负的子元素自身的一半 || transform:translateX(-50px)
   ■ margin-left：负的子元素自身的一半 || transform:translateY(-50px)

2. 弹性盒方式：
   

3. 其它方式
   a. 通过verticle-align:middle实现垂直居中
   b. 通过父元素设置伪元素 :before，然后设置子元素的verticle-align:middle实现垂直居中

3、定位和浮动的区别?

1. 不同点：
   a. 概念不同：
   ■ 浮动：半脱离文档流，当补位元素中存在文本的时候会出现环绕效果
   ■ 定位：全脱离文档流，当补位元素中存在文本时不会有文本环绕，会直接被前面的元素覆盖
   b. 用途不同：
   ■ 浮动：应用于布局让块级元素横向显示
   ■ 定位：应用于调整元素的位置
2. 相同点：
   a. 都会触发BFC(块级作用域)
   b. 都会改变元素类型
   c. 都会让margin:0 auto失效
   d. 让自适应宽度的盒子继续自适应(被文本撑开)
   e. 都会脱离文档流
   f. 都会让后面的元素上去补位置

4、table-layout表格的布局中，是否固定单元格auto/fixed取值的意思?

1. auto：只要文本过多，单元格就会被撑大
   a. 优点：灵活性比较强；
   b. 缺点：每次都会重新加载计算表格的大小
2. fixed：拥有一个固定的宽度，单元格不会被撑大
   a. 优点：固定宽度，不用每次加载计算大小；
   b. 缺点：不灵活

5、高度塌陷(清除浮动副作用)的解决办法是什么？

1. 添加高度：
   ○ 给父元素添加高度
2. 清除浮动：
   ○ 给后面的子元素添加清除浮动，不上去补位置，但会导致margin-top失效
3. 多个子元素塌陷：
   如果1个/多个的子元素浮动后，产生的父元素高度塌陷，可以：
   a. 给父元素添加overflow:hidden
   b. 给浮动的子元素后添加空白元素，给补位元素清除浮动，这里浮动元素必须为块级元素
4. 用伪元素的方法解决 ✔
   ○ 将伪元素(content必须写，且要用:after)放在父元素中，转类型为块元素，然后在清除浮动

6、如何制作三角形？

1. 盒子的宽、高设置为0
2. 将边框设置成10px——这里是示例值，边框颜色为透明
3. 需要哪个方向的三角形，将对应的方向边框颜色设置出来即可

7、HTML5里面新增了哪些内容？

1. 语义化的标签
2. 增强型的表单
3. 音频和视频
4. webstorage、sessionstorage存储机制
5. canvas绘图
6. 新的API方法

8、HTML5新增的标签有哪些？(一般情况下回答5-6个即可)

● 共12个(这里只放了常用的)——以1-9的回答为准，10-15为不常用的h5新增标签

1. header：页面/区域头部
2. footer：页面/区域尾部
3. section：主体区域
4. main：重要/主要内容区域
5. aside：侧边栏
6. nav：导航区域
7. article：独立文章区域
8. figure：独立区域
9. figcaption：独立区域的标题
10. mark：背景高亮
11. canvas：绘图标签
12. hgroup：标题分组
13. <audio src=”路径”></audio>：音频标签
14. <video src=”路径”</video>：视频标签视频
15. <embed src=“”></embed>：媒体文件引入

9、什么是渐进增强和优雅降级？

1. 渐进增强：
   a. 针对低版本浏览器进行构建页面，保证最基本的功能
   b. 然后，再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验—从低到高
2. 优雅降级：
   ○ 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容—从高到低
3. 两者区别：
   a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
   b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
   c. 降级(功能衰减)意味着往回看
   d. 渐进增强则意味着朝前看，同时保证其根基处于安全地带