三大件

110 阅读3分钟

你是如何理解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. 为什么需要清除浮动

  1. 父元素的高度无法被撑开,影响与父元素同级的元素
  2. 与浮动元素同级的非浮动元素(内联元素)会跟随其后
  3. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示

清除浮动的方式

  1. 使用 CSS 中的 clear:both;(放一个空的 div,并设置上述 css),属性来清除元素的浮动,可解决 2、3 问题
  2. 对于问题 1,添加如下样式,给父元素添加 clearfix 样式:.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.cl earfix{display: inline-block;} /* for IE/Mac */
  3. 给父级元素设置 overflow:hidden;或 overflow:auto;本质是构建一个 BFC
  4. 给父级元素设置双伪元素
          .clearfix:after{
          	content:""; 		/*设置内容为空*/
          	height:0;			/*高度为 0*/
          	line-height:0; 		/*行高为 0*/
          	display:block; 		/*将文本转为块级元素*/
          	visibility:hidden;  /*将元素隐藏*/
          	clear:both; 		/*清除浮动*/
          }
          .clearfix{
          	zoom:1; 			/*为了兼容 IE*/
          }