CSS盒子模型概述

height:30px;  高度
width:30px;   寬度
content:      內容
padding:      內邊距
border:       邊框
margin:       外邊距

示例.png

CSS內邊距

內邊距在content外面，在邊框內部
padding:            設置所有邊距
padding-bottom:     設置底邊距
padding-left:       設置左邊距
padding-right:      設置右邊距
padding-top:        設置上邊距

CSS邊框：

border-Style:  10個不同的非繼承樣式，包括none
邊框的單邊樣式：
    border-top-style
    border-left-style
    border-right-style
    border-bottom-style
邊框的寬度：
    border-width
邊框單邊的寬度：
    border-top-width
    border-left-width
    border-right-width
    border-bottom-width
邊框的顏色：
    border-color
邊框單邊的顏色：
    border-top-color
    border-left-color
    border-right-color
    border-bottom-color
CSS3邊框：
    border-radius:  圓角邊框
    box-shadow:     邊框陰影
    border-image:   邊框圖片

CSS外邊距

外邊距是圍繞在內容邊框的區(qū)域，默認為透明區(qū)域，外邊距接受任何長度單位、百分數值;
外邊距默認是合并的，相鄰的兩個盒子，外邊距都為100，則兩者之間的間距不是200而是合并為100，
若一個盒子外邊距是50另一個是100，則合并會以大的那個為準，為100
margin          設置所有邊距
margin-bottom   設置底邊距
margin-left     設置左邊距
margin-right    設置右邊距
margin-top      設置上邊距
margin:0px auto; 表示上下間距為0，左右自適應

CSS定位：

主要是改變元素在頁面上的位置，
普通流：元素按照其在HTML中的位置順序決定排布的過程
浮動：
絕對布局：不在頁面中占有位置，浮在窗口上
靜態(tài)布局：在靜態(tài)布局中設置偏移量是不起作用的
固定布局： 固定在窗口的某個位置上，不隨頁面滾動而滾動
CSS定位屬性：
    position:       定位：static靜態(tài)、relative相對、absolute絕對、fixed固定;先設置該值，再設置以下的屬性
    top:            元素向上的偏移量
    left:           元素向左的偏移量
    right:          元素向右的偏移量
    bottom:         元素向下的偏移量
    overflow:       設置元素溢出其區(qū)域發(fā)生的事情
    clip:           設置元素顯示的形狀
    vertical-align: 設置元素垂直對齊方式
    z-index:        設置元素的堆疊順序，值越大，顯示在

CSS浮動：

float:none      元素不浮動
float:inherit   元素從父級繼承浮動屬性
float:left      元素向左浮動
float:right     元素向右浮動
clear:left      去掉元素向左的浮動
clear:right     去掉元素向右的浮動
clear:both      左右兩側均去掉浮動
clear:inherit   從父級繼承來clear的值