CSS基礎強化

1. 浮動引發元素變成行內塊元素-display:inline-block

<div style="width: 400px;height: 200px;">
    <span style="float:left;width: auto;height: 100%;">
        <i style="position: absolute;float: left; width: 100px;height: 50px;">
            hello
        </i>
    </span>
</div>

效果：
div正常寬高
span{width:0;height:200px}
i{width:100px;height:50px}

全部元素通過浮動變爲行內塊元素 -- span不是塊級元素，不支持寬高,浮動後支持寬高，height:100% 便是200px。i中絕對定位，脫離文檔流，不佔父級空間，因此span的width:0;
上面解析：W3C中，float會使元素產生塊級框，能夠理解爲inline-block;可是inline-block元素之間會默認產生空白符，而flaot之間沒有。雖然float脫離了文檔流，可是div仍然是span的父元素，所以height:100%;也就是繼承了父元素div的高度200px。i設置了postion，脫離了文檔流，並不影響父元素,因此span的width:0px;

2. 顯示不全的文字 ... 表示

.ellipsis {
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

3. 關於水平對齊及垂直對齊的總結

水平居中：

1. 父元素是塊元素，子元素是行內元素。

　　對父元素使用text-again:center 來設定行內元素水平居中。

1. 父元素是塊元素，子元素是塊元素且寬度已經設定。

解法1：給子元素添加margin：0 auto；

解法2：當父元素和子元素寬度都已知的狀況下，給父元素設定padding-left或padding-rigt，或者給子元素設定margin-left或margin-right，長度爲（父元素寬度-子元素寬度）/2，給父元素和子元素設定爲box-sizing:border-box;可方便計算，不然得加上父元素和子元素的邊框寬度。

解法3：子元素相對父元素的決定定位來解決 (子元素 left:50%,margin-left 爲負 自身的一半)
解法4：利用給父元素設置flex

.father {
     display: flex;
     flex-direction: row;
     justify-content: center;
   }

垂直居中 : 設定父元素是塊級元素 且高度是已經肯定的

1. 子元素是行內元素
   給父元素或者子元素 設定line-height且其高度等於父元素的高度
2. 子元素是塊級元素且高度已經設定
   利用父元素的padding 或者 子元素的margin
3. 子元素是塊級元素且高度已經設定

.father {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

4. 關於css3過渡和轉換的總結

1. 設置要過渡的屬性

transition:width 2s, height 2s, background-color 2s, transform 2s;

1. 轉換 就是 transform
   

transform:translateX(20px);

還有不少的 屬性 如 translateY() translateZ() translate(a,b,c) csale(x,y) scaleX() scaleY() scaleZ() rotate() 等等....
更多點擊查看

5. 關於動畫的定義和使用

// 定義動畫
@keyframes myfirst  {
    from {
        background: red;
    }

    to {
        background: yellow;
    }
}
// 或者 from to 能夠換成 0% 10% 100% 實現更加精細的控制


// 使用   語法  animation: name duration timing-function delay iteration-count direction;
div {
    animation:mymove 5s infinite;  // 動畫序列名字   持續時間  循環次數
}