要用到的基本术语和概念:

  • 替换元素:用作为其他内容占位符的一个元素,或说替换元素内容的部分并非由文档内容直接表示。比如img元素它由文档本身之外的一个图像来替换,比如input元素要由一个单选按钮,复选框,文本输入框等替换。替换元素多为行级元素,行级替换元素可以像块级元素一样设置width/height/padding/margin。
  • 非替换元素:元素的内容本身包含在文档中,或说其内容由User Agent在元素本身生成的框中显示。比如一个段落p元素里的文本本身就放在该元素内。
  1. 块级非替换元素:比如div,p,blockquote 等。
  2. 行级非替换元素:比如span,i 等,注意行级非替换元素设置不了width,height,marginTop和marginBottom(原因后面解释)。

  • em框:我们常用的font-size属性与你看到的实际字体大小之间的关系由字体的设计者来确定,这种关系设置为字体本身中的一个em框,如下的蓝色方框。所以font-size的作用是为给定字体的em框提供一个大小(但并不能保证实际显示的字符就是这种大小,实际的字符可能比em框更高或更矮)

   

  • 内容区:
  1. 在非替换元素中,内容区是元素中各字符的em框串在一起构成的框。
  2. 在替换元素中,内容区是元素固有高度+可能有的内边距+边框+外边距,比如下图img如果说它有padding,border,margin的话。

  • 行间距:是font-size值和line-height值之差。这个差值其实要分为两半分别应用到内容区的顶部和底部,称为半行间距。行间距只能用于非替换元素。没错顶线和底线构成了内容区em框。

  • 行内框:这个框通过向内容区增加行间距来描述。
  1. 非替换元素行内框的高度刚好等于line-height就是上图的行高。
  2. 替换元素行内框的高度就是其内容区的高度,因为替换元素没有行间距。
  • 行框:一行中每个字符都有自己的行内框,行框就是包含该行中出现的行内框的最高点的最低点的最小框,也就是说行框的上边界位于最高行内框的上边界,行框的底边要放在最低行内框的下边界。

需要知道的画外音:

  • 内容区类似于一个块级元素的盒子模型中的内容框content。
  • 行内元素的背景应用于内容区及所有内边距,边框。
  • 行内元素的边框要包围内容区及其所有内外边距。
  • 替换元素的内外边距和边框确实会影响该元素的行内框高度,相应地也会影响行框高度。可以拿img元素想想是不是这样。
  • 非替换元素的内外边距和边框对行内元素或其生成的元素没有垂直效果(即有名的margin重叠问题)。

这样才会进入正题:

part 1:为什么行级非替换元素比如span设置margin-top和margin-bottom并没有什么卵用?

你也许会说因为span不是块级元素所以设置margin-top和margin-bottom才会没用,那我反问你为何span设置了margin-left和margin-right就起作用呢,他们都是margin一族的啊?不知道了吧,所以真正原因不是那么简单。我是从行高方面分析的,也许不完全正确,但谁又知道css的渲染机制到底内部是怎样或是w3c为什么要这样规定呢...

首先你需要知道行框(说通俗点也就是行高line-height)是怎么来的,由行内框确定的是不是,而span这个行级非替换元素的行内框就是它的内容区(也就是它的em框,说通俗点就是font-size)+上下行间距。上面说过内容区类似于一个块级元素的盒子模型中的内容框content,任你怎么设置margin-top和margin-bottom,就算你设置border-top,boder-bottom,padding-top,padding-bottom都对行高没什么卵用。对于span来说行高只和em框,上下行间距有关。如果说盒子模型不是反映元素在文档流中占据位置的必要条件,毕竟行高还反映着元素在文档流中占据的高度。如果说span元素的内容区像img替换元素这样内容区本身就包含着边框,内外间距,那确实会影响该元素的行高。

part 2:利用line-height为什么会使文本或子元素的文本垂直居中?

 <p style="height:50px;background-color:red">
<span style="background-color:yellow">
我是子元素的文本
</span>
</p>

