1、转换为块元素的方法分别是?
display:block
float
:取值不为noneposition:absolute
position:fixed
2、如何让子元素位于父元素垂直水平居中显示?
-
定位方式:
a. 父元素:{position:relative}
b. 子元素:
■ width:value;
■ height:value;
■ position:absolute
■ top:50%
■ left:50%
■ margin-top:负的子元素自身的一半 || transform:translateX(-50px)
■ margin-left:负的子元素自身的一半 || transform:translateY(-50px) -
弹性盒方式:
-
其它方式
a. 通过verticle-align:middle
实现垂直居中
b. 通过父元素设置伪元素:before
,然后设置子元素的verticle-align:middle
实现垂直居中
3、定位和浮动的区别?
- 不同点:
a.概念不同
:
■ 浮动:半脱离文档流,当补位元素中存在文本的时候会出现环绕效果
■ 定位:全脱离文档流,当补位元素中存在文本时不会有文本环绕,会直接被前面的元素覆盖
b.用途不同
:
■ 浮动:应用于布局让块级元素横向显示
■ 定位:应用于调整元素的位置 - 相同点:
a. 都会触发BFC(块级作用域)
b. 都会改变元素类型
c. 都会让margin:0 auto失效
d. 让自适应宽度的盒子继续自适应(被文本撑开)
e. 都会脱离文档流
f. 都会让后面的元素上去补位置
4、table-layout表格的布局中,是否固定单元格auto/fixed取值的意思?
- auto:只要文本过多,单元格就会被撑大
a. 优点:灵活性比较强;
b. 缺点:每次都会重新加载计算表格的大小 - fixed:拥有一个固定的宽度,单元格不会被撑大
a. 优点:固定宽度,不用每次加载计算大小;
b. 缺点:不灵活
5、高度塌陷(清除浮动副作用)的解决办法是什么?
- 添加高度:
○ 给父元素添加高度 - 清除浮动:
○ 给后面的子元素添加清除浮动,不上去补位置,但会导致margin-top失效 - 多个子元素塌陷:
如果1个/多个的子元素浮动后,产生的父元素高度塌陷,可以:
a. 给父元素添加overflow:hidden
b. 给浮动的子元素后添加空白元素,给补位元素清除浮动,这里浮动元素必须为块级元素 - 用伪元素的方法解决 ✔
○ 将伪元素(content必须写,且要用:after)放在父元素中,转类型为块元素,然后在清除浮动
6、如何制作三角形?
- 盒子的宽、高设置为0
- 将边框设置成10px——这里是示例值,边框颜色为透明
- 需要哪个方向的三角形,将对应的方向边框颜色设置出来即可
7、HTML5里面新增了哪些内容?
- 语义化的标签
- 增强型的表单
- 音频和视频
webstorage
、sessionstorage
存储机制- canvas绘图
- 新的API方法
8、HTML5新增的标签有哪些?(一般情况下回答5-6个即可)
● 共12个(这里只放了常用的)——以1-9的回答为准,10-15为不常用的h5新增标签
- header:页面/区域头部
- footer:页面/区域尾部
- section:主体区域
- main:重要/主要内容区域
- aside:侧边栏
- nav:导航区域
- article:独立文章区域
- figure:独立区域
- figcaption:独立区域的标题
- mark:背景高亮
- canvas:绘图标签
- hgroup:标题分组
<audio src=”路径”></audio>
:音频标签<video src=”路径”</video>
:视频标签视频<embed src=“”></embed>
:媒体文件引入
9、什么是渐进增强和优雅降级?
- 渐进增强:
a. 针对低版本浏览器进行构建页面,保证最基本的功能
b. 然后,再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验—从低到高 - 优雅降级:
○ 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容—从高到低 - 两者区别:
a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。
c. 降级(功能衰减)意味着往回看
d. 渐进增强则意味着朝前看,同时保证其根基处于安全地带