2020-11-09

文本样式与盒子模型

一、文本样式

1、行高：line-hight
一行文字所占的高度
取值：px；%（按照默认的大小取值）
特殊用法：可用于单行文字的垂直居中处理，把行高和文本高度设为一致，即行内元素就处于垂直居中了，只适用于单行。比如

2、段落
首行缩进：text-indent：em;px;百分比，
em:缩进的字符，px：缩进的像素，需要根据字体的字号确定，比如字号为24px,则想达到缩进两个字符的效果 则需要缩进24*2=48px 百分比也是按照字符的大小设置的

文本修饰线；text-decoration:属性值；
属性值：none：默认无 ； underline：下划线 ； overine：上划线 line-throung：中划线（删除线）

worde-spacing单词词间距仅用于英文单词
字符间距：letter-spacing
字符大小写：text-transform：apitalize（大写）；owercase（小写）

**基线对齐：**vertical-align:top（顶部对齐）bottom（底部对齐）middle（中线对齐）baseline（基线对齐）

二、盒子模型

1、概念：一个元素在页面中真实占据的位置
组成：内容宽、内容高、内边距，边框，外边距 5部分

盒子的真实宽=内容的宽+左右内边距+左右边框宽度比如

盒子的属性值写法顺序：
单值：代表上下左右同一个数值；
双值：上下 左右；
三值：上 左右 下；
四值：上下左右

如果4个值中其中一个不同 可以先设置4个值，再设置其中一个

垂直方向外边距塌陷处理
在两个盒子上下排列时 垂直方向上相邻的两个盒子，都有外边距 则外边距重合的地方会出现边距重合现象，

重合的取值：（不是两个之和而是）两个都为正值 则取最大的值，
如果两个都为负 则取绝对值最大的，
一正一负 结果为两个之和

水平方向：则是两个之和

居中处理
水平处理：
行内可以用 text-align: center
盒子则是：可以用margin：0 auto;

垂直居中：可以用（父级高度-内容高度-上下内边距-上下边框）/2 行内的可以用：盒子宽度跟行高设置一致