您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iProcess 课程 角色 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
     
   
 订阅
  捐助
block与position
 
作者:叶小钗 来源:博客园 发布于: 2014-12-03
1620 次浏览     评价:      
 

块级元素

大家对块级元素必定都相当熟悉了,但我们这里还是简单回顾一下下:

块级元素很霸道,会独占一行作为自己的王国,一般一个元素的width被定义为从做内边距到右内边距的距离(IE6对盒模型解释有误)。margin、padding、width、height可以确定文档布局。

多数情况下文档高宽我们不太关心,宽度一般会铺满浏览器,高度会自己延生。

水平格式化

<p style="width: 200px; padding: 10px; margin: 20px;">
刀狂剑痴叶小钗</p>

本来p元素宽度是200,但是由于padding问题宽度就变为220了,外边距再延生40,所以整个宽度就是260了,这样便隐式的增加了width的值! 但是,其右边距却不是20,因为CSS还有一个规则:正常流块级元素的margin,width,padding,border之和必须等于包含块的内容区域,所以右边距会被重置为auto。

所以我们要将一个元素居中会这样设置

<div style="margin: 0 auto;"></div>

在宽度确定的情况下,做外边距与右外边距的值会被设置为相等的值(IE6忽视之,他会将之设置为0)。

负外边距

由于margin可以被设置为负值,所以整个情况又会变得比较复杂,因为按照我们上面的规则,width便有可能超过其包含块!!!

<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
<p style=" background-color: Orange;">
刀狂剑痴叶小钗</p>
</div>

<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
<p style=" background-color: Orange; margin: 0 -20px;">
刀狂剑痴叶小钗</p>
</div>

所以,我们平时操作负边距时候,其实是增加了高宽,若是高宽确定的情况下,那边是其他几个属性被增加了,带来了元素移动的错觉。

垂直格式化

块级元素的高度默认由其内容决定,我们可以为元素显示设置高度,但是这样的话,元素框便不会自动增加了。

垂直居中

在水平情况下设置auto后,会取相同的值,当在垂直情况下,情况有所不同,margin: auto 0;这种情况下,上下外边距会被重置为0,元素框失去了外边距(定位元素有所不同)。

<div style=" margin: 20px auto; width: 300px; height: 200px; background: gray; padding: 10px; position: relative;">
<p style=" background-color: Orange; width: 130px; height: 20px; margin: auto; position: absolute; ">
刀狂剑痴叶小钗</p>
</div>

外边距合并

