文本基本样式及盒模型

一、文本基本样式

1.行高:line-height

行高：即 一行文字实际占用高度，参照上图理解区分行高和行距。
取值方式：PX、百分比（按照默认/继承的字体大小取值），取值通常取偶数。
基线对齐 ：vertical-align: bottom
**特殊用法：通过将行高设置为盒子高度，可使单行文字垂直居中。
2.字号:font-size
常见取值方式
3.字体：font-family
1）取值方式：数字：100-900；单词：lighter变细，normal正常,bold加粗,bolder更粗，oblique斜体(普通) ，italic斜体( 与字体样式相关)
2） 常用字体：
微软雅黑：Microsoft Yahei
宋体：SimSun
黑体：SimHei
字号、行高、字体简写方法：font: 30px/60px "Consolas"
4.段落基本样式

二、盒模型

1.标准盒模型：
一个元素在页面中真实占据的位置，主要划分五部分：内容的宽，内容的高，padding内边距，border边框，margin外边距。

1）padding:内容和边框之间的距离,可被背景色渲染.
单边设置方法：
四值法：
2)border：边框（可更改其颜色及线条类型）
3）margin:两个盒子间的外边距（有默认样式）

4）倒三角设置方法：

2.父子盒模型
存在盒子嵌套，如下图：

**1）外边距塌陷：**垂直方向上相邻的两个盒子，如果都有外边距，则外边距相交的地方会出现外边距重合现象，也叫作外边距塌陷。
垂直方向取值法：
两margin相遇部分，取最大值，而非两个margin值的和。
如果两个margin值为负数，取值为绝对值最大的。
如果一正一负，结果为两者之和。
**水平方向取值法：**无论margin值正负，均为其和。

三、补充知识

1.技巧

假如有一个padding/border/margin 与其他的三条边不同，其他三条边一样，这个时候我们设置总体样式，再单独去设置它的样式。

border: 5px solid red; 
/* css：层叠特效 */
border-bottom: 10px dashed green;

2.清除默认样式

有一些标签会有默认的样式，比如默认的margin。

我们可以使用：

*{
      margin: 0;
      padding: 0;
}

3.盒子水平居中

前提是：盒子有宽度。

margin: 0 auto;

4.盒子高度

我们一般是不设置高度的，而是用内容去撑开盒子的高。

内容的多少不是由咱们决定的，使用自适应可以避免大片留白和内容溢出。

5.溢出内容隐藏

overflow: hidden;

6.居中方法

文字居中：

水平居中：

text-align:center

垂直居中：

• 单行文本 line-height等于盒子的高。