由于没有给span元素设置padding和border,此时黄色部分就是span元素的内容区啦,span元素此时继承来的font-size为16px(chrome下默认html的font-size为16px),增加内容区上下的行间距使span元素的行高撑满父元素,文本不就居中了。父元素的content内容高度为50px,所以直接给span元素设置line-height为50px就大功告成。很多人误认为这样是把span元素居中了,其实不是的,span元素并没移动,而是它的行高增加了。

参考:部分概念内容参考自《css权威指南》,大部分为自己理解,如理解有误还望各位菊苣指出好让我迷途知返及时改正

一些常用css技巧的为什么(二)我所理解的line-height的更多相关文章

  1. 一些常用css技巧的为什么(一)我所理解的margin

    要用到的基本术语和概念: 正常流:HTML文档的文本布局,在非西方语言中流的方向可能不同.大多数元素都在正常流中,浮动或定位可以让元素脱离正常流. 块级元素:像p,div之类的元素在正常流中会在其框之 ...

  2. 常用CSS技巧资料收集

    1.重置浏览器的字体大小  重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...

  3. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  4. Css常用的技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.  具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...

  5. 常用前端布局,CSS技巧介绍

    常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...

  6. 一些常用的 CSS 技巧和知识点

    作为一名前端工程师,CSS 是必备技能之一,然而在日常开发中,总有那么些时候,面对着炫酷的效果图,脑子里的 CSS 属性却一片空白,于是只能借助搜索引擎,在一堆复杂的介绍中找到需要的内容复制粘贴.有没 ...

  7. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  8. apache环境.htaccess设置301跳转及常用.htaccess技巧整理

    apache环境.htaccess设置301跳转及常用.htaccess技巧整理 无论是Nginx,还是Apache都各自有优势,对于我们普通用户而言基本上也没有多大的区别.在虚拟主机环境中,基本上都 ...

  9. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

随机推荐

  1. linux 认证方式

  2. MySQL · 引擎特性 · InnoDB 事务锁简介

    https://yq.aliyun.com/articles/4270# zhaiwx_yinfeng 2016-02-02 19:00:43 浏览2194 评论0 mysql innodb lock ...

  3. 条件判断语句if

    一.简单if语句的格式 if 条件表达式 then 语句1 语句2 ...... fi 二.if else语句的格式 if 条件测试 then 语句块1 else 语句块2 fi 三.if elif ...

  4. QQ群信息统计

    接口一: 1:QQ群信息统计 地址:http://localhost:8080/webServices/messageSort 注意:连接地址提交的是一个txt文件,返回是一个list的json字符串 ...

  5. debian7 更换GCC版本

    最近在编译qt,之前用的是debian6,gcc版本是gcc-4.4,当使用debian7时,编译遇到了很多跟debian6不一样的问题,debian7的默认gcc使用的是gcc-4.7,可能是编译器 ...

  6. NLP自然语言处理学习笔记二(初试)

    前言: 用Python对自然语言处理有很好的库.它叫NLTK.下面就是对NLTK的第一尝试. 安装: 1.安装Pip 比较简单,得益于CentOS7自带的easy_install.执行一行命令就可以搞 ...

  7. 【AsyncTask整理 1】 AsyncTask几点要注意的地方

    问题1:AsyncTask是多线程吗? 答:是. 问题2:AsyncTask与Handler相比,谁更轻量级? 答:通过看源码,发现AsyncTask实际上就是一个线程池,而网上的说法是AsyncTa ...

  8. 【转载】经典漫画讲解HDFS原理

    分布式文件系统比较出名的有HDFS  和 GFS,其中HDFS比较简单一点.本文是一篇描述非常简洁易懂的漫画形式讲解HDFS的原理.比一般PPT要通俗易懂很多.不难得的学习资料. 1.三个部分: 客户 ...

  9. SQL语言简介

    什么是SQL语言? 是高级非过程化语言(是沟通数据库服务器和客户端的工具) 作用:存取,查询,更新和管理关系数据库系统 SQL语言分类: 1.DDL:数据定义语言 作用:定义和管理数据当中的各种对象 ...

  10. hust 1017 DLX

    #include<set> #include<cmath> #include<queue> #include<cstdio> #include<v ...