04-css inline box model and Detailed text style

1.行内盒模型padding左右生效，上下不生效

2.行内盒模型margin左右生效，上下不生效,auto不生效

3.文字大小值
1）px
2）em
继承父元素的多少倍
4.文本四条线
1）base line 文本基线

以英文字母x小写字母的底边为准
2）中线
穿过文本中心的线
3）顶线
内容区content上面那条线

4）底线
内容区content下面那条线

5.font-family 字体样式
分为Serif（有衬线）有美感 多用于大量文字内容区
& Sans Serif（无衬线）多用于标题两大类
1）使用用户操作系统自带的字体来显示网页内容
eg.
font-family: "SimSun","Microsoft YaHei","KaiTi"serif;
写上多种字体，一般3+1，如果用户电脑里没有第一种字体，则显示第二第三种字体，都没有则解析成有/无衬线类字体
2）调用程序员自定义的字体来显示网页内容（导入&引用自定义字体）
font文件夹里面的Charley .ttf文件存放设计好的字体
eg.
<style>
导入
        @font-face {
            font-family: "Charley";
            src: url("font/Charley.ttf");
        }
引用
        a {
            font-family: "Charley";
        }
    </style>

5.行内盒模型行间距
1）line-height行高 ==> 决定文字的高度，与content无关
设置行高与元素高度一致 ==>垂直居中
line-height取值分两种：px固定值&字体大小的倍数（单纯写数值）
2）行间距=line-height - font-size   ==>两行文字内容区之间的距离

6.文本对齐（水平方向）text-align
text-align:center;     ==>水平居中
text-align:left;          ==>左对齐（默认）
text-align:right;        ==>右对齐
text-align:justify;	==>两端对齐

7.文本缩进样式 text-indent
1）2em一个字符	==>文本首行缩进2个字符
2）20px		==>文本首行缩进20px大小

8.文本装饰 text-decoration
text-decoration:overline;	==>上划线
text-decoration:underline;	==>下划线
text-decoration:line-through;	==>中划线/贯穿线/删除线
text-decoration:none;	==>去除文本装饰

9.文本图片对齐（替换元素-非文字）
垂直对齐vertical-align
vertical-align:baseline;(默认)	==>基线对齐
vertical-align:middle;	==>中线对齐
vertical-align:top;		==>顶部对齐
vertical-align;bottom;	==>底部对齐