html2

html2

HTML部分常见问题

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

使用css方法

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

2. Div设置:dis play : inline-block; vertical-align: middle;

使用css3transform

1. 父盒子设置:dis play : relative

2. Div设置:transform: transtate(-50%，-50%); position: absolute ; top :50%;left :50%;

2.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 属性的元素在标准流中不占位置。

2.px, em,rem的区别?

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

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

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

3.什么是BCF

BFC(Block formatting context)直译为"块级格式化上下文"。由于元素之间相互影响。

布局规则

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

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

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

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

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

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

哪些元素会产生BFC？A.根元素。B.float属性不为none。C.position为absolute或者fixed。D.display为inline-block，table-cell，flex。

4.表格自动换行怎么实现?

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

break-all允许单词内换行;

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

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

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

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

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

transtion-duration设置过渡时间;

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

trantion-delay设置过渡延时；

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

6.选择器优先级是怎样的?

! important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

7.iframe的作用

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

缺点：

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

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

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

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

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

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

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

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

display : none;使用该属性后，HTML_元素（对象）的宽度、高度等各种属性值都将”丢失”;

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