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)