空间破解网站,杭州网站建设前三,免费ppt模板在哪找,什么网站做的号一、absolute属性的情感化认识
我对position:absolute属性感性化的认识#xff1a;absolute是一个善良的有个性的#xff0c;我行我素、喜欢凌驾一切之上的魔鬼。这家伙#xff0c;不喜欢也算不上讨厌#xff0c;但是知道没事最好少招惹#xff0c;免有后患。
二、posit…
一、absolute属性的情感化认识
我对position:absolute属性感性化的认识absolute是一个善良的有个性的我行我素、喜欢凌驾一切之上的魔鬼。这家伙不喜欢也算不上讨厌但是知道没事最好少招惹免有后患。
二、position:absolute与float:left是近亲
先给大家讲个故事吧。曾经有两个魔鬼兄弟一个叫浮动一个叫绝对定位它们总是一起在空中飞行戏耍的。但是不幸的是有一天浮动被巨雷击中双翼折损陨落凡间好在性命还在但是翅膀不在它只能永远留在凡间与芸芸众生呆在一起。偶然一天众生发现浮动有一种能力可以让布局整齐有方向性的排列于是大肆使用其能力建房子造家园。但是浮动本质上是魔鬼其破坏性经常让房子高度塌陷而饱受众生诟病。可怜的浮动啊原本出身的意义就不是来建房子的却被众人误解与指责。浮动的兄弟绝对定位本应在天空翱翔但是为了看望其兄弟也经常去凡间看望。后来人们发现绝对定位也有布局建房子的能力也想拿来使用。但是绝对定位不同于浮动其翅膀尚在其一个不乐意就可以飞回天空。聪明而狡黠的人们发现了一个可以限制绝对定位的物体名叫相对定位。于是什么时候人们想利用绝对定位建房子就使用这个名叫相对定位的东西把他限定住。后来有一天人们忍不住心中的疑问就问绝对定位“你在天上好好的为什么没事要下来受罪呢”绝对定位长吁一口气道出了浮动就是他那可怜的弟弟的事情。“不会吧”人们很惊讶“你们样貌差异这么大跟志玲姐和凤姐之间的差异有得一拼呢”“唉”绝对定位又是一声叹气“被雷击翅膀没了还毁了容于是……”绝对定位忍不住抽泣起来。后来人们逐渐明白原来绝对定位下凡间帮着建房子都是自愿的。果然后来一部分人试着不再使用叫做相对定位的东西限制绝对定位绝对定位也没有飞向天空……未完待续
故事先说到这儿正如故事里提到的position:absolute与float:left论长相差别有志玲姐和凤姐那么大但是却是近亲细想一下也合情合理两者有两大共性包裹性破坏性。
包裹性 包裹性换种说法就是让元素inline-block化例如一个div标签默认宽度是100%显示的但是一旦被absolute属性缠上则100%默认宽度就会变成自适应内部元素的宽度。哦举个例子吧如下测试代码
CSS部分
.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }
.abs { position:absolute; }
HTML部分
div classdivimg srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /p无absolute/p
/div
div classdiv absimg srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /pabsolute后/p
/div
结果如下图所示 代码
CSS代码
.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }.abs { position:absolute; }
HTML代码
div classdivimg srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /p无absolute/p/divdiv classdiv absimg srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /pabsolute后/p/div
float也是典型的inline-block化元素这种元素的inline-block化适用于任何水平的标签。例如平时我们要让span标签支持width属性可能要设置
span { display:block; width:100px; }
但是有float:left/position:absolute撑腰的情况下display属性就是多余的可以直接回家喝茶了。
span { float:left; width:100px; }
span { position:absolute; width:100px; }
破坏性 论破坏的功力绝对定位显然比浮动更甚一筹但是人们诟病的更多的却是浮动的破坏性。这不难理解整天在耳边飞来飞去的苍蝇要比不常见的吸血牛虻讨厌。众人已经把浮动当作凡人中的一份子而对于绝对定位人们知道毕竟人家原本隶属天上能下凡间来帮忙造房子已经不错了没有必要去苛求指责人家。 浮动的破坏性在于切断line box链致使高度塌陷但由于浮动元素仍在凡间DOM tree实体是看得见摸得着的所以其占据的实体位置还是在的。而absolute绝对定位不仅让高度塌陷又由于从未深入凡间在凡间没有他的实体位置所以宽度也是塌陷的。
由于浮动身处凡间所以其造成的破坏是可以通过其他手段弥补的但是绝对定位不属于凡间其破坏无法修复因为一是孤独无人帮忙二是只有空气怎能修补。
例如下面的测试 CSS代码
.div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; }
.abs { position:absolute; }
HTML如下
div classdivimg srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /p图片无absolute/p
/div
div classdivimg classabs srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /p图片absolute后/p
/div
结果如下截图 可以看到图片应该的position:absolute属性后父标签的高宽都塌陷了连它的兄弟float都救不了。
代码
CSS代码
.div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; }.abs { position:absolute; }
HTML代码
div classdivimg srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /p图片无absolute/p/divdiv classdivimg classabs srchttp://image.zhangxinxu.com/image/study/s/s256/mm1.jpg /p图片absolute后/p/div 三、position:absolute滥用
在我看来很多网站position:absolute都有滥用的嫌疑不仅仅是position:absolute滥用其left,top属性值也滥用relative属性值滥用z-index也滥用。有的属性滥用就是单纯的多些代码而已而有些其实可以不使用的地方也使用的话会给后来的扩展和维护造成很大的麻烦的。
relative/absolute/left/top/z-index这5个关系紧密无论将哪一点都会牵扯到其他。为了避免讲述的混乱我尽量只讲某一个。例如这里只讲absolute属性。
absolute经常被一些新手拿来大肆建房子做布局也是可以理解的貌似什么时候我看过一篇文章说absolute属性的出现本来是想把页面搞得像photoshop那样一个图层一个图层覆盖似的。但是页面的发展显然与这个背道而驰毕竟页面是活的。确实像photoshop把一个个层搞出来使用absolute属性以及一定坐标值就可以定位出来了。不需要考虑什么间距啊margin啊一些IE下乱七八糟的bug啊什么的有一了百了的畅快感。尤其对于页面制作不熟悉的新手这种绝对定位布局可谓屡试不爽。
还有时候遇到有些复杂的布局项目经理又催得紧懒得再去折腾干脆直接绝对定位先把效果做出来再说。因为绝对定位毕竟有飞翔的能力例如想在黄浦江中间建个灯塔直接告知坐标飞过去灯塔一插搞定了很省事的。
看上去省事其实是自掘坟墓。所谓“本属天上人勿管凡间事”对于普通的页面布局不到万不得已不要使用absolute进行定位。
对普通的layout如果动不动就使用absolute属性我个人是比较深恶痛疾的。
首先自己是个流体布局控绝对定位这种东西显然没有流动的气质尤其拿来定位后虽然有时候在relative的庇护下也有一定的流动性。流动性布局很强调不定宽不定高活用标签自身属性顺其自然最少干预。但是由于absolute属性尤其是带有left/top值的破坏性会导致高宽塌陷于是不得已需要设定一个高度值或是足以撑开高度的值例如新浪微博导航就是绝对定位于是导航外标签必须定高否则下面的元素会上来发生重叠 其次自己是个代码控。自己是个有代码癖的人眼中是容不得可以不使用的CSS属性的。对于absolute布局为了修复其破坏造成的后遗症而花费的CSS代码开销在我看来已经超出的容忍的限制。
最后也是更重要的就是绝对定位大大降低了页面的扩展性和维护性。其在降低维护性方面的卓越表现不仅仅在于自身还在于其领导能力指引领relative与z-index制造更加混乱的页面这个后面会依次讲到。我想有经验的页面重构人员都深有体会去改之前别人写的页面出现问题的很多时候就是那些不知道为什么要绝对定位的元素这些元素就像地雷一样总以为安全放心大胆地往前走结果“砰”一声嗝屁了。覆盖重叠精确调距离修改之前的高宽参数等想想都让人吐槽。最后越改越混乱。
absolute属性本来是个好孩子可做奇兵颇有妙用。但是太多人把天上的凤凰当野鸡养把absolute过多的用于普通布局而沉浸其中不亦乐乎。
其实想想要求也不能那么高。毕竟大部分的同行都是做中小站点的一个页面寿命短短几个月说不定就要抄底重来。花功夫去折腾扩展性代码量什么的实在是对不起自己那点可怜的工资有这点闲功夫还不如去撩撩美女姐姐泡泡清纯小妹呢。所以淡定淡定
不过一些结论性的话还是要说的想重构高质量的页面少用绝对定位布局
四、鞋子是用来穿的
又是题外话。对于CSS属性如何高效地使用它们如何使页面流畅灵动又极具扩展性和可维护性呢就是该生下来该干嘛的就让他干嘛。就拿绝对定位举例absolute最大最能动的空间是在天空中不受任何限制的天空可以自由驰骋又与世隔绝不会对凡间造成任何侵扰顶多遮住点阳光。所以absolute尽量不要身陷林立的DOM中尤其是用来做普通的布局这可真是拿砍刀削指甲做着危险的活儿啊。
举个更容易理解的例子吧。我们都知道鞋子是用来穿的。但是它还有其他功能比如说攻击武器例如嫌小布什台上讲话语速太快跟不上听不懂你就可以掷出你的飞鞋提醒他降低语速。很显然虽然鞋子有做武器这个特殊功能你是不会去淘宝上买个百八十双鞋子专门用来扔人的吧absolute属性的使用一个道理。 一、常见absolute布局的替代实现方案
absolute属性配合left/top/right/bottom属性具有极强的定位性。这种功能特性是如此的明显与强烈可能会让页面重构人员很单纯的被这一特性“捕获”而产生迷失。
一板一眼的描述可能难以理解举个通俗点的例子吧 一个脸蛋不错身材超好的姑娘穿上超PP的衣服后是如此的光艳动人对于我们这类常年困居于深宅大院的光棍男来讲这种美艳是如此的迷人以至于我们的精力多集中在这沉鱼落雁的美貌上而忽略了其他一些东西例如知性善良贤惠等。很容易的我们以后一想到此女子第一反应就是“美貌”至于其他在如此美貌下已经不重要了。
此道理反映在web上就是我们极易先入为主地认为absolute的价值就是借助left/top属性来进行定位的。说句不严谨的话目前估计超过90%的普通布局中的absolute属性都是用在定位上了。恩这个回头再说这里还是看看一些常见的absolute布局如何通过使用其他属性完成同样的布局效果。既然absolute属性是拿来定位我们只要使用其他属性定位就可以了。此时自然而然想到了CSS中另外一个更加低调全能的定位属性margin下面的前两个例子都是使用margin代替absolute及相关属性。
京东商城首页标价定位 首先拿京东商城首页的一个标价样式举例见下截图 用小bug一看其code实现果然是绝对定位定位属性//zxx:小bug时我对firebug的昵称 要是我来实现就不会使用absolute属性会使用margin实现扩展性容错性更强的布局。
不管怎样先看对比实现效果您可以狠狠地点击这里absolute/margin定位布局对比demo
下图为在IE7浏览器下的上下实现方式对比截图默认 可见使用margin可以实现与absolute布局一样的效果且CSS属性使用量折半更为关键的是布局的扩展性与容错性大大增强了。
在demo页面上的底部有两个测试布局扩展性与容错性的按钮如下图第一个按钮是改变标签的宽度第二个按钮是改变父标签的position属性为static 我们点击第一个按钮改变dl父标签的宽度后结果absolute定位的标价已经和图片远离了而使用margin定位的橙红色背景标价依旧坚挺地呆在原来的位置上如下图所示 点击第二个按钮改变父标签的position属性为static后结果使用absolute绝对定位的标价没有了束缚直接跑到浏览器窗口的右下角去了而margin定位没有丝毫影响如下图所示截自Firefox3.6 从上面两个简单的测试可以看出两种实现方式见扩展性和容错性方面的差异。
下面简单讲下相关布局的实现以下是原来absolute实现的相关代码 HTML部分
dldt classp-imga href##img width130 height130 srchttp://img10.360buyimg.com/n3/834/11752677-6197-4ffa-b4c0-e66d02640bad.jpg //adiv classp-price999.00/div/dtdd classp-namea href##LG GD580 3G手机 300万像素 999返100元券/a/dd
/dl
类名为”p-price”标签核心样式如下
.p-price {position: absolute;bottom: 10px;right: 50px; ......
京东商城的实现中规中矩想这种带有覆盖效果的定位使用absolute定位估计是大部分页面重构人员的首选。但是绝对定位之“绝对”一词本身就意味着其在扩展性方面的表现受限。如果我们要求更高可以使用CSS代码量更少扩展性更强的margin布局。
其实现代码如下 首先HTML部分需要添加一层block水平的标签其实可以不用加只要让img外面的a标签block水平显示即可让标价与图片不会在一个line box中显示同时将标价外面的div标签改为inline水平元素的标签方便inline-block化于是最后的HTML代码如下
dldt classp-imga href##img width130 height130 srchttp://img10.360buyimg.com/n3/834/11752677-6197-4ffa-b4c0-e66d02640bad.jpg //adiv classnew-price-xspan classnew-price999.00/span/div/dtdd classp-namea href##LG GD580 3G手机 300万像素 999返100元券/a/dd
/dl
相关的核心的CSS代码如下
.new-price-x {margin: -28px 0 0 74px;
}
.new-price {display: inline-block;......
}
淘宝首页示例 下面再看另外一个例子就是淘宝首页的滚动播放效果使用是absolute定位通过改变top属性值实现上下的滚动切换如下图 实际上完全可以使用margin-top属性代替这里的relativeabsolutetop属性组合。
使用小bug一看demo页面的定位属性啊是margin-top如下截图所示 就效果来说margin-top与绝对定位的切换是一样的优点在于省了一点点的CSS代码量。但是相对absolute的动画切换margin-top值的改变会产生更强的回流(reflow)就性能上而言要比absolute属性低。
究竟使用哪个看您自己如何取舍了。
新浪微博示例 最后拿新浪微博页面的主导航示例。
首先来看看为什么新浪微博的主导航要使用绝对定位。我想主要原因可能是半透明的纯色背景吧。 而IE浏览器下药实现opacity效果需要使用filter滤镜然而opacity属性的半透明效果不仅会影响到当前元素所有的子元素也会跟着半透明此时如果导航内元素放在半透明化的div内部显然容易死翘翘。所以半透明背景层与导航内容层不是父子关系而是兄弟关系导航内容覆盖于半透明背景上就避免了导航内容被半透明化的危险。
而覆盖定位一般都离不开absolute属性所以新浪微博的主导航使用了绝对定位。然而这里的绝对定位使用我必须称赞一下因为很难得的这里的absolute使用主要是利用了absolute属性的破坏性高宽占据空间为0的特性而不是利用其定位性借助left/top等属性的定位。
至于这里如何利用absolute属性的破坏性实现自适应的布局不想讲。有微博的自己用小bug看看没微博的注册个。
就这里绝对定位的使用来讲除了莫名的top/right属性外还是不错的。然而问题在于这里非要使用绝对定位吗兼容性的半透明纯色效果非要用并行的两个标签错开重叠定位吗父子关系不行吗有句成语叫做“与时俱进”要是几年前可能还真得这么搞。但是现在什么绝对定位啊重叠啊计算啊什么乱七八糟的东西完全不需要。就当没有什么半透明效果写同样可以实现一样的效果。
使用opacity属性或是IE filter半透明滤镜会让子元素跟着半透明。实际上对于半透明的纯色背景有更佳的实现方法。下面是demo页面的替换实现方法的CSS代码
.newheader .menu_c {background-color: rgba(0, 0, 0, .25);filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr#40000000,endColorStr#40000000);
}
现代浏览器使用CSS3 rgba实现半透明背景色IE浏览器使用渐变滤镜实现半透明。
HTML方面原来的绝对定位的半透明div层直接删掉此时相关的relative属性等也可以一并去掉。HTML结构变得简单有层次维护也更加方便了。
关于实现兼容性的半透明背景色您可以参考我之前的“RGBA颜色与兼容性的半透明背景色”一文。所以具体使用细节等这里就不多说下图为前后两种半透明背景实现方式效果对比图 二、absolute可以一个人战斗
如果在CSS的世界中没有left/top/right/bottom属性absolute的潜力估计会挖得深得多。
我们需要意识到一个应用的position:absolute的元素其实就只是个非常普通的元素我感觉与应用了float:left的差异仅仅在于宽度的缺失。为说明此观点我做了个很简单的demo.
此demo默认如下图可以看到浮动的高度缺失造成的塌陷 点击示意的按钮后可以发现图片还是那个图片还在那个位置还是那么的安静与优雅。唯一变化的就是文字们有的跑到它的下面了宽度缺失。 由此可见absolute属性只是个很普通的属性跟float:left是个近亲。一个是陨落凡间的恶魔一个是天空中的恶魔。所以很多时候我们在普通布局中使用absolute时候只要设置position:absolute就可以了至于left/top之类的都是浮云定位什么的就当作普通元素使用margin定位一样有着刮目的表现的。
三、absolute与left/top等属性之间的关系
单纯应用了absolute属性的元素就是个普通元素跟变身前的美少女战士一样。left/top等属性是具有变身性质的东西是恶魔absolute元素的翅膀。absolute元素一旦应用了left/top等属性就具有了飞翔的能力奔向天空自由驰骋如果没有relative属性的限制其会一直飞到天空的边缘浏览器窗口并且具有非常明确的方向性。 四、body标签是absolute元素自由的天空
来首小诗调节一下吧 生命成可贵 爱情价更高。 若为自由故 两者皆可抛。
知道《美少女战士》吧知道主人公水冰月月野兔吧因为人家牛叉所以为了保护地球保护未来而战斗。知道《火影忍者》吧你说要是把鸣人就限制在火影村帮助老太太抓抓猫帮助欧巴桑照看孩子能有大成吗人家是注定要肩负起忍者世界和平的职责的。
同样的要是把绝对定位属性用在很深的DOM tree中再用relative限制住。其实就是把鸣人当作看孩子的人使用虽然用的时候觉得很好用但是实际上是埋没了绝对定位元素的才能。没有限制给予足够的自由广阔的天空才是绝对定位元素大放异彩拯救人类的舞台。
一般而言在web页面上最宽广的天空莫过于body标签所以在我看来把绝对定位元素直接放在body标签下才是王道才能最大限度的发挥绝对定位元素的才能。举个例子淘宝首页顶部小横条上的下拉。 此下拉就是使用的绝对定位但是却是深深地嵌入到DOM中的如下图 这种方法的好处在于简单对于非IE6浏览器直接使用CSS就可以实现效果了。然而将默认隐藏的绝对定位元素被relative限制在很深的DOM节点中弊处相当多首先增加了DOM的复杂度不利于维护越深的DOM元素造成了回流越强因为父标签需要relative限制增加了CSS代码的消耗量隐藏元素头部加载延迟了页面的呈现速度每个下拉几乎都要重新定位其重用性受限。
如果是我一定会把这些隐藏的绝对定位元素放在在body标签内部且最底部加载以提高页面的呈现速度甚至根本就不加载。此做法就是mtime时光网下拉导航的做法是推荐的做法。绝对元素的定位不是通过当前触发元素的relative限制而是在body大环境中直接通过触发元素的偏移值设定位置是最直接最高效的做法。
在body标签下自由驰骋这才是绝对定位元素真正应该呆的地方。真正有才华的元素应该放在更大的舞台上限制在蹩脚的角落里注定要埋没的。我之前写过一个名为”powerFloat“的万能浮动插件就是希望通过降低使用的学习成本让大家都把绝对定位元素解放到body标签下。
于是乎我们不用担心什么层级错乱的破问题不会再看到密密麻麻错乱的HTML代码。做页面重构的本来就应该是每天喝喝咖啡跟美女前台打情骂俏的工作现在却搞那么辛苦太不应该了。
absolute元素犹如有翅膀的小鸟你是把它限制在鸟笼中还是把它放飞到天空中自由的飞翔我想一切不言而喻。
