CSS盒模型
什么是块级元素盒模型？
盒模型（box model），是W3C规定一个浏览器如何渲染、显示一个块级元素的方式，块级元素按照box-sizing的属性不同通常分为 conten-box 和 border-box
块级元素盒模型
典型标签 div
1.content-box
width = 内容区宽度
-
此时元素在网页内容中实际占据空间的大小是:
实际占据宽度=width+左padding+右padding+左border+右border
实际占据高度=height+上padding+下padding+上border+下border
2.border-box (下图右侧)
width = 内容区宽度 + border + padding
-
此时元素在网页内容中实际占据空间的大小是:
宽度 = width 高度 = height
内容区宽尺寸=width-左border-右border-左padding-右padding
内容区高尺寸=height-上border-下border-上padding-下padding
行内元素盒模型
典型标签 span
什么是行内盒模型？
行内盒模型（英语：inline box moldel），是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则
内容区:由font-size决定大小
文本基线(baseline)的位置由该字体中的X的小写字母的底线决定
css中的单位1ex =该文字中小写字母x的高度
行内盒模型的 line-height
行间距指的是上下两行文字内容区之间的间距
而行高(line-height)指的是上下两行文字的文本基线之间的最小间距
line-heihgt 取值分为两类
px，直接定义固定值
倍数，一当前字体大小为基数设置倍数，比如line-height:1.5,那么实际行高的值就为当前font-size * 1.5 px
替换元素对文本行框高度的影响
默认情况下替换元素底部会与行内文字的文本基线对齐，想要改变对齐方式则要设置 vertical-align 属性 文本垂直对齐方式
baseline 文本基线对齐 默认值
middle 中线对齐
top 顶部对齐
bottom 底部对齐
单行不同文字大小、行高对行内盒模型的影响
先确定最高的行内盒模型，并算出该行内盒模型的文本基线位置，接着将其他行内盒模型的基线与之对齐
行框的最终高度，由行内最高的那个行内盒模型决定