外边距合并的问题大家都知道,上下外边距会发生合并现象,但是有种情况会让事情变得比较复杂:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { background: #ECECEC; }
.outer { background: white; border: 1px solid #CCCCCC; width: 300px; }
.inner { margin: 10px; padding: 8px; background: none repeat scroll 0 0 #1C87D5; color: white;}
</style>
</head>
<body>
<div class="outer">
<h1 class="inner">
来个测试走</h1>
</div>
</body>
</html>

若是我们将代码做一点改变:“将外层元素border”去掉;那么。。

他这种合并方法就彻底让我傻眼了。。。。。

以上是之前的研究,很浅的介绍了一下我们的块级元素,今天我们来看看其它东西。

block与position

单说块级元素其实意义不大,前面部分可能的说的七七八八了,单说块级元素师应该用以布局的,所以position才是block的战场。

position有这么多值:

其中static便是默认值,这样的块级元素在文档流之中,我们暂时不予关注,我们来看看其它的东西。

昨天我们说到行内元素与float时,我们认为float是白蚁,而absolute是会飞的白蚁(会飞的inline-block),他们会破坏会重建,所以我们首先看看这个例子:

 <div>我在之前</div>
2 <div style="background-color: Gray; padding: 10px; margin: 10px;">
3 刀狂剑痴叶小钗是男儿</div>
4 <div>我在之后</div>

毫无疑问的占满了一行,于是我们将之布局改一下下:

<div>我在之前</div>
2 <div style="background-color: Gray; padding: 10px; margin: 10px; position: absolute;">
3 刀狂剑痴叶小钗是男儿</div>
4 <div>我在之后</div>

这里无论是absolute或者fixed,他的高与宽都被先破坏然后在重建了同一道理(XX膜破坏与修复),但是他已不食人间烟火,和我们正常留不属于同一纬度啦:

relative

relative就跟七仙女一样,他虽然可以飞,虽然是神仙,但是他在人间还有一个家,所以其文档布局还在:

绝对定位的破坏性

我们昨天看了float的破坏性,今天连着绝对定位的一起看看呗,看看谁更厉害:

① imgfloat引起父元素高度坍塌

<div style="background-color: Gray; padding: 10px; ">
<img src="1.png" style=" float: left; " /></div>

② 父元素漂浮拯救自我坍塌

<div style="background-color: Gray; padding: 10px; float: left; ">
<img src="1.png" style=" float: left; " /></div>

③ 绝对元素引起父元素升天

<div style="background-color: Gray; padding: 10px;  ">
<img src="1.png" style=" position: absolute; " /></div>

④ 父元素漂浮能否拯救子元素?

<div style="background-color: Gray; padding: 10px; float: left;  ">
<img src="1.png" style=" position: absolute; " /></div>

事实证明,他若要走,谁都拦不住啊!!

PS:此处absolute与fixed是表现一致的。

绝对定位的位置

绝对定位的元素一般情况下还是应该放到body后面的。

不要为了实现一个下拉菜单的功能而把它搞到dom(表格神马的)里面,越深的dom回流越厉害

而且仅仅为了实现一个下拉操作,可能还需要将父标签设置为relative,得不偿失啊!

如此一来,z-index引起的bug也不会出现了,以下是我用到的一点东西:

各位加了一天班累了吧?那我们来继续未完的表单验证吧

里面的提示信息就完全在body里面,不用relative限制依旧可以实现的。

然后,若是绝对定位元素不在body后面而是需要在某些dom节点中才能实现其效果的话,dom节点浅还不用说,深的话就要考虑是否有其它方案了。

优化之元素隐藏

元素隐藏我们用的最多的一定是display属性,但是他不一定是最好的实现方案。为什么这么说呢?

我这里有一个明确的体会,就是前段时间一个需求,我的广告div标签在最前面,他的背景是图片,我原想开始隐藏将图片加载完成,后面慢慢展示实现特效,但是背景在display: none的情况下根本不会加载的!!!

也许我们这里可以以此特性搞个延迟加载的其它方案实现,但是若是这个家伙可能引起回流与渲染哦!!!!

以上和这一小节的东西扯得有点远,我们还是来看看我们的隐藏吧。

我所用到以absolute做的隐藏有以下几种:

<div>
我在之前</div>
<div style="background-color: Gray; padding: 10px; margin: 10px; position: absolute; top: -9999px;">
刀狂剑痴叶小钗是男儿
</div>
<div>
我在之后</div>

<div>
我在之前</div>
<div style="background-color: Gray; padding: 10px; margin: 10px; position: absolute; visibility: hidden; ">
刀狂剑痴叶小钗是男儿
</div>
<div>
我在之后</div>

我暂时就用到了这两种方式,尤其是第二种用得较多,腾讯微博的下拉菜单也是这么干的。

两栏等高布局

两栏等高布局是非常常用的,也是面试题经常中的,我们可能这样做:

<div style="overflow: hidden;">
<div style="float: left; width: 300px; background-color: Orange; margin-bottom: -3000px;
padding-bottom: 3000px;">
边栏</div>
<div style="margin-left: 310px; background-color: Gray; margin-bottom: -3000px; padding-bottom: 3000px;">
主区域</div>
</div>

其实这个代码是不好的,因为不是内容优秀的做法,我们应该将主要内容标签提前。

这个实现原理其实是非常巧妙的:

因为padding是包括背景色的,而外层高度的计算方式我们知道是margin+padding+border+height。

所以事实上,我们这里元素其实已经延伸了3000px了,但是由于overflow: hidden,由于margin,其高度其实是没有的,我们一旦设置高度就会撑开父元素,无论怎么撑开其两边背景都是存在的,所以貌似等高,其实没有等高了。。。

然后,我们现在知道了绝对定位的元素无高度,无宽度,那么我们是不是也可以用它实现呢?

其实我们可以设置一个absolute/fxied的东东摆在中间就实现啦。。。。

<div style="position: relative; overflow: hidden; background-color: Gray;">
<div style="width: 300px; background-color: Orange; position: absolute; height: 3000px; z-index: 1;">
</div>
<div style="width: 300px; float: left; position: relative; z-index: 2; ">
边栏</div>
<div style="margin-left: 310px; background-color: Gray;">
主区域</div>
</div>

代码有点恶心,大家不必细看。。。

block与relative的故事

之前我们就说了relative是七仙女,虽然可以飞,但是编制在人间。

relative因为是七仙女就具有z-index特性,可以垂直升空。

relative因为是玉帝的女儿,权限很大,所以被他包裹着的神仙absolute都飞不出他的区域。。。

IE6与relative的爱情故事

ie7以下有个严重的bug,就是z-index需要依赖其父元素的z-index才行,否则儿子再高,但是父元素低,他依旧会被别人挡着。

这个问题我之前讨论过,这里就不管他了。

这是一个例子

之前,我们为了实现一个功能:广告得出现在屏幕的中间,我开始任务这个东西很简单便没有关注,但后面点看到了一个实现:

在body后面加了一个div,而且这个div有一个属性:

<div style=" position: relative;"></div>

然后用这个div包裹着了所有其它标签。

我一看其实有点傻了的。因为这将影响很大,最严重的情况是页面布局全部坏了!

这里我就想给我们的前端规范加上一条:相对定位一点要最小的影响。

这样做是有道理也有原因的,是想其中若是出现其他定位元素,岂不是会发现悲剧。

一个形象的例子,relative要对其下的布局元素负责,我们运用了此元素,就得负责下面所有的布局元素的展示,一个考虑不到就要悲剧。

结语

今天我们一起学习了块级元素的东东,后面点继续学习CSS与bootstrap吧。各位端午节快乐。

   
1620 次浏览  评价: 差  订阅 捐助
 
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
 
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
 
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
 

十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   


设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南


东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...   
 
 
 
 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号