html+css面试题7

41:浏览器标准模式和怪异模式?

  定义

标准模式页面按照HTML,CSS的定义渲染，

怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。

  区别：

两者盒子模型 渲染模式等的不同

三者之间的区别对比：
特性	Cookie	localStorage	sessionStorage
特性	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

相同点：都存储在客户端
不同点：

1.存储大小

cookie数据大小不能超过4k。

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

2.有效时间

localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage  数据在当前浏览器窗口关闭后自动删除。

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

3. 数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

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

sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会

话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

43:IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的margin 比设置的较大。

解决：加入_display：inline

44:从浏览器地址栏输入url到显示页面的步骤   

     浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；

      服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；

      浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

      载入解析到的资源文件，渲染页面，完成。

45:写出常用的css传统布局

    表格布局

    浮动布局，

       浮动布局主要采用float和clear两个属性来构建。

    定位布局  

        position属性来实现元素的绝对定位和相对定位。

流体布局的方式

46:简单描述一下什么是flex布局及常用属性说明

       1、  flex-direction：排列方向

            flex-direction: row | row-reverse | column | column-reverse

       2、flex-wrap如果一条轴线排不下，如何换行

            flex-wrap: nowrap | wrap | wrap-reverse

       3、flex-flow属性（上述两个组合）

            flex-flow: flex-direction, flex-wrap

            flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

       4、justify-content属性（在主轴上的对齐方式）横向

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

       5、align-items属性（在交叉轴上如何对齐）纵向

        align-items: flex-start | flex-end | center | baseline | stretch

       6、flex-grow属性（放大比例，默认为0，即如果存在剩余空间，也不放大）

        flex-grow: 默认为0  

       7、flex-shrink属性（缩小比例，默认为1，即如果空间不足，则缩小）

        flex-shrink: 默认为1

       8、flex-basis属性（在分配多余空间之前，项目占据的主轴空间）

        flex-basis: | auto

       9、flex属性

        flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

        flex: auto; （1 1 auto）

        flex: none; （0 0 auto）