CSS基础（二）

    一、CSS格式化排版

     文字排版：
        body{font-family:"Microsoft Yahei";（字体）
            font-size:12px;color:#666；
            font-weight:bold;（粗体）
            font-style:italic;（斜体）
            text-decoration:underline;（下划线）
            text-decoration:line-through;（删除线）
            text-indent:2em;（段落前空两个文字空格）
            line-height:1.5em;（行间距倍数）
            letter-spacing:50px;（字母间距）
            word-spacing:50px;（单词间距）
            text-align:center;（块状元素位置）}


       

    二、CSS盒模型

    1. 元素分类：
            常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
            常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
            常用的内联 块状元素有：<img>、<input>
    2. 块级元素特点：
            每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
            元素的高度、宽度、行高以及顶和底边距都可设置。
            元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
            常见块级元素：<div>、 <p>、<h1>、<form>、<ul> 和 <li>
            例如：将<span>设置成块级元素：span{
                                            display: block;
                                          }
    3. 内联元素特点：
            和其他元素都在一行上；
            元素的高度、宽度及顶部和底部边距不可设置；
            元素的宽度就是它包含的文字或图片的宽度，不可改变。
            常见内联元素：<span>、<a>、<label>、 <strong> 和<em>
            例如：将<div>设置成内联元素：div{
                                            display:inline;
                                        }
    4. 添加边框：div{border:2px  solid  red;} 或者 div{ border-width:2px;border-style:solid; border-color:red;}
                 div{border-bottom:1px dotted #ccc;} //设置下边框
            border-style（边框样式）常见样式有：
                dashed（虚线）| dotted（点线）| solid（实线）。
            border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
            border-color:#888;//前面的井号不要忘掉。
            border-width（边框宽度）中的宽度也可以设置为：
                thin | medium | thick（但不是很常用），最常还是用象素（px）。
    5. 内边距： margin
       外边距： padding
    

    三、CSS布局模型：

    1、 流动模型（Flow）:
                1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
                2.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）。如：a、span、em、strong标签
    2、 浮动模型 (Float)：
                div{
                    width:200px;
                    height:200px;
                    border:2px red solid;
                    float:left;//浮动模型
                }
    3、 层模型（Layer）：        
                绝对定位(position: absolute)
                相对定位(position: relative)
                固定定位(position: fixed)

    四、CSS代码缩写：

    1. margin:10px 15px 12px 14px;
    2. p{color: #000;} 替换 p{color:#000000;}

    五、单位和值:

    1. px：像素
    2. em：就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px
    3. % ： p{font-size:12px;line-height:130%} 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）