前端面试大全(三)

第三部分 CSS

· 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

· CSS盒子模型:由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

· 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不一样

·   标准的css盒子模型宽高就是内容区宽高;

·   低端IE css盒子模型宽高 内边距﹢边界﹢内容区;

· CSS选择符有哪些?哪些属性可以继承?

类型选择符(body)、群组选择符(h1,h2,h3,span)、包含选择符(h2 span)、ID选择符(#id)、Class选择符(.content)

CLASS属性,伪类A标签,列表ul、li、dl、dd、dt可以继承

· position的值relative和absolute定位原点是?

absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素,相对于其在普通流中的位置进行定位。

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

sticky 生成粘性定位的元素,容器的位置根据正常文档流计算得出

· 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

Margin 0 auto

#dingwei{padding:10px;background-color:#003300;color:#FFFFFF;

width:600px;height:300px;

display:block;

position: absolute;

top:50%;

left:50%;

margin-left:-300px;

margin-top:-150px;}

· CSS权重优先级是如何计算的?

!import > id > class > tag

• 请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式

浮动float最开始出现的意义是为了让文字环绕图片而已,但人们发现,如果想要三个块级元素并排显示,都给它们加个float来得会比较方便

清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

1.三个div 水平排列,需要用到浮动,但如果用一个边框包起来,由于使用了浮动不能实现,就需要清除浮动 clear:both

2,采用伪元素

zoom:1清除浮动原理:清除浮动,触发hasLayout;Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距(margin)的重叠,浮动清除,触发ie的haslayout属性等。来龙去脉大概如下:当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。Zoom属是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标准化,出现在 CSS 3.0 规范草案中。目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?可以通过css3里面的动画属性scale进行缩放。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,623评论 1 19
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,636评论 0 25
  • 老朋友不了解你的近况,新朋友不懂你的脾气。 今天陪表妹去上钢琴课,上了公交落座之后才发现过道一旁是小学要好...
    泡桐姑娘阅读 249评论 0 3
  • 柠柠小宝贝: 虽说我一直很不屑以这样俗气的形式祝别人生日快乐 但似乎也并没有更直接的办法来表达我对你的爱´ε` 我...
    wwarkey阅读 265评论 0 0