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

1元 10元 50元





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



  要资料 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
     
   
 订阅
  捐助
inline与line-height、float、absolute的故事
 
作者:叶小钗 来源:博客园 发布于: 2014-12-02
992 次浏览     评价:      
 

前言

那是一个很久之前的故事了。。。之前我一直认为CSS最重要的是布局,将一个图片很好的以网页显示出来就是王道。

但是,经过后来慢慢入门后,才发现其实布局感觉不是很难了,倒是行内元素这个家伙深藏不露。

行内元素属于那种很仁慈的主,你了解他你能做得更好,你不了解他,你的页面也不会过于乱,所以我们就容易忽略他的威力,所以今天我们一起来好好的审视一番吧。

那一年,你未娶我未嫁

在那一年我会写这样的代码:

<p>

霹雳布袋戏中最广为人知的主角之一。叶小钗一生悲情,命运多舛,亲人恩人朋友一个个离他而去,遭遇令人心酸,却也因此练就了超绝的禅定功夫。
耿直专一、守信重诺的侠客,虽为侍童出身,但不屈不挠的个性,丰富的人生阅历,让其成为中原武林不可或缺的一员,
享有<span style=" width: 200px; height: 200px; margin: 10px; padding: 10px; border: 1px solid black;">「刀狂剑痴」</span>
之盛名,披肩的白发和脸上的英雄疤,搭配沉默无言的特色,营造出该角色独特的风范。</p>

 

然后,我再做了一点demo,就以为掌握到了精华:

1 设置width无效

2 设置height无效

3 margin上下无效,左右有效

4 padding上下无效,左右有效(元素范围增大,但是元素内容无效)

以上便是我很长一段时间对行内元素的理解,只是流于表面,而且一段时间也没有什么问题的。

后来一点,各方面有所成长,我发现其实自己是忽略了一些东西的。

奇怪的现象

在上面我们发现设置高度和宽度是没有意义的,特别是高度又让我们变得更加疑惑了,请看例子:

 <div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; ">空格</div>
3 <div>我在之和</div>

以上是div中有字和div中没字时候的差别,我们发现div若是没字的话,他就“消失了”。

有了文字后,div就有高度了,所以我们认为是文字撑开了div,但是根据我们之前对行内元素的理解后,我们会慢慢怀疑不是文字撑开了高度而是line-height:

 <div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">空格</div>
3 <div>我在之和</div>

对于这张图其实我们是应该感到诧异的,因为他狠狠的给了我一巴掌(真是有图有真相啊)。

他基本就说明了,文字其实并没有撑开div,控制div高度的是line-height,但是为什么没有文字时候他就没有高度呢?

在inline box 模型中,有个line boxes,他就是文字的框(CSS里面神马东西都会有框),一行文字有一个line boxes,上面的“空格”就有一个line boxes(每个文字又会有自己的行内框inline box,这两爷们取名过于相似,容易误解),div空着的时候里面没有line boxes,但是有字后,这家伙就有line boxes了,所以他就很嚣张的“膨胀”了起来。

以上的line boxes还不是最终boss,最终boss其实是里面的行内元素,因为事实上是行内元素的inline boxes形成的行高,来一个走:

<div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">
3 <img src="1.png" />空格</div>
4 <div>我在之和</div>

看着我们伟大的图片,撑开了我们的div!

PS:其实我这里不该引入图片的,他会把情况变得更加复杂,比如你给图片设置行高什么的,你会发现。。。所以,我们重新来个例子:

<div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">
3 <span style=" ">叶小钗</span>空格</div>
4 <div>我在之和</div>

 <div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 1px; ">
3 <span style="line-height: 10px; ">叶小钗</span>空格</div>
4 <div>我在之和</div>

我们可以看到,无论图片或者后面的span,“叶小钗”将一条街的高度都拉高啦!!!

这是为什么呢??

因为行内元素“叶小钗”的inline boxes 将整个line boxes拉高了(其实叶小钗是3个inline boxes了。。。)

在这个情况下,我们再来看看文字居中的实现:

