HTML面试题及解析

HTML部分常见问题

1、怎么让一个不定宽高的DIV，垂直水平居中?

使用CSS方法:

父盒子设置:display:table-cell;text-align:center;vertical-align:middle;

Div设置:display:inline-block;vertical-align:middl;

使用CSS3transform:

父盒子设置:display:relative

Div设置:transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;

position 几个属性的作用?

position的常见四个属性值;relative,absolute,fixed,static。一般都要配合"left"、"top"、"right"以及"bottom"

属性使用

1、 Static：默认位置，设置为_static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何top、bottom、left 或right 声明)。一般不常用。

2、Relative：位置被设置为relative的元素，可将其移至相对于其正常位置的地方,意思就是如果设置了relative 值,那么,它偏移的top,right,bottom,left的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意relative 移动后的元素在原来的位置仍占据空间。

3、Absolute：位置设置为absolute的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的

父容器设置了position属性,并且position 的属性值为absolute 或者relative，那么就会依据父容器进行偏移。如

果其父容器没有设置position属性，那么偏移是以body 为依据。注意设置absolute 属性的元素在标准流中不占位

置。

4、Fixed：位置被设置为fixed的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以body 为依据的。注意设置fixed 属性的元素在标准流中不占位置。

px,em,rem的区别?

1. px像素(Pixel)。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果   px要换算成物理长度，需要指定精度DPI。

2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3、rem是CSS3新增的一个相对单位(rootem,根em),使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

4、区别：IE无法调整那些使用px作为单位的字体大小，而em 和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

什么是BFC?

1、定义:

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box 参与,它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

布局规则：

A.内部的   Box会在垂直方向，一个接一个地放置。

B. Box垂直方向的距离由   margin决定。属于同一个BFC的两个相邻Box的margin 会发生重叠。

C.每个元素的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

D. BFC的区域不会与float box 重叠。

E. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

F.计算BFC的高度时，浮动元素也参与计算。

3)哪些元素会生成BFC：

A.根元素

B. float属性不为none

C. position 为absolute 或fixed

D. display 为inline-block,table-cell,table-caption,flex,inline-flex

F. overflow 不为visible

表格自动换行怎么实现?

word-break:normal使用浏览器默认的换行规则;

break-all允许单词内换行;

keep-all只能在半角空格或连字符处换行

word-wrap:normal是用浏览器默认的换行规则;break-word在长单词或URL地址内部进行换行。

box-sizing、transition、translate分别是什么?

Box-sizing:用来指定盒模型的大小的计算方式。主要分为boreder-box(从边框固定盒子大小)、content-box(从内容固定盒子大小)两种计算方式。

transition：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过transtion-propety 设置过渡属性;

transtion-duration 设置过渡时间;

trantion-timing-function 设置过渡速度;

trantion-delay 设置过渡延时

translate:通过移动改变元素的位置;有x、y、z三个属性

选择器优先级是怎样的?

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承权重算法：

(0,0,0,0)==》第一个0对应的是important 的个数,第二个0对应的是id 选择器的个数，第三个0对

应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。

比较：

先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推

Iframe的作用?

用法：

Iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。

优点：便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。

缺点：

1、iframe的创建比一般的DOM   元素慢了1-2个数量级

2、iframe标签会阻塞页面的加载，如果页面的onload 事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在Safari 和Chrome中可以通过js 动态设置iframe的src属性来避免阻塞.

3、iframe 对于SEO不友好，替代方案一般就是动态语言的Incude机制和ajax   动态填充内容等.

有一个导航栏在chrome里面样式完好?在IE里文字都聚到一起了，是哪个兼容性问题?

用了display:flex属性,在ie10以下都是无效的。

xhtml和html有什么区别?

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：

XHTML元素必须被正确地嵌套。

XHTML元素必须被关闭。

标签名必须用小写字母。

XHTML文档必须拥有根元素。

标签上title 与alt属性的区别是什么?

Alt当图片不显示时，用文字代表。Title为该属性提供信息。

改变元素的外边距用什么属性?改变元素的内填充用什么属性?

改变元素的外边距用margin，改变元素的内填充用padding。

在新窗口打开链接的方法是?

target:   blank 。

合理的页面布局中常听过结构与表现分离，那么结构是什么?表现是什么?

结构是html,表现是css。

简述对Web语义化的理解?

就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web_操作和网站SEO，方便团队协作的一种标准，以图实现一种“无障碍”的   Web开发。

每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗?

DOCTYPE 是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义来解析文档。只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对   javascript脚本都会有所影响。

display:none;与visibility:hidden 的区别是什么?

display:none;使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”；

visibility:hidden;使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明)，而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。