盒模型組成
內容、內邊距（內填充）、邊框、外邊距border:1px solid #000;
border:粗細 樣式 顏色;
border-top
border-bottom
border-left
border-right
border:none/0;border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
1個值：4條邊框
2個值： 上下 左右
3個值： 上 左右 下
4個值： 上 右 下 左 順時針方向
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
solid 實線
dashed 虛線
dotted 點線
double 雙線
border-color
border-left-color
border-right-color
border-top-color
border-bottom-color
red
16進製制的顏色
rgb和rgba（）
透明度取值0-1,0是完全透明
padding
1：設定內容和盒子之間的位置關係
2：邊框線內部都可以設定padding
3：padding會讓盒子變形，如果設定padding後想讓盒子大小不變，盒子的寬高就需要減去padding的大小
4：
單一方向的padding
padding-left
padding-right
padding-top
padding-bottom
設定多個方向的padding
1個值：4條邊框
2個值： 上下 左右
3個值： 上 左右 下
4個值： 上 右 下 左 順時針方向
5：內邊距不可以設定負值
margin
1、設定盒子與盒子之間的位置關係
2、邊框線的外部的距離都可以設定margin
3、 單一方向的margin
margin-left
margin-right
margin-top
margin-bottom
設定多個方向的margin
1個值：4條邊框
2個值： 上下 左右
3個值： 上 左右 下
4個值： 上 右 下 左 順時針方向
4、margin:0px auto;
可以讓塊元素水平居中
margin可以設定負值
margin-left：負值 （左邊移動）
正值 （右邊移動）
margin-top： 負值 （上邊移動）
正值 （下邊移動）
5、外邊距的常見bug
1、margin的重疊問題
上下兩個盒子之間的margin會重疊，誰的值大設定誰，水平不會
解決方法： 只設定乙個margin就行
2、margin-top的傳遞問題
當第乙個子元素設定margin-top的時候，margin-top會錯誤的傳遞給父元素
解決方法：
父元素border
padding
overflow:hidden
float（不推薦用浮動專門解決，可以順便解決）
子元素float
總寬度= width+左右的padding+左右的border
總高度= height+上下的padding+上下的border字型大小
font-size
瀏覽器預設的字型大小是16px
px/pt/em
em:是乙個相對的單位，先看自己的font-size值，如果自己沒有font-size值，參照父元素的font-size值
1em=16px
字型顏色
color
字型加粗
font-weight
bold 加粗
bolder 更粗
normal 取消加粗
100-900
500是常規粗細
字型傾斜
font-style
italic 設定傾斜字
oblique 字型
normal 取消傾斜
字型樣式
font-family: 字型1,字型2;
中文字型和多個英文單詞組成的字型需要加引號
font :加粗 傾斜 大小 字型;
首行縮排
text-indent：2em
可以設定負值，可以設定影藏文本的效果
文字修飾（線條的修飾）
text-decoration：
underline 下劃線
overline 上劃線
line-throuth 刪除線
none 取消修飾
字間距letter-spacing
詞間距（識別的是空格）
word-spacing
水平對齊
text-align
left 左對齊
right 右對齊
center 水平居中
justify 兩端對齊
行高line-height
1：設定多行文字的行間距
2：行高設定單行文字垂直居中
3：清除自帶的行間距
基礎 CSS盒模型
元素的外邊距 margin 邊框 border 內邊距 padding 內容 content 就構成了css盒模型。css盒模型分為ie盒模型 圖2 和w3c盒模型 圖3 其實，ie盒模型是怪異模式 quirks mode 下的盒模型，而w3c盒模型是標準模式 standards mode 下的盒模...
CSS基礎之盒模型
1.什麼是盒模型 html元素中的每個元素都被描繪成矩形盒子，也就是盛裝內容的容器，這些矩形盒子通過乙個模型來描述其 占用空間 這個模型成為 盒模型 盒模型 有外向裡分別為 marging 外邊距 padding 內邊距 border 邊框 content 內容 2.盒模型 外邊距 margin 元...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...