1.怎么实现垂直居中,水平居中,说出2-3种方式?
方法一:绝对定位 + left:50%,top: 50% + margin-left:(自身宽度的一半),margin-top:(自身高度的一半)
缺点:要自己计算容器的宽高,万一容器的宽高改变还要修改css样式
.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box1 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /*自身高度的一半*/
margin-left: -100px; /*自身宽度的一半*/
}
方法二:绝对定位 + left:50% ,top: 50%+ translate(-50%,-50%)
缺点:兼容性问题,必须要带上兼容性前缀。
.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box2 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
方法三:绝对定位 + left: 0,right: 0, top: 0, bottom: 0 + margin:auto
.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box3 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
方法四:弹性盒子。给父标签设置属性,display: flex; justify-content: center; align-items: center;
.parent { /*父标签*/
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.box4 {
width: 100px;
height: 100px;
border: 1px solid red;
background: red;
}
方法五:固定定位position:fixed;并设置一个较大的z-index层叠属性值。
.box5 {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px; /*自身高度的一半*/
margin-left: -100px; /*自身宽度的一半*/
z-index: 999;
}
方法六:要把元素相对于视口进行居中,那么相当于父元素的高度就是视口的高度,视口的高度可以用vh来获取:
#view-child{
margin: 50vh auto 0;
transform: translateY(-50%);
}
2.H5熟悉吗,H5都有哪些新增属性和新增元素?
H5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。
新增属性如下表(部分):
新增属性 | 说明 |
contextmenu | 指定右键菜单。label:菜单项显示的名称,icon:在菜单项左侧显示的图标,onclick:点击菜单项触发的事件 |
contenteditable | 规定是否可编辑元素的内容。值:true/false/inherit |
hidden | 用于隐藏该元素。一旦使用了此属性,则该元素就不会在浏览器中被显示。 |
draggable | 元素是否可拖拽。值:true/false/auto |
data-* | 让用户自定义属性的方式来存储数据。 |
placeholder | 占位属性,规定可描述输入字段预期值的简短的提示信息。 |
required | 约束表单元在提交前必须输入值。 |
pattern | 正则属性,约束用户输入的值必须与正则表达式匹配。 |
autofocus | 让指定的表单元素获得焦点。 |
autocomplete | 自动补全属性,会记录用户输入过的内容,双击表单元素会显示历史输入。 |
novalidate | 规定在提交表单时不应该验证 form 或 input 域。 |
multiple | 规定输入域中可选择多个内容。 |
新增元素如下表:
新增元素 | 说明 |
---|---|
<article> | 定义一个文章区域。 |
<aside> | 定义 <article> 标签外的内容。aside 的内容应该与附近的内容相关。 |
<audio> | 定义声音,比如音乐或其他音频流。 |
<bdi> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 |
<canvas> | 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。 |
<command> | 可以定义用户可能调用的命令(比如单选按钮、复选框或按钮)。 |
<datalist> | 规定了 <input> 元素可能的选项列表。 |
<dialog> | 定义一个对话框、确认框或窗口。 |
<embed> | 定义了一个容器,用来嵌入外部应用或者互动程序(插件)。 |
<figcaption> | 为 <figure> 元素定义标题。 |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)。 |
<footer> | 定义文档或者文档的一部分区域的页脚。 |
<header> | 定义文档或者文档的一部分区域的页眉。 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<output> | 作为计算结果输出显示(比如执行脚本的输出)。 |
<progress> | 定义运行中的任务进度(进程)。 |
<rp> | 在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。 |
<rt> | 定义字符(中文注音或字符)的解释或发音。 |
<ruby> | 定义 ruby 注释(中文注音或字符)。 |
<section> | 定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。 |
<source> | 为媒体元素(比如 <video> 和 <audio>)定义媒体资源。 |
<summary> | 为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。 |
<time> | 定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。 |
<track> | 为媒体元素(比如 <audio> and <video>)规定外部文本轨道。 |
<video> | 定义视频,比如电影片段或其他视频流。 |
<wbr> | (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。 |
3.说一下都有哪些本地存储方式,区别是什么?
- Cookie
可以自定义生存周期,生成是指定一个maxAge值,在这个生存周期内Cookie有效。存储数据大小在4K左右,前后端都可以访问。
- localStorage
只要不是手动清除,它就会一直将数据存储在客户端,即使关闭了浏览器也一直存在,属于本地持久存储,一般用于存储一些用户偏好。存储数据大小一般在5M左右(浏览器不同,大小不同)。
- sessionStorage
页面会话期间,一旦关闭浏览器,数据就会消失。存储数据大小一般在5M左右(浏览器不同,大小不同)。
共同点:都是保存在浏览器端。
4.说一些你遇到过的解决兼容的问题
- 双倍边距问题
浮动后的元素在IE浏览器下出现横向双倍边距,解决办法就是设置margin-left负值。
例如:几个div,float: left; margin-left: 10px;,把第一个div再设置margin-left: -10px;
- 图片1px边框问题
给图片设置border: 0;
- 透明度问题
设置opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
(文章自己编写,如有发现问题请提出改正,谢谢)