web前端面试常见问题二
------css布局(position)
前言:博主我今年大三,web前端学了也有小半年啦,因为大四没课啦,所以已经开始找实习,面试了很多大大小小的公司,有失败也有成功。接下来我将和大家分享一下我在各个公司遇到的一些常见面试题,希望能和大家相互探讨,共同进步。
二.position
position这个属性对于页面布局实在是太重要啦。w3c的官方定义如下:
定义和用法
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
可能的值
值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 inherit 规定应该从父元素继承 position 属性的值。
最常用的值有两个分别是absolute(绝对定位),relative(相对定位),如果你学了web前端,却连这两个属性都没搞清楚,那么你就太差劲啦。
position:relative表示相对定位,是对于自身正常位置进行定位(这个比较好理解,我就不举例子解释啦)
position:absolute表示绝对定位,是相对于static定位以外的第一个父元素定位的。
举个例子,代码如下:
当父元素position为relative(或者absolute)时<div id="parent"> <div id="children"></div> </div>
#parent { position: relative; width: 500px; height: 200px;
margin-top:100px; background-color: red; } #children { position: absolute; width: 200px; height: 100px;
效果如下:top: 0; background-color: green; }
当父元素position为static(默认值)时,布局效果如下: