十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
本篇文章为大家展示了CSS中position属性有什么用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
成都创新互联公司从2013年创立,是专业互联网技术服务公司,拥有项目网站制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元全州做网站,已为上家服务,为全州各地企业和个人服务,联系电话:18982081108
position属性常用的取值static、relative以及absolute和它们的基本行为是每个前端都应该掌握的。这包括relative和absolute的定位原点。
fixed旧版本IE不支持,但是一个对技术有热情的工程师也是应该了解的。
有过研究工程师可以知道absolute的containing block计算方式跟正常流不同,当然如果没读过标准的话,表述方式不一定是这样。
对CSS布局有深入研究的工程师会知道position跟display、margin collapse、overflow、float这些特性相互叠加后的行为。
说句老实话,在状态好的情况下,若是被问到这个题,我还能和他说道说道(很浅的那种),在状态一般的情况下,我估计自己也直接悲剧了,那造成这个的是什么原因呢?
答案毫无疑问的是我CSS水平是很水的,当项目经验不够的情况下,看书是不能记住一些东西的,所以还是需要项目实践。
于是抱着我水我自豪的态度,我来试试他这道题水到底有多深,居然会刷掉一半的人。
思考过程
这个题若是单纯提出position的几个属性,倒没什么问题,但我们来看看他的发散:
normal flow(一般流)
containing block(包含块)
bfc(我深刻的意识到我一定见过他,但可耻的忘的一干二净了!)
margin collapse(搞不懂啊,应该是float引起的元素坍塌吧?)
base line (基线对齐)
......
后面的就完全没有印象了,完了我想说,大哥我们能说中文吗。。。至少给点解释吧,对于css菜鸟来说看题目都很吃力的。。。。(掩面而泣)
惊叹
仔细阅读题目并加以分析后,你会发现他这潭水是很深的,这道题快5分钟可结束,慢可问上半个小时,而且问完了CSS都可以忽略不计了。。。
为什么这么说呢?
① position主要用于页面布局,对css布局熟悉的朋友能很好的运用他布局,甚至抛弃float那个魔鬼(昨天我做了一道面试题就不用float布局,因为float本身是不用于布局的,这么做的大哥,我不知道对不对,但我认为既然float不应该用于布局,我们便应该下意识的少用)。
② 在他发散过程中由将块级元素与行内元素提到了,甚至细分到了行内元素的垂直对齐方式,更有可能发散到line-height上面,不可谓不深啊!
③ 在以上能做好的都已经不错了,然后这道题更是可以细致到各种应用细节,比如在IE7一下浏览器使用relative的z-index会有什么问题,比如在布局上你会使用float吗,float为什么会引起元素坍塌,你如何解决元素坍塌......
......
然后的然后,他这道题真的发散开了就很大了,对于我这种水货来说,看不懂啊,于是便只能在自己理解的方面做下说明,于是我们开始吧!
基本视觉格式化
凡是不能一蹴而就,我们一步步来,先了解点基础的东西吧
我们在使用CSS过程中会发现很多“怪异”的现象,如果我们掌握了CSS中视觉表现模型是如何工作的了,那么是不是会更加接近真理呢?
基本框
CSS假定每个元素都有一个基本框,这个矩形框便是我们所说的元素框(在CSS3出现后圆形、团原型也不是不可能哦)
各个元素框中心有一个内容区(content area),这个内容区域会有以下属性:内边距,外边距,边框。我这里又引用下其他大哥的图吧:
包含块
因为每个元素都相对于其它包含块摆放,所以包含块就是一个元素的“布局上下文”,
刀狂剑痴叶小钗