行内盒模型的学习

行内盒模型的学习
1.概念：是W3C规定一个浏览器如何渲染，显示，排版文字的一整套规则
2.文本对齐方式
（1）行内盒模型的内容区由字体大小决定的
padding:左右生效，上下无效
margin:左右生效，上下无效，但是居中无效（注意）
字体：font-size，单位：em（父级的倍数增加），px
（2）文本线
基线baseline
由该字体中的X的小写字母的底线决定
（3）字体样式：font-family
可以写多种字体，目前基本的两种：
1）Serif有衬线，应用在网页正文，内容等大量文字内容区域
2）Sans Serif无衬线，多用于文章的标题，表格，宣传海报等。
（4）自定义字体：建立文件夹font，后缀名为某某名字.ttf
格式：@font-face{
font-family（自己起的字体名字）；
src：url（引入自己设置的文件路径：font）
}
直接在其他的元素引入该字体就好了
3.文本垂直水平居中
1）行高（任何元素都可以使用）：line-height
重点：当行高和高度一样时，是垂直居中的
2）文本对齐（水平）：text-align
对齐方式：居中：center，右对齐:right，左对齐:left
两端对齐：justofy
3）文本缩进：text－indent
4）文本装饰：
text-decoration:
上划线：overline
下划线：underline
删除线：line-throungh
5）垂直对齐：
文本与图片对齐
vertical-align（文本：基线默认值为：baseline）
4个值：top定线对齐
middle中线对齐
bottom底部对齐
默认值：基线对齐baseline（一般都会更改它）
ps：一定要养成设置宽高度的习惯