三大特性

層疊性

沖突：就近原則

繼承性

1. text

2. front

3. line-開頭

行高繼承

body {
    //子元素為本身的1.5倍
    font: 12px/1.5
}

div {
    font: 24px
}

優(yōu)先級

如果選擇器相同

繼承性

不同選擇器

繼承（*）< 元素選擇器 < 類選擇器 < ID選擇器 < 行內(nèi)選擇器 < importance

子選擇器繼承的樣式永遠(yuǎn)為0

a默認(rèn)樣式 藍(lán)色+下劃線

權(quán)重疊加

繼承 0 0 0 0

元素選擇器 0 0 0 1

類選擇器 0 0 1 0

ID選擇器 0 1 0 0

行內(nèi)選擇器 1 0 0 0

盒子模型

Border

border: 

Content

Padding（內(nèi)邊距）

padding: 上 右 下 左

Margin（外邊距）

margin-button: 20px;
left,right,top

//水平居中,前提盒子必須有高度
margin: 0 auto

//行內(nèi)元素水平居中
//給父元素添加
text-align: center

//子元素和父元素同時(shí)具有外邊距（margin）會(huì)出現(xiàn)塌陷
//解決方案
//1.給父元素定義上邊框
border: 1px solid transparent 
//2.給父元素定義內(nèi)邊距
padding: 1px
//3.給父元素添加overflow

消去內(nèi)外邊距

*{
    padding: 0
    margin: 0
}

圓角邊框

border-radius: 10px
//正方形 -> 圓形
border-radius: 50%;
//矩形 -> 橢圓矩形
border-radisu: height/2px

陰影效果

//box-shadow: h-shadow, v-shadow, blur(影子距離）, speard（尺寸）, color, inset
box-shadow:

浮動(dòng)

上下使用標(biāo)準(zhǔn)流，左右使用浮動(dòng)

只會(huì)影響當(dāng)前的標(biāo)準(zhǔn)流，不會(huì)影響之前的標(biāo)準(zhǔn)流

特點(diǎn)

頂端對齊

自動(dòng)換行

? 父元素空間不足時(shí)自動(dòng)換行

行內(nèi)塊

? 添加了flow具有行內(nèi)塊特定

消去浮動(dòng)

父容器高度無法確定，內(nèi)容浮動(dòng)

解決：讓子孩子撐開父容器

Flex

flex布局水平分布

.container{
  display: flex;
  flex-wrapper: wrap;
}

.container > .item{
  flex: 1; -> 1 0 0%
  width: 44%; -> 水平分布兩個(gè)
  min-width: 44%
  max-width: 44%;
}

懸浮按鈕

  .second-button{
    height: 80rpx;
    width: 80rpx;
    position: fixed;
    bottom: 50rpx;
    right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
  }