HTML和css部分面试题（3）

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同

浏览器之间的显示差异

但是初始化 CSS 会对搜索引擎优化造成小影响

BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布

局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin

重叠的问题

创建BFC

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

1. 所有的标记都必须要有一个相应的结束标记

2. 所有标签的元素和属性的名字都必须使用小写

3. 所有的 XML 标记都必须合理嵌套

4. 所有的属性必须用引号 "" 括起来

5. 把所有 < 和 & 特殊符号用编码表示

6. 给所有属性赋一个值

7. 不要在注释内容中使用 "--"

8. 图片必须有说明文字

浏览器默认的margin和padding不同 解决方案：加一个全局的 *{margin:0;padding:0;} 来统一

(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、

(2):使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、

(3):更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认

的 display 值

块级元素(默认值是‘block’) ： div  p  h1-h6 form ul hr table

行内元素(默认值是‘inline’) : a  b  br  i  span input img link select  small  strong

Css 盒模型:内容，border ,margin，padding

结构层  Html

表示层  CSS

行为层 j s

display：

none：取消样式

block：块级元素

inline：行内元素

inline-block：行内块元素

normal：默认样式

flex：弹性布局

*absolute

生成绝对定位的元素，相对于离最近的包含块元素进行定位。

*fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

* relative

生成相对定位的元素，相对于其正常位置进行定位。

* static 默认值。没有定位，元素出现在正常的流中

* inherit 规定从父元素继承 position 属性的值。

(1):b标签和strong标签都可以对文本进行加粗

(2):i标签和em标签同样也可以对文本进行倾斜

但是strong和em有强调的作用，有利于SEO（搜索引擎优化

所以日常工作中建议用strong和em标签。

  定义

标准模式页面按照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 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

解决：加入_display：inline

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

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

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

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

    表格布局

    浮动布局，

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

    定位布局  

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

流体布局的方式

       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）

        css reset

        normalize css

        *{}