前端第四课--行内盒模型
行内盒模型
**文本线：**共有四条线，作用于图片和文字的对齐，默认的对齐方式是基线。
vertical-align:baseline(基线),middle（中线）,top(顶线)，下线（bottom）;
文本基线：文本基线的位置是每一种字体中英文字母x的底线决定的。
文本底线：文本底线的位置是文本框底部的位置。
文本顶线：文本框顶部（此时图片的顶部与文本顶线对齐，其余都是底部）。
文本中线：文本中间的位置。
**行内盒模型与块级盒模型的区别：**对于行内盒模型设置其外边距margin上下是没有效果的，只有左右。内边距padding上是没有效果的，但设置padding-bottom文字不会自动垂直居中。
字体：
自定义字体：@font-face{
font-family:“文件名称”；
src:url(文件名.ttf/字体连接)；
}
设置字体font-family：Tahoma(大河马)，Helvetica,Arial,Simun(宋体）；
后面可加多个字体，用户使用时会在导入的字体文件中挨个寻找并使用改字体，或者在本地中寻找。
font-size：1em/1px;
em：是父级的字体大小，随父级变化而变化；px:是直接的改变字体大小；
字体样式：目前的字体设计领域，字体大致分为两大类
1：Serif（有衬线），多用于网页正文，内容等大量文字内容区域
2：Sans Serif（无衬线），多用于文章的标题，表格，宣传海报等一些要求文字醒目的领域
文文本行高：(文字自动居中，行高的高度大于字体像素，line-height-font-size=行间距，两个文本的行间距叠加)；
line-height:100px;
line-height:200%;(这里设置的行高是文字大小的百分比)；
文字缩进：
text-indent:28px(若文字的大小事14px,实现缩进两个文字字符)
text-indent：2em(指的是缩进两个文字大小，更方便)
文本对齐格式：(未设置时是默认左对齐)
居中：text-align:center;
右对齐：text-align:rignt;
两端对齐：text-align:justify;(文字较多时才会拉扯开实现两端对齐)
文本装饰：
下划线：text-decoration:underline;
上划线：text-decoration:overline;
贯穿线：text-decoration:line-through;
清除a标签的下划线{text-decoration:none;};
字体放粗：font-weight:700;(还可以通过单词加粗bolder,bold)；
设置文字的鼠标样式：cursor:pointer;/url(链接)，default;(鼠标放置在文字上时的样式)；
**去掉标签
盒子和文字的关系：
当盒子未设置height时不会显示盒子，未设置width时默认为网页的宽度；
盒子大小未设置时：里面的文字优先占满行（网页的width）盒子的高度是所有文字放进后确定的。
若盒子的大小以设置：则文字会从左上角开始直到占满，多于文字会溢出。
在块级标签里面的文字是在盒子的左上角位置，要想将文字居中，则可以设置文字的line-height等于盒子的height。（文字的上边框是紧挨盒子的)。
出。
在块级标签里面的文字是在盒子的左上角位置，要想将文字居中，则可以设置文字的line-height等于盒子的height。（文字的上边框是紧挨盒子的)。