css盒子佈局,浮動佈局以及顯影與簡單的動畫

08.05自我總結

一.盒子佈局

1.盒子佈局的組成

• margin
• border
• padding
• content

2.margin

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

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

3.border

• 寬度:border-width

• 顏色:border-color

• 透明度:transparent

• 樣式:border-style:

  經常使用的樣式

  • none:沒有邊框
  • solid:實線
  • dashed虛線
  • dotted點或者方框根據瀏覽器不一樣樣式有有點區別

• 透明度:顏色裏面的用rgb顏色第四個參數來控制來控制

4.content

content是寬x高，做爲內容或子標籤的顯示區域

padding與邊框之間的距離

5.盒子陰影

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

6.重點

• 盒模型:margin、padding協調操做，能用padding儘可能用padding，再考慮用margin
• 父子級頂端產生距離，建議使用padding
• margin、padding的參數auto自動獲取留白區域適用根據留白地方居中使用

二.浮動佈局

1.浮動佈局

float

1.子集浮動參照父級寬度
2.子集浮動再也不撐開父級高度
3.父級高度須要本身處理，不然會影響兄弟佈局，採用清浮動處理

2.after|before

after與before是僞類

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

after元素出現後

before元素出現前

3.清浮動

父級清浮動，就是在本身寬度是否肯定下，都能保證父級的高度剛恰好包裹子集

須要左右排列的block採用浮動佈局，且父級必定要清浮動

方法一:

.浮動的標籤:after {
    content: '';
    display: block;
    clear: both;
}

方法二:

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

三.動畫

1.顯隱

​ 1）display：none | block 不能夠作動畫
​ 2）opacity: 0 | 1 能夠作動畫
​ 3）width：0 | height: 0 能夠作動畫

2.動畫

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