开发者社区> 范大脚脚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【正视CSS 03】block与position,出门在外的朋友端午节快乐

简介:
+关注继续查看
前言

一件非常重要的事情!!!很多朋友问我是不是妹子!!!

哎,想我刀狂剑痴叶小钗堂堂七尺男儿居然一而再再而三的被调戏,真是愧对中原剑圣之名,所以今后请不要再问我性别啦!

独在异乡为异客!哎,出门在外啊!今天过节,我这里牢骚几句。

今年职业规划上发生了很大的变化,前段时间失业了。毫无预料的失业带来的就是近两年的计划付诸东流,这里我就不得不思考一个问题

我现在会面临失业问题,今后可能也会,我现在年轻还无所谓,之后年纪大一点呢?工作不那么好找了呢?所以我很是惶恐啊!

因为家庭上一些原因,我从小就很敏感,缺乏安全感,而公司从来就不是有情有义的存在,创造价值你就留下,创造不出价值你就滚蛋

这是很合理的,所以我们得武装自己,以应付风云变幻的职场啊!

于是,我离开了我的家乡,离开了我亲爱的女朋友,独自一人来到外地求生存、求发展,也希望能有一页书写自己的传奇,但世事如棋、乾坤莫测,谁又能真正自诩笑尽英雄呢?

咳咳!!!!!尼玛今天端午节,老夫居然变得文艺了,就此打住,进入今天的正题吧!!!!各位,端午节快乐!

关于CSS,我一直是带着敬畏的心理对待的,因为自己搞过几年服务器端的开发,也组织做过很多小项目,所以学习js时还相对简单,但CSS就给我留下了高深莫测的印象。

后来,实习时候进入公司做的第一个单页产品,就写了不下1w行的js代码,也因此正式进入前端行业。做出来的产品还很有APP的味道呢,但是当时公司完全不重视CSS,乃至很多莫名其妙的布局问题居然无人找得到原因!!!

其中非常经典的就是,我看到一个框没有“高度”,当时跟看到一个人没有影子一样神奇!

最后那个产品做了8个月左右我就离开了,其后续也不太清楚了,但是以我现在的想法。

没有CSS熟手的支持,这个产品死路一条,当然这里说的有些严重了。

再后来,我开始切图,开始熟悉CSS,但从来都不敢像很多其他同事一样任务CSS很浅,会用就是了。

所以,我这里依旧带着敬畏的心情,来看一看CSS中的块级元素吧。

块级元素

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

块级元素很霸道,会独占一行作为自己的王国,一般一个元素的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),他们会破坏会重建,所以我们首先看看这个例子:

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


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

1 <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>
复制代码
我暂时就用到了这两种方式,尤其是第二种用得较多,腾讯微博的下拉菜单也是这么干的。



两栏等高布局

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

复制代码
1 <div style="overflow: hidden;">
2     <div style="float: left; width: 300px; background-color: Orange; margin-bottom: -3000px;
3         padding-bottom: 3000px;">
4         边栏</div>
5     <div style="margin-left: 310px; background-color: Gray; margin-bottom: -3000px; padding-bottom: 3000px;">
6         主区域</div>
7 </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吧。各位端午节快乐。




本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/archive/2013/06/10/3130632.html如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS Position(定位)
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门指定,否则所有框都在普通流中定位。 也就是说,普通流中的元素的位置由元素在 HTML 中的位置决定。
0 0
CSS3之position:sticky使用
CSS3之position:sticky使用
0 0
CSS position | 学习笔记
快速学习CSS position
0 0
Canvas+HTML+CSS+Position定位
Canvas+HTML+CSS+Position定位
0 0
web前端-CSS(display,position,overflow和浮动float)
display(显示) display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。 下面我们来看看display的属性有哪些吧。
0 0
CSS——CSS定位※ ( position )
CSS——CSS定位※ ( position )
0 0
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
0 0
CSS - Position
CSS - Position
0 0
css3新属性position: sticky 一分钟实现 导航栏悬停功能
想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如csdn网站: 那么你们都是使用什么方法实现的呢?今天我们就用css3的一个新的属性position: sticky 来实现这个功能吧,坚持看下去,就只需一分钟就能搞定。
0 0
CSS position 笔记
相对于原来的位置进行指定的偏移,但是仍然在标准文档流中,原来的位置会被保留,经常被用来作为绝对定位元素的容器块。
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载