你是如何理解HTML语义化的
答:说到HTML语义话,我们得先从原始的页面开始说起,起初页面是由后端的人员编写的,页面也肯定不好看,然后就是div+css编写,整个网页都是div,为了改变这种这种状况,开发者们和官方提出了让HTML结构语义化的概念,并且官方w3c,也在HTML5给出了几个新的语义化的标签。总而言之就是要在合适的地方使用合适的标签,比如
1.article标签代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。
2.em标签和strong标签都表示强调的标签,但是其中em表示语义上的强调,strong表示内容上的强调
3.nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。但是我在有些时候却情不自禁的想用它,譬如:侧边栏上目录,面包屑导航,搜索样式,或者下一篇上一篇文章,但是事实上规范上说nav只能用在页面主要导航部分上
.meta viewport 是做什么用的,怎么写?
答:这个标签标识是编写移动端页面的,是为了使我们编写的页面可以在手机等设备上显示的标签,
一般写法为:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
可以回答一般都是打开淘宝网页,然后打开开发者模式然后切换到移动端直接复制其中的meat viewport标签(这样回答应该就可以了)
你用过哪些 HTML 5 标签?
注意这里问的使html5的标签,通常指的是新的标签,这里回答最好点到为止,因为如果你回答的多了,面试官就很容易追问下去。
回答:HTML5里面新增加了语义化标签article(表示文章,博客条目),nav(表示定义导航链接的部分。)、header(定义文档的页眉)等标签,和一些其他的video(定义视频,比如电影片段或其他视频流)、audio(定义声音,比如音乐或其他音频流)、canvas(用来定义图形容器,必须使用脚本来绘制图形)标签.
css实现水平居中的几种方式
方法一:利用定位(常用方法,推荐)
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
方法二:利用 margin:auto;top: 0;right: 0; bottom: 0;
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
方法三:利用 display:flex;设置垂直水平都居中
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}.
child {
width: 100px;
height: 100px;
border: 1px solid #999;
}
</style>
方法四:利用 transform;transform: translate(-50%, -50%)
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法五:利用 display:table-cell
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
display: inline-block;
}
</style>
清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
1. 为什么需要清除浮动
- 父元素的高度无法被撑开,影响与父元素同级的元素
- 与浮动元素同级的非浮动元素(内联元素)会跟随其后
- 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示
清除浮动的方式
- 使用 CSS 中的 clear:both;(放一个空的 div,并设置上述 css),属性来清除元素的浮动,可解决 2、3 问题
- 对于问题 1,添加如下样式,给父元素添加 clearfix 样式:.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.cl earfix{display: inline-block;} /* for IE/Mac */
- 给父级元素设置 overflow:hidden;或 overflow:auto;本质是构建一个 BFC
- 给父级元素设置双伪元素
.clearfix:after{
content:""; /*设置内容为空*/
height:0; /*高度为 0*/
line-height:0; /*行高为 0*/
display:block; /*将文本转为块级元素*/
visibility:hidden; /*将元素隐藏*/
clear:both; /*清除浮动*/
}
.clearfix{
zoom:1; /*为了兼容 IE*/
}