CSS的盒模型

CSS盒模型

什么是块级元素盒模型?

盒模型(box model),是W3C规定一个浏览器如何渲染、显示一个块级元素的方式,块级元素按照box-sizing的属性不同通常分为 conten-box 和 border-box

块级元素盒模型

典型标签 div

1.content-box

content-box.png
  • width = 内容区宽度

  • 此时元素在网页内容中实际占据空间的大小是:

    • 实际占据宽度=width+左padding+右padding+左border+右border

    • 实际占据高度=height+上padding+下padding+上border+下border

2.border-box (下图右侧)

dis.png
  • width = 内容区宽度 + border + padding

  • 此时元素在网页内容中实际占据空间的大小是:

    • 宽度 = width 高度 = height

    • 内容区宽尺寸=width-左border-右border-左padding-右padding

    • 内容区高尺寸=height-上border-下border-上padding-下padding

行内元素盒模型

典型标签 span

什么是行内盒模型?

行内盒模型(英语:inline box moldel),是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则

hangnei.png
  • 内容区:由font-size决定大小

  • 文本基线(baseline)的位置由该字体中的X的小写字母的底线决定

  • css中的单位1ex =该文字中小写字母x的高度

行内盒模型的 line-height

行间距指的是上下两行文字内容区之间的间距

而行高(line-height)指的是上下两行文字的文本基线之间的最小间距

line-heihgt 取值分为两类

  1. px,直接定义固定值

  2. 倍数,一当前字体大小为基数设置倍数,比如line-height:1.5,那么实际行高的值就为当前font-size * 1.5 px

替换元素对文本行框高度的影响

hangkuang.png

默认情况下替换元素底部会与行内文字的文本基线对齐,想要改变对齐方式则要设置 vertical-align 属性 文本垂直对齐方式

  • baseline 文本基线对齐 默认值

  • middle 中线对齐

  • top 顶部对齐

  • bottom 底部对齐

单行不同文字大小、行高对行内盒模型的影响

  1. 先确定最高的行内盒模型,并算出该行内盒模型的文本基线位置,接着将其他行内盒模型的基线与之对齐

  2. 行框的最终高度,由行内最高的那个行内盒模型决定

推荐阅读更多精彩内容