css完整总结：第二篇（尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰）

这次对CSS中所有的语法进行一次综合性的总结，后续的文章，将侧重与JavaScript和PHP，微信开发（小程序），以及Linux运维方面。css中设计到定位，布局，尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰，书写模式，伸缩盒，装换，过渡，动画，媒体查询，伪类等等。我会集中对上述所说的方面进行详细的书写和说明，结合实例，让大家更好更快的掌握css3.0.那下面我们闲话少啥，拿起键盘就是敲.

下面的介绍，重点就是padding和margin，背景和颜色的使用，在实际的页面布局使用还是比较多的。我的github对于css的使用有专门的仓库，欢迎关注和star

github
1. 我们接着上一篇的，这一篇我们继续讲述css的知识点，这次主要学习尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰。
2. 尺寸：主要针对宽度和高度。width和height。取值的情况可以是数字，也可以是百分比。这些比较简单。其中还有min-width和min-height，max-width和max-height，主要针对尺寸的设置。
3. 外补白：margin，取值可以为数字和百分比，取值有四个，分别是top，right，bottom，left。也可以单独设置，即margin-left，margin-top，margin-bottom，margin-right。

检索或设置对象四边的外延边距。 
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 
如果只提供一个，将用于全部的四边。 
如果提供两个，第一个用于上、下，第二个用于左、右。 
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。 
外延边距始终透明。 
某些相邻的margin会发生合并，我们称之为margin折叠，这也是我们应该引起重视的。
margin折叠常规认知： 
    margin折叠只发生在块级元素上； 
    浮动元素的margin不与任何margin发生折叠； 
    设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠； 
    绝对定位元素的margin不与任何margin发生折叠； 
    根元素的margin不与其它任何margin发生折叠； 

上面提到的margin折叠，在布局的时候，很常用到。所以希望引起重视。

1. 内补白：padding的使用。取值可以为数字和百分比，和外补白一样。取值有四个，分别是top，right，bottom，left。也可以单独设置，即padding-left，padding-top，padding-bottom，padding-right。

检索或设置对象四边的内部边距。 
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。 
如果只提供一个，将用于全部的四边。 
如果提供两个，第一个用于上、下，第二个用于左、右。 
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。

上述提到的这些，内补白和外补白，实际工作中使用还是很多的。外补白主要就是让两个元素之间的距离方便调节。内补白主要就是让元素内部的元素和边框产生距离。对于外补白和内补白都是对称的设置的，这样才能让布局更美观。大家可以参考京东，天猫的布局，可以学到很多的。

这里希望大家对于盒模型重视起来，实际工作中有时会涉及到这些知识点。想了解盒模型的知识点的可以，点击这里

1. 边框知识点：主要讲述border，outline和box-shadow，border-image这三个知识点。

 border: 1px solid green;
 主要设置的三个参数，宽度，样式，颜色。
 宽度的取值是数字或者百分比都可以。
 样式的取值：
    none： 无轮廓。border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。 
    hidden： 隐藏边框。IE7及以下尚不支持 
    dotted： 点状轮廓。IE6下显示为dashed效果 
    dashed： 虚线轮廓。 
    solid： 实线轮廓 
    double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值 
    groove： 3D凹槽轮廓。 
    ridge： 3D凸槽轮廓。 
    inset： 3D凹边轮廓。 
    outset： 3D凸边轮廓。
颜色的取值：rgb，英文，hsl都可以的。
当然上述所说的三个参数，也可以单独设置，因为一个元素是包含四条边的。所以可以分别设置。

1. outline的取值和用法和border用法一样。
2. box-show主要设置阴影。这个在实际项目中，使用的还是挺频繁的。我们对这个属性好好介绍一下：取值六个参数

none： 无阴影 
<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
<color>： 设置对象的阴影的颜色。 
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影。

1. border-image：对象的边框样式使用图像来填充。这个实际中用的并不是很多。大家可以了解一下。
2. 背景的使用：background：背景更多的是背景图片的使用，颜色的设置。取值如下：我们对于每个属性进行分析一下，因为这个知识点还是比较重要的。

background-image： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像” 
background-position ： 指定对象的背景图像位置。 
background-size ： 指定对象的背景图像的尺寸大小。 
background-repeat ： 指定对象的背景图像如何铺排填充。 
background-attachment ： 指定对象的背景图像是随对象内容滚动还是固定的。 
background-origin ： 指定对象的背景图像显示的原点。 
background-clip ： 指定对象的背景图像向外裁剪的区域。 
background-color ： 指定对象的背景颜色。 

1. 颜色的使用主要就是color和opacity这两个知识点。在css中颜色的取值可以是任何，基本上主流的颜色表示方法，他都可以接受。可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent(透明)来指定color。
2. opacity主要表示透明度，取值范围为数字，值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
3. 字体：font，实际项目中，对于字体的使用，很多会使用字体图标。取值可以是：

 font-style ： 指定文本字体样式 ，取值为normal(正常)，italic(斜体)，oblique(倾斜).
 font-variant ： 指定文本是否为小型的大写字母 normal(正常)，small-caps(小型的大写字母).
 font-weight ： 指定文本字体的粗细 
    normal： 正常的字体。相当于数字值400 
    bold： 粗体。相当于数字值700。 
    bolder： 定义比继承值更重的值 
    lighter： 定义比继承值更轻的值 
    integer： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 
 font-size ： 指定文本字体尺寸 可以指定数字也可以是百分比。

 line-height ： 指定文本字体的行高 
 font-family ： 指定文本使用某个字体或字体序列，取值为：
    family-name： 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起 
 caption： 使用有标题的系统控件的文本字体（如按钮，菜单等） 
 icon： 使用图标标签的字体
 menu： 使用菜单的字体 
 message-box： 使用信息对话框的文本字体 
 small-caption： 使用小控件的字体 
 status-bar： 使用窗口状态栏的字体

字体的选用，一般整个项目会使用统一的字体样式。所以，我们一般会在项目的初期就会对于字体颜色的使用，进行设定。这个选项很重要但是也很好掌握。

1. 文本(text)：对于文本的使用，最多的就是对于布局方式text-align(多数是center)，line-height(行高)，text-indent(缩进)，字体间距(word-spacing),letter-spacing(字符间距),

在实际项目中，应用最多的就是字体文本超出隐藏或者显示为….(overflow: hidden;text-overflow:ellipsis;white-space: nowrap;一行的控制，多行也有对应的方法，大家可以自行百度)。

1. 文本修饰(text-decoration)：取值有线性,线的颜色,线的样式。下面的取值是实际中应用最多的。

none： 指定文字无装饰 
underline： 指定文字的装饰是下划线 
overline： 指定文字的装饰是上划线 
line-through： 指定文字的装饰是贯穿线 
blink： 指定文字的装饰是闪烁。

1. text-shadow的使用，这个知识点算是文本修饰中比较重要的。