常用样式及盒模型

css常用样式补充

1. 内边距：padding:_ _ _ _;上 右 下 左。使用方式与margin相同。作用就是隔开内容区和边框。
2. 边框border:粗细 样式 颜色；
   样式主要有实线（solid）、虚线（dashed）、点线(dotted)、双实线（double）。还可以分开用，例如：
   border-top、border-bottom、border-left、border-right、
   border-style、border-top-width
3. 行高line-height：将其设置为与其父级元素相同的高，文本会自动垂直居中。
4. 文本对齐text-align;属性有center、left、right、justify(两端对齐)
5. 文本缩进text-indent；
6. 文本装饰text-decoration；属性：overline(上划线)、underline(下划线)、line-through(删除线)
7. 对齐vertical-align;默认是baseline，即基线对齐。top，即顶线对齐。middle，即中线对齐。bottom，即底线对齐。在使用时，多试几次。
8. 显示类型display; 块级元素，默认为block，即从上到下排列。行内元素，默认为inline，即从左到右排列，此时设置的宽高无用。还有一种行内块级，为inline-block,此时宽高可用。当为none时，元素消失，不占空间。
9. 透明度opacity；值范围为0-1,当其中有文字时，透明度很高的话，文字也会有影响，用rgba调整透明度时，只对背景有影响。

盒模型

盒模型分为标准盒模型和怪异盒模型两类
标准盒模型就是由内向外依次加content、padding、border、margin.
怪异盒模型则是由外向内，用box-sizing属性来规定盒子以什么的大小来决定大小。
标准盒模型实际大小=content+padding+border;
怪异盒模型实际大小=content;

补充知识

空格： &nbsp
大于号： &gt
小于号： &lt

行内盒模型

一般行内盒模型只放文字或图片，对应着行内标签。其内容区由font-size决定大小，但大小是所占区域大小，而不是文字大小。其padding值、margin值左右生效，上下不生效，由文字撑开。

行内盒模型多了几条线：

1. 基线即baseline，当有一行文字时，在文字最后打一x，x的底线就是文字的基线。
2. 中线，即文字的中间线
3. 顶线，即内容区上面的线
4. 底线，即内容区下面的线

字体根据有无衬线分为两类：
5. 有衬线——Serif;字体比较纤细。
6. 无衬线——Sans Serif；字体比较粗，比如：微软雅黑

在使用font-family时，其后可以添加多个字体，以便浏览器无法识别，不兼容时，依次使用后面的字体。

如何使用程序员自定义字体

补充：字体文件的后缀为.ttf

@font-face{
font-family:为字体起的名字；
src:url(“路径”)；
}