前端工作面试问题(上)(8)

    reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式,重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同,通过reset能够统一样式,显示相同的想过。但是很多reset是没必要的,多写了会增加浏览器在渲染页面的负担。

比如说,

  1)我们不应该对行内元素设置无效的属性,对span设置width和height,margin都不会生效的。

  2)对于absolute和fixed定位的固定尺寸(设置了width和height属性),如果设置了top和left属性,那么bottom和right,margin和float就没有作用。

  3)后面设置的属性将会覆盖前面重复设置的属性。

期待能够指出它的负面影响,或者提到它的一个更好的替换者"normalize"

     normalize.css是一个可以定制的css文件,它让不同的浏览器在渲染元素时形式更统一。

解释下浮动和它的工作原理。

    问题成因:在一个容器中,有两个浮动的子元素,会造成显示结果意想不到的问题。在CSS规范中,浮动定位不属于正常的页面流,而是独立定位的。

    关于css的定位机制:普通流,浮动,绝对定位(position:fixed是position:absolute的一个子类)。浮动的框可以左右移动,直到它的外边缘遇到包含框或者另一个浮动框的边缘,所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以,只含有浮动元素的父容器在显示时不需要考虑子元素的位置,就造成显示父容器像空容器一样。

    解决浮动:

    1)添加额外标签
      在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>。 

      优点:通俗易懂,容易掌握
      缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦。
    2)使用 br标签和其自身的 html属性 <br clear="all" /> 

      优点:比空标签方式语义稍强,代码量较少
      缺点:同样有违结构与表现的分离,不推荐使用
    3)父元素设置 overflow:hidden
      通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1。<div> 

      优点:不存在结构和语义化问题,代码量极少
      缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;overflow:hidden会导致中键失效。
    4)父元素设置 overflow:auto 属性。同样IE6需要触发hasLayout,演示和3差不多
      优点:不存在结构和语义化问题,代码量极少
      缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等。
    5)使用:after 伪元素
    需要注意的是 :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”),很多清除浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。 

    .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
    .clearfix { *zoom:1; }

      优点:结构和语义化完全正确,代码量居中
      缺点:复用方式不当会造成代码量增加 

描述z-index和叠加上下文是如何形成的。

   z-index就是控制元素在页面的中的叠加顺序,z-index值高的元素显示在z-index值低的前面。z-index的使用条件:只对有 position 属性的且值不为static的元素才有效。叠加上下文和“堆栈上下文”有关,一组具有共同双亲的元素,按照堆栈顺序一起向前或向后移动构成了所谓的堆栈上下文。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/1287c5e455583263de605555e03a89e2.html