前端开发之CSS基本布局(三) — 行内元素布局

Author : luckyGirl

相对于块级元素的布局,行内元素的布局就稍显复杂,首先行内元素又分为非替换元素与替换元素,这2类元素在内联内容方面的处理稍有不同,以下会进行分别讨论.在进行详细描述前,首先来回顾一些行布局的基本术语和概念:

  • 匿名文本: 指未包含在行内元素中的字符串
    <p>Welcome back, <em>Lily</em>!</p>
    “Welcome back,””!”都是匿名文本
  • em框: 不同于相对单位”em”,它是指在字体中定义,也称为字符框,在CSS中,font-size确定了em框的高度
  • 内容区: 对于替换元素指元素的固有高度再加上有可能的外边距,边框和内边距
    对于非替换元素指元素中各字符的em框串在一起构成的框
  • 行间距: 是font-size值与line-height值之差,行间距只应用与非替换元素
  • 行内框: 通过向内容区增加行间距来描述, 对于非替换元素,元素行内框高度等于line-height值,对于替换元素,元素行内框的高度等于内容区的高度
  • 行框: 指包含该行中出现的行内框的最高点和最低点的最小框

在熟悉了以上基本概念后来让我们分别看一下非替换元素与替换元素是如何布局的:

行内非替换元素
对于行内非替换元素的布局,接下来由最简单的布局入手,然后通过逐一添加各种属性来分析其布局规律
1. 建立框: <span style=”font-size:15px;”>inline element</span> 

2. 考虑line-height,以及它与font-size值之差,行内框就是内容区加上行间距
<span style=”font-size:15px;line-height:21px”>inline element</span>

<p style=”font-size:12x;line-height:15px;padding:0;margin:0;”> <span style=”background:#ccc;”>The page you are viewing <em style=”font-size:30px;background-color:lightCoral;”>right now</em> exists to show off what can be accomplished with pure CSS1, and that’s all. </span> </p>
 

3. 管理line-height
line-height默认值为normal,不同的用户代理计算值可能不同,通常是字体大小的1.2倍,即行框高度大于给定元素的font-size值.line-height值的确定主要分为以下几种情况

a) 从父元素继承
body{font-size:10px;}
div{line-height:1em;}
p{font-size:18px;} <div><p>The page you are viewing right now exists to show off what can be accomplished with pure CSS1, and that’s all. </p> </div>

b) 使用缩放因子
body{font-size:10px;}
div{line-height:1;}
p{font-size:18px;} <div> <p>The page you are viewing right now exists to show off what can be accomplished with pure CSS1, and that’s all. </p> </div>


4. 垂直对齐

基本文本行

  • baseline: 将元素基线与父元素的基线对齐
  • top: 将元素行内框的顶端与包含元素的行框顶端对齐
  • bottom: 将元素行内框的底端与包含元素的行框底端对齐
  • text-top: 将元素行内框的顶端与父元素内容区的顶端对齐
  • text-bottom: 将元素行内框的地段与父元素内容区的底端对齐
  • middle: 将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐
  • super: 将元素的内容区和行内框上移,上移距离依用户代理不同而不同
  • sub: 将元素的内容区和行内框下移,下移距离依用户代理不同而不同

5. 增加border/padding属性
对于行内非替换元素,可这样理解,它就象一条很长带子,当出现换行时,就是将带子截断,拿到下一行,因此出现边框时出现了以下的样子


但当border比较大时,不会影响内容区和行框的高度,


增加一定的padding,不会影响内容区和行框的高度

6. 增加外边距属性,上下外边距对行高没有影响, 上下外边距对行内非替换元素是没有视觉效果的

行内替换元素
替换元素的行内框是内容,外边距,边框和内边距之和
1. 替换元素可以增加行框的高度,但不影响line-height

2. 行内替换元素增加内边距,边框和外边距也会增大行内框

3. 负的下外边距使行内替换元素向下拉

行内元素布局小结

  • 行内元素的背景应用与内容区及所有内边距
  • 行内元素的边框要包围内容区及所有内边距和边框
  • 非替换元素的内边距,边框和外边距对行内元素或其生成的框没有垂直效果,即它们不会影响元素行内框的高度
  • 替换元素的外边距和边框会影响该元素行内框的高度
  • 行内框在行中根据其vertical-align属性值垂直对齐

主要参考书目: <<CSS权威指南(第三版)>>

转载请标明来源,谢谢!

http://www.yuuuuc.me/?p=526

standard

Have your say