盒子模型

1.行高（http://css.doyoe.com/properties/text/line-height.htm）
什么是行高？
答：一行文字实际占用的高度。
取值方式：PX，百分比。
百分比：按照默认的字体大小取值。

特殊用法：
要让一行文字垂直居中，可以将行高设置为盒子高。（多行文字失效）
行高，字号一般都是偶数。
（谷歌浏览器最小可``以设置12px，默认是16px）

 div{
      height: 100px;
    }
    p{
      line-height: 100px;
    }

2.字号字体（http://css.doyoe.com/properties/font/font.htm）
网页，中文主要使用的字体：微软雅黑，宋体，黑体。英文：Arial，Consolas。英文在前，中文在后。
常用字体英文输入：
微软雅黑：Microsoft Yahei
宋体：SimSun
黑体：SimHei
font-weight： 指定文本字体的粗细
取值方式：数字，单词
数字：100-900；
单词：lighter normal,bold,bolder
font后面可以跟字号，字体，行高，加粗… （必须写的两个值 字号 字体）
字体大小
取值：单词，em，px，百分比

3.段落 基线
设置文本居中方式
text-align: left;

首行文本缩进 em px 百分比
text-indent: 2em

文本修饰 none，正常，默认值。underline:下划线。 overline:上划线。 line-through:中划线。

单词间间距： 中文无效。
word-spacing: 数值+px

单个字母间的间距
letter-spacing: 数值+px

大小写转换
text-transform: lowercase;

基线对齐
vertical-align: bottom;

4.盒子模型
标准盒模型
什么叫盒子？
一个元素在页面中真实占据的位置。
五个部分：内容的宽，内容的高，内边距，边框，外边距。

宽：width px；
高：height px；
定义的内容的宽和高。

padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。

5. padding内边距 （http://css.doyoe.com/properties/dimension/padding.htm）
padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。

可以给单边设置内边距:
padding-left: 50px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 60px;

四值法：
单值：上下左右。
双值：上下 左右。
三值：上 左右 下
四值：上 右 下 左 顺时针。

5.border边框（http://css.doyoe.com/properties/backgrounds/border.htm）
定义元素边框的外观特性
三要素写法：
宽度，样式，颜色
也可以 可以给单边设置边框
border-left:
border-top:
border-right:
border-bottom:
利用边框做一个倒三角
1.设置边框，然后将内容宽高设置为0
2.取消底部边框。
3.将左右边框的颜色改为white。（透明色）

 div{
      width: 0px;
      height: 0px;
      border: 20px solid white;
      border-bottom: none;
      border-top-color: green;
    }

6.margin外边距（http://css.doyoe.com/properties/dimension/margin.htm）
外边距两个盒子之间的距离。
1.属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边。
2.外延边距始终透明，即不可见也无法设置背景等任何样式。
3.某些相邻的margin会发生合并，我们称之为margin折叠：

7.补充
7.1技巧

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

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

7.2清除默认样式

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

我们可以使用：

*{
      margin: 0;
      padding: 0;
}

7.3高度

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

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

7.4溢出内容隐藏

overflow: hidden;

7.5外边距塌陷

垂直方向上相邻的两个盒子，如果都有外边距，则外边距相交的地方会出现外边距重合现象，也叫作外边距塌陷。

取值：margin相遇的部分，并不是两个margin值的和，而是为最大值。

如果两个margin值为负数，取值为绝对值最大的。

如果一正一负，结果为两者之和。

7.6居中办法

文字居中

水平居中：

text-align:center

垂直居中：

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

盒子居中

水平居中：

margin: 0 auto;

垂直居中

给盒子添加一个上下一样的padding。

7.7父子盒模型

真实的宽：内容的宽+左padding+左border+右padding+右border

真实的高：内容的高+上padding+下padding+上border+下border

子盒子的宽度若不设置默认为父盒子的内容的宽。

若设置了边框和内边距，父盒子的内容宽减去边框和内边距的大小，剩下的就是子盒子的宽度。