[WEB面试题] web前端面试题HTML+CSS第一弹，个人整理部分面试题汇总

以下内容仅供参考，网络整理而来

1.XHTML和HTML是什么有什么不同的区别

HTML是一种基本的WEB网页设计语言

XHTML可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

2.常见浏览器的内核分别有哪些？

Trident内核代表产品Internet Explorer，又称其为IE内核

Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎

WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，主要代表作品有Safari和Google的浏览器Chrome

Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用

3.HTML和HTML5有什么区别？HTML5有什么特性

HTML5是目前最新的HTML版本，增加了新特性新标签

区别：在文档声明上，在结构语义上

新特性：

主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation

4. cookies，sessionStorage 和 localStorage 的区别

共同点：都是保存在浏览器端且同源的

区别：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小限制也不同：

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

数据有效期不同：

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同：

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

5.浏览器中的多个标签页之间如何进行通信

localstorge、cookies等本地储存方式进行通信

6.HTML5 头部声明为什么只需要" !DOCTYPE HTML"？

HTML5 不基于 SGML不需要对DTD进行引用

　　但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）

而HTML4.01基于SGML,所以需要对DTD进行引用

　　才能告知浏览器文档所使用的文档类型

 代码题     6.CSS实现垂直水平居中

<div class="wrapper">
    <div class="content"></div>
</div>

.wrapper{position:relative;}
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相对定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height，width
        margin-left: -100px;
    }

7.行内元素和块级元素有什么区别？分别有哪些？

块元素（例如div）在没有任何布局属性作用时，默认排列方式是换行排列

内联元素（例如span、a）在没有任何布局属性作用时，默认排列方式是在同行排列，直到宽度超出包含它的容器宽度时才自动换行

块级元素：div,p,h1,form,ul,li
行内元素 : span>,a,label,input,img,strong,em
CSS盒模型:border ,margin，padding

 8.CSS引入方式中“link”和“@import”的区别？

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务

　　　　@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载

　　　　@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题

　　　　@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式

　　　　而@import不支持。

9.CSS有哪些清除浮动的方法？至少要两种

//方法一：添加新的元素使用属性 clear：both
.div{
   clear:both; 
   overflow:hidden;
}

//方法二：父级CSS定义 overflow: auto
.div{
    overflow: auto; 
    zoom: 1; //处理兼容性问题
}

//方法三： 父级伪类 :after 方法

.fjdiv{zoom:1;}    /*==for IE6/7 Maxthon2==*/
.fjdiv:after {
   clear:both;
   content:'.';
   display:block;
   visibility:hidden;
}

10.CSS居中书写样式

水平居中设置：

行内元素：

text-align:center；

Flex布局：

justify-content (适用于父类容器上) 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around

div
{
display: flex;
justify-content: space-around;
}

• flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
• space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
• space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

垂直居中设置：

• 父元素高度确定的单行文本（内联元素）
• height = line-height
• 父元素高度确定的多行文本（内联元素）
• 插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle
• 先设置 display:table-cell 再设置 vertical-align:middle
• 块级元素居中
• 水平居中：
• 定宽块状元素 设置 左右 margin 值为 auto
• 不定宽块状元素：
• 在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto
• 给该元素设置 displa:inine 方法
• 父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%
• 垂直居中设置：
• 使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性
• 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了
• 利用display:table-cell属性使内容垂直居中; 使用css3的新属性transform:translate(x,y)属性; 使用:before元素;