web前端面试常见问题二 ------css布局(position)
来源:互联网 发布:c语言与数据库 编辑:程序博客网 时间:2024/05/17 23:43
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定位以外的第一个父元素定位的。
举个例子,代码如下:
<div id="parent"> <div id="children"></div> </div>当父元素position为relative(或者absolute)时#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(默认值)时,布局效果如下:
- web前端面试常见问题二 ------css布局(position)
- web前端面试常见问题一---------css布局
- 前端面试拾遗——CSS选择器、Flex布局、position
- web前端css--position
- Web前端面试常见问题
- Web前端基础(CSS position的正确用法)
- 关于前端面试中的一些常见问题-CSS(欢迎补充)
- web前端之CSS设计指南二:页面布局(固定宽度、流动、弹性)
- web前端工程师面试技巧 常见问题解答
- web前端 基础部分(二) CSS
- web前端html+css常用布局01
- web前端html+css常用布局02
- web前端html+css常用布局03
- web前端html+css常用布局04
- web前端之CSS布局的重要性
- 前端css position
- web前端面试,包括javascript,css
- 前端面试(二)
- ffmpeg+ffserver搭建流媒体服务器
- 内网映射到外网的工具ngrok使用
- win7 IE11浏览器怎么降至IE8?
- java基础知识(2015,6,22)
- Opencv2.4.9源码分析——HoughLinesP
- web前端面试常见问题二 ------css布局(position)
- RandomAccessFileDemo
- C实现 LeetCode->Reverse Linked List II (双指针大法)(单链表反转)
- 文章标题
- Android JNI之——UnsatisfiedLinkError errordlopen failed: cannot locate symbol "rand"
- Web基础入门
- HDU1299&&SPOJ - KPEQU(找因子来找解的个数)
- 频率与频点
- Functional Programming Principles in Scala