• margin
• border
• padding
• content

margin是外邊距，控制盒子的顯示位置相對于他的上一級

left、top控制自身，right、bottom影響兄弟

• 寬度:border-width
• 顏色:border-color
• 透明度:transparent
• 樣式:border-style:常用的樣式none:沒有邊框solid:實線dashed虛線dotted點或者方框根據(jù)瀏覽器不同樣式有有點區(qū)別
• 透明度:顏色里面的用rgb顏色第四個參數(shù)來控制來控制

content是寬x高，作為內(nèi)容或子標簽的顯示區(qū)域

padding與邊框之間的距離

box-shadow: x軸偏移 y軸偏移 虛化程度 陰影寬度 陰影顏色

• 盒模型:margin、padding協(xié)調(diào)操作，能用padding盡量用padding，再考慮用margin
• 父子級頂端產(chǎn)生距離，建議使用padding
• margin、padding的參數(shù)auto自動獲取留白區(qū)域適用根據(jù)留白地方居中使用

float

1.子集浮動參照父級寬度2.子集浮動不再撐開父級高度3.父級高度需要自己處理，否則會影響兄弟布局，采用清浮動處理

after與before是偽類

他們與CSS選擇器直接用:連接

after元素出現(xiàn)后

before元素出現(xiàn)前

父級清浮動，就是在自己寬度是否確定下，都能保證父級的高度剛剛好包裹子集

需要左右排列的block采用浮動布局，且父級一定要清浮動

方法一:

方法二:

.浮動標簽下一個要顯示的標簽(會受到他浮動影響的):before {    content: '';    display: block;    clear: both;}

? 1）display：none | block 不可以做動畫? 2）opacity: 0 | 1 可以做動畫? 3）width：0 | height: 0 可以做動畫

transition: 動畫時間(.5s) 延遲時間(.1s) 動畫屬性(all) 運動曲線(ease)