css

1.css水平垂直居中的几种方式

1.已知元素宽度和高度时，设置父盒子为相对定位，子盒子为绝对定位，top、left为50%，margin-top和margin-left为子盒子负的宽高的一半。

2.当元素宽度和高度未知时，设置父盒子为相对定位，子盒子为绝对定位，top、left为50%，transform的translate，x轴和y轴都设置为-50%

3.当元素宽度和高度未知时，设置父盒子为相对定位，子盒子为绝对定位，top/left/right/bottom为0，margin设置为auto

4.利用弹性盒子，通过给父元素设置display为flex， justify-content和align-items的值为center

5.父盒子设置text-align:center，子盒子设置行高为父盒子的高度，实现单行文本水平垂直居中

2.说⼀说盒模型和怪异盒模型

标准盒模型:width和height代表内容区域的宽高，盒子总宽：width + 内边距 + 边框 + 外边距；

怪异盒模型：width和height代表内容区域+内边距+边框的宽高，盒子总宽：width + 外边距；

box-sizing 属性：content-box：默认值，以标准盒模型模式去解析计算；border-box：以怪异盒模型去解析计算。

3.清除浮动的方法

清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。

当为子元素设置了浮动，如果不清除浮动，那么父元素将会出现高度塌陷的现象。所以当我们设置了浮动后，就要解决浮动带来的影响。下面就要我们介绍几种清除浮动的方法。

方法一：额外添加一个空白标签

给谁清除浮动，就在其后额外添加一个空白标签 ，给其样式设置clear：both。缺点：添加许多无意义的标签，结构化比较差。clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来 。

方法二：父元素添加overflow:hidden

通过触发BFC方式，实现清除浮动。缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

方法三：使用after伪元素清除浮动。缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

方法四：使用before和after双伪元素清除浮动。优点：代码更简洁。缺点：用zoom:1触发hasLayout.

方法五：为父元素设置高度。缺点: 需要手动添加高度，如何后面的高度发生变化，还要再次修改高度，给后期的维护带来麻烦。优点: 简单粗暴直接有效，清除了浮动带来的影响。

4..如何解决1px的问题

1.使用伪元素 + CSS3``缩放的方式

2.使用 动态 viewport + rem 布局 的方式（即 Flexible 实现方案）

3.新方案：使用 vw 单位适配方案（将来推荐的一种方案，但目前项目中没有实际应用，故本文不做讨论）

5.页⾯导入样式时，使⽤link和@import有什么区别？

1.link属于XHTML标签，除了加载CSS之外还能用于定义RSS,@import是CSS提供的,只能用于加载CSS。

2.link加载的文件,在页面加载的时候,link文件会同时加载，而@import引入的CSS文件,是页面在加载完成后再加载。

3.@import有兼容性问题，IE5以下的浏览器是无法识别，而link无兼容性问题。

6.Img标签的title和alt有什么区别？

title是当鼠标划到图片元素时显示的图片描述。

alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰性图片外都需要设置有意义的值，搜索引擎会重点分析。

7.href与src的区别

  1. href⽤于建⽴当前⻚⾯与引⽤资源之间的关系（链接）；⽽src则会替换当前标签。

  2. 遇到href，⻚⾯会并⾏加载后续内容；⽽src则不同，浏览器需要加载完毕src的内容才会继续往下执⾏。

8.em与rem的区别

em是⼀种相对⻓度单位，相对于⾃身元素的字号⼤⼩，如果没有设置即参照⽗容器的字号⼤⼩或浏览器默认字号⼤⼩。

rem是css3的新标准也是⼀种相对⻓度单位，其相对于HTML根标签的字号⼤⼩

9.各浏览器间的兼容性问题

Css兼容性问题：

1.不同浏览器的标签默认的margin和padding不同

解决办法：可以通过设置全局样式来解决这个问题，这样所有的样式都会重置，初始值都会相同了。

2.css3新属性，加浏览器前缀兼容早期浏览

-moz- / 火狐浏览器 /

-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /

-o- / Opera浏览器(早期) /

-ms- / IE /

3.图片默认有间距

几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。

可以通过使用float属性为img布局(所有图片左浮)

js兼容性问题：

  1. 事件绑定

IE: dom.attachEvent();

标准浏览器： dom.addEventListener(‘click',function(event){},false);

  1. event事件对象问题

解决办法：var e=ev||window.event; IE9以下用window.event获取事件对象

  1. event.srcElement(事件源对象)问题

IE： event对象有srcElement属性，但是没有target属性；

Firefox: event对象有target属性，但是没有srcElement属性。

解决办法：srcObj = event.srcElement?event.srcElement:event.target;