web前端开发面试题-易莱胜web前端开发培训面试题.docVIP

web前端开发面试题-易莱胜web前端开发培训面试题

(1)图片间隙?

在div中插入图片，图片会将div下方撑大3px。

hack1：将div与img写在同一行。

hack2：给img添加display：block；

dtli中的图片间隙。

hack：给img添加display：block；

(2)默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）

hack1：给元素添加：font-size：0；

hack2：声明：overflow：hidden；

表单行高不一致

hack：给表单添加声明：float：left；height：；border：0；

鼠标指针

hack：若统一某一元素鼠标指针为手型：cursor：pointer；

当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状

hack1：给a加display：inline-block；

hack2：给li加float：left；

5.:before和::before区别?

单冒号(:)用于CSS3伪类，

双冒号(::)用于CSS3伪元素。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

6.如何让一个div上下左右居中?

答：有三种方法。

方法1：

.div1{width:400px;

height:400px;

border:#CCC1pxsolid;

background:#99f;

position:absolute;left:50%;top:50%;

transform:translate(-50%,-50%);}

divclass=div1/div

方法2：

.div2{width:400px;

height:400px;

border:#CCC1pxsolid;

background:#99f;

position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;}

divclass=div2/div

方法3：

.div3{width:400px;

height:400px;

border:#CCC1pxsolid;

background:#9f9;

position:absolute;left:50%;top:50%;

margin-left:-200px;

margin-top:-200px;}

divclass=div3/div

7.css2.0和css3.0

答：css3加强了css2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了（columns之类的属性）。在效果方面加入了更多的效果(圆角，动画之类的)，还有在盒子模型和列表模块都进行了改进。不过CSS3兼容性不好，只有一些高级版本的浏览器支持。

8.弹性盒子模型?flex|box区别?

(1)引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。

即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。

当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。

在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列的；

而inline布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。?

(2)flex和box的区别:display：box是老规范，要兼顾古董机子就加上它；父级元素有display:box;属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。flex是最新的，董机老机子不支持的；

父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。AndroidUC浏览器只支持display:box语法；而iOSUC浏览器则支持两种方式。

9.viewport所有属性？

(1)width:设置layoutviewport的宽度，为一个正整数，或字符串device-width;

(2)init