字体的样式
设置字体颜色，使用color来设置文字的颜色
设置文字的大小，浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同
通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体
该样式可以同时指定多个字体，多个字体之间使用“,”分开
当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有，再尝试下一个
浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用
在开发中，如果字体太奇怪，用的人太少了，尽量不要使用，有可能用户的电脑没有，就不能达到想要的效果
字体的分类
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
可以将字体设置为这些大的分类，浏览器会自动选择指定的字体，并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体
字体的其它样式
font-style可以用来设置文字的斜体
可选值：
normal 默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique效果是一样的
一般我们只会使用italic
font-weight可以用来设置文本的加粗效果
可选值：
normal 默认值，文字正常显示
bold 文字加粗显示
该样式也可以指定100-900之间的9个值
但是由于用户的计算机往往没有这么多级别的字体，所以200有可能比100粗，但也有可能是一样的
font-variant可以用来设置小型大写字母
可选值：
normal 默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：将所有的字母都以大写形式显示，但是小写字母的小型大写，要比大写字母小一些
在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式
可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值
但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能
行间距
行间距=行高-字体大小
用line-height来表示行间距
注意：行高和字体大小的单位要是有就一定要写上，不然差的可就多了，没有就不用了
垂直居中
把line-height设置成和它的上一级一样的大小的时候，就会垂直居中
这种方式还适用于单行文本，不适用于多行文本
常用于导航
在字体大小的后面画斜线就可以写行高
不写属性表示使用浏览器的默认值
文本样式
text-transform样式用于将元素中的字母全都变成大写
大写：text-transform:uppercase
小写：text-tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none
这种样式只对英文有用
文本的修饰
text-decoration属性，用来给文本添加各 种修饰
通过它可以为文本的上方、下方 或者中间添加线条
可选值：
underline表示一条下划线
overline表示一条上划线
line-through表示一条中划线（删除线）
none表示默认值
none还可以去掉超链接的下划线，用
a{
text-decoration:none
}
来表示
字母间距和单词间距
letter-spacing用来设置字符之间的间距
word-spacing用来设置单词之间的间距
这两个属性都可以直接指定一个长度或百分数作为值
正数代表的是增加距离，而负数代表减少距离
对齐文本
text-align用于设置文本的对齐方式。
可选值：left：左对齐，right：右对齐，justify：两边对齐，center：居中对齐
首行缩进
text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一 行生效。
所有浏览器都支持 text-indent 属性
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"
定义：text-indent 属性规定文本块中首行文本的缩进
注释：允许使用负值，如果使用负值，那么首行会被缩进到左边
注意：在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值
文章缩进两格
{
font-size：1px
text-indent：2em
}
来表示
盒模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里
一个盒子我们会分成几个部分：内容区(content)；内边距(padding)；边框(border)；外边距(margin)
内容区
内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的
如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的
通过width和height两个属性可以设置内容区的大 小
width和height属性只适用于块元素
内边距
内边距指的就是元素内容区与边框以内的空间
默认情况下width和height不包含padding的大小
使用padding属性来设置元素的内边距
例如：
padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距
padding:10px20px 30px;
分别指定上、左右、下四个方向的内边距
padding:10px 20px;
分别指定上下、左右四个方向的内边距
padding:10px;
同时指定上左右下四个方向的内边距
同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距
边框
可以在元素周围创建边框，边框是元素可见框的最外部
可以使用border属性来设置盒子的边框：border:1pxred solid;
上边的样式分别指定了边框的宽度、颜色和样式
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框
和padding一样，默认width和height并包括边框的宽度
边框的样式
边框可以设置多种样式：
none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（槽线）
ridge（脊线）
inset（凹边）
outset（凸边）
设置边框
设置一边的边框，比如顶部边框，可以按如下设置：
border-top-color:red; /* 设置顶部边框颜色为红色 */
border-top-width:10px; /* 设置顶部边框粗细为10px */
border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线)
dashed(虚线) dotted(点线); */
上面三句可以简写成一句：
border-top:10px solid red;
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;
外边距
外边距是元素边框与周围元素相距的空间
使用margin属性可以设置外边距
用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left
当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中
盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高
盒子的真实尺寸计算公式如下：
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：
.clearfix:before{
content: '';
display:table;
}
去掉浏览器的默认样式
*{
margin：0
padding：0
}
块元素、内联元素、内联块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：支持全部的样式；如果没有设置宽度，默认的宽度为父级宽度100%；盒子占据一行、即使设置了宽度
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
支持部分样式（不支持宽、高、margin上下、padding上下）
宽高由内容决定
盒子并在一行
代码换行，盒子之间会产生间距
子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
用line-height属性值设置垂直对齐方式
去掉内联元素之间的换行
将内联元素的父级设置font-size为0，内联元素自身再设置font-size
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
支持全部样式
如果没有设置宽高，宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
用line-height属性值设置子元素垂直对齐方式
这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化
display
我们不能为行内元素设置width、height、 margin-top和margin-bottom
我们可以通过修改display来修改元素的性质
可选值：
block：设置元素为块元素，元素以块元素显示
inline：设置元素为行内元素，元素以内联元素显示
inline-block：设置元素为行内块元素，元素以内联块元素显示
none：隐藏元素（元素将在页面中完全消失），元素隐藏且不占位置
visibility
visibility属性主要用于元素是否可见
和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然 保持，不会被其他元素覆盖
可选值：
visible：可见的
hidden：隐藏的
overflow
当相关标签里面的内容超出了样式的宽度 和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子
可以通过overflow来控制内容溢出的情况
可选值：
visible：默认值，内容不会被修剪，会呈现在元素框之外
scroll：添加滚动条，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto：根据需要添加滚动条，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
hidden：隐藏超出盒子的内容，内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清 除margin-top塌陷的功能