<div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 40px; ">
3 叶小钗</div>
4 <div>我在之和</div>

我们发现,这里并没有把height与line-height设置为一样,但是他还是居中了,其实是因为没有设置height的时候line-height就是他的height了,所以height有时候还是需要的。

至此,我想我们队行内元素的认识应该更加深刻了吧。。。。于是我们再拓宽一下吧。

float与行内元素

float是个坏家伙,我们之前就说过,inline boxes让line boxes拥有了高度,所以我们整个元素就有了高度,但是我们来看一下情况:

<div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3 <span style="line-height: 10px; ">叶小钗</span>空格</div>
4 <div>我在之和</div>

这张图没问题,“叶小钗”拉高了整个line boxes的高度,但是我们若是给他加上浮动呢?

<div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3 <span style="line-height: 10px; float: left; ">叶小钗</span>空格</div>
4 <div>我在之和</div>

我们来看看float这个坏家伙干了些什么事情:

① 破坏了我“叶小钗”的高度,我连高度都没了,而且脱离了文档流(呜呜,救命)

② 虽然我没有了高度,却为何要给我宽度,所以后面的字在我之前

看吧,float这家伙够坏吧,所以我们布局不要用着家伙了,因为他让叶小钗没了高度!!!!

我们为原来的代码加点效果也许又会看到一点不同的东西:

<div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3 <span style=" float: left; background-color: Gray; ">叶小钗</span>空格</div>
4 <div>我在之和</div>

这是无比诡异的一幕!我们在学习行内元素时候为什么难,因为稍不注意就会颠覆我们的想法,稍不注意又会陷入疑惑!

我们明明破坏了叶小钗的高度,为什么他还会有那么一点背景呢???

我这里就斗胆认为div有一点点默认高度了,若是不对请大神指出。若是动态指定其高度,那么背景区域会更大一点,好了,我们马上来试试:

 <div>我在之前</div>
2 <div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
3 <span style=" float: left; background-color: Gray; width: 50px; height: 50px; padding: 10px; margin: 10px; ">叶小钗</span>空格</div>
4 <div>我在之和</div>

主意来!我们叶小钗外面的元素可是span哟,按道理说span设置height时无效的,但是这里明显他是有效的!!这又是为什么呢?这个和我们元素的框又产生关系了。

PS:事实上这里“float强迫行内元素变成了inline-block元素啦”。

float这家伙的做法便是:破坏之、重建之!

反正不管怎么说,float让行内元素变成了不是inline-block的inline-block元素。

行内元素与absolute

与float一致,absolute干的坏事不必他好,有过之而无不及啊!!!也是让元素脱离文档流。

绝对定位元素会将一个元素的width和height破坏的一干二净(不对请指出)。

若是说float是白蚁的话,absolute就是会飞的白蚁,其实我们这样认为不好!

absolute虽然会破坏重建一个元素,但是他本身就是用来布局的,会飞的inline-box就是对他最好的形容。反正我的意思就是大家要好好对待他了:

<div>我在之前</div>
<div style=" border: 1px solid black; background-color: Red; line-height: 2px; ">
<span style=" position: absolute; background-color: Gray; width: 50px; height: 50px; padding: 10px; margin: 10px; "> 叶小钗</span>空格</div>
<div>我在之和</div>

absolute就是会飞的inline-block。

行内元素与vertical-algin

vertical-align这个家伙是行内元素对齐的工具:

以上一坨东西,我这里就不管了,反正大家一定记得:

<input  type="checkbox" style=" vertical-align: -2px;"/>

这段代码有什么用就好。

有时候我们会将vertical-align用于块级元素,这样是不起作用滴,他只能用于块级或者行内元素,而且会让一整块相对于基线做漂移。

我们这里这个可能用不到太深入,这边便不深究了。接下来我们以一个例子结束本文吧。

结语

中午不睡,下午崩溃!!!后面点时间我们还是一起研究bootstrap与CSS相关的东西。

   
 订阅
  捐助
 
相关文章

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

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

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

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


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


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

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