前端學習——css(初級)

1.Css盒模型（box model）

　　web開發中，html的每一個元素都是盒子，盒子能夠裝內容（content）、能夠有填充物（padding）、有外殼（border） 和 外保護層（margin） 。下圖爲控制檯中的盒子詳解：瀏覽器的控制檯是咱們瞭解一個元素最好的一個工具，下圖能夠清晰的看出一個盒子所擁有的屬性。

     元素的實際寬高

　　　上圖可清晰的看出 元素實際的寬=border-left+padding-left+元素內容寬+padding-right+border-right

　　　　　　　　　　　 元素實際的高=border-top+padding-top+元素內容高+padding-bottom+border-bottom

        　　　　　　　　     而margin則能夠看做每個盒子之間的空隙並非盒子實際的寬高

     css3（box-sizing）

　　　box-sizing有三個值：content-box:元素的寬高值只包換元素的寬高，padding+border會影響實際寬高。

　　　　　　　　　　　　 border-box:元素的寬高包含了padding+border+content。

　　　　　　　　　　　　 inherit:從父元素繼承 box-sizing 屬性的值。

2.基本格式化-包含塊

    什麼是包含塊

      包含塊（Containing Block）是視覺格式化模型的一個重要概念，它與盒模型相似，也能夠理解爲一個矩形，而這個矩形的做用是爲它裏面包含的元素提供一個參考，元素的尺寸和位置的計算每每是由該元素所在的包含塊決定的。

      包含塊簡單說就是定位參考框，或者定位座標參考系，元素一旦定義了定位顯示（相對、絕對、固定）都具備包含塊性質，它所包含的定位元素都將以該包含塊爲座標系進行定位和調整。

   如何尋找包含塊

      根元素：

    　　   默認條件下，html元素爲包含塊，一些瀏覽器把body設爲包含塊。

    非根元素：

            一、非根元素，除非元素使用的是絕對位置，包含塊由最近的塊級祖先元素盒子的內容邊界組成。

            二、非根元素有屬性 'position:fixed'，包含塊由視口創建。
            三、非根元素有屬性 'position:absolute'，包含塊設置在最近的postion不是static的祖先元素(這裏的祖先元素能夠是塊級元素，也但是內聯元素)：

                 a、若是祖先元素是塊級元素，包含塊設爲該塊級元素的padding邊沿

                 b、若是祖先元素是內聯元素則包含塊設爲該內聯元素的內容邊沿

 

3.瞭解float的使用，以及float與position的差別

     float的使用

     　 float(浮動)的框可使元素向左或向右浮動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框  表現得就像浮動框不存在同樣。主要適用元素須要向左向右對齊的時候。

    語法

　　　float:none 不使用浮動  默認值
　　   float:left 靠左浮動
　　　float:right 靠右浮動

    float與position的差別

           嚴格意思上講float只能叫佈局，而position才叫定位。

　　   float仍會佔據其位置，position會覆蓋文檔流中的其餘元素

4.詳解position

   CSS positon：屬性規定元素的定位類型

　　這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移，同時它們能夠覆蓋頁面上的其餘元素並能夠經過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。

   值 描述

　　　absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。

　　　　   　　   元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

　　   fixed：生成固定定位的元素，相對於瀏覽器窗口進行定位。

　　　          元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

　　　relative：生成相對定位的元素，相對於其正常位置進行定位。

　　　　　　　  所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。

　　   static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

　　　inherit：規定應該從父元素繼承 position 屬性的值。

5.實現元素居中

   元素水平居中

 

{
      margin：0 auto；  
}
{
      text-align:center；
}
{
      width:200px;
      position:relative;
      left:-50%;
      margin-left:-100px;
}
{
　　display:flex;
　　justify-content:center;
   }

 

  元素垂直居中

     

{
   display: table-cell;
   vertical-align: middle;
}
{			
   height:200px;
   line-height:200px; 
}
{
   height:200px;
   position:relative;
   top:-50%;
   margin-top:-100px;
}

 

6.瞭解css3動畫

   @keyframes 規則和全部動畫屬性

   animation 屬性是一個簡寫屬性，用於設置六個動畫屬性

 

• animation-name  規定須要綁定到選擇器的 keyframe 名稱
• animation-duration  規定完成動畫所花費的時間，以秒或毫秒計。
• animation-timing-function  規定動畫的速度曲線。

  • inear 動畫從頭至尾的速度是相同的。

  • ease 默認。動畫以低速開始，而後加快，在結束前變慢。

  • ease-in 動畫以低速開始。
  • ease-out 動畫以低速結束。ease-in-out 動畫以低速開始和結束

  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中本身的值，可能的值是從 0 到 1 的數值。

• animation-delay  規定在動畫開始以前的延遲。
• animation-iteration-count  規定動畫應該播放的次數。
• animation-direction  規定是否應該輪流反向播放動畫。

  • normal 默認值。動畫應該正常播放。

  • alternate 動畫應該輪流反向播放。

 transform

   rotate
      設置元素順時針旋轉的角度，用法是：
         transform: rotate(x);
         參數x必須是以deg結尾的角度數或0，可爲負數表示反向。
   scale
  　　 設置元素放大或縮小的倍數，用法包括：
　　　　transform: scale(a); 元素x和y方向均縮放a倍
　　　　transform: scale(a, b); 元素x方向縮放a倍，y方向縮放b倍
　　　　transform: scaleX(a); 元素x方向縮放a倍，y方向不變
　　　　transform: scaleY(b); 元素y方向縮放b倍，x方向不變
   translate
　　 設置元素的位移，用法爲：
　　　　transform: translate(a, b); 元素x方向位移a，y方向位移b
　　　　transform: translateX(a); 元素x方向位移a，y方向不變
　　　　transform: translateY(b); 元素y方向位移b，x方向不變
　skew
　　設置元素傾斜的角度，用法包括：
　　　　transform: skew(a, b); 元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b
　　　　transform: skewX(a); 元素x方向逆時針傾斜角度a，y方向不變
　　　　transform: skewY(b); 元素y方向順時針傾斜角度b，想方向不變
　　　　以上的參數均必須是以deg結尾的角度數或0，可爲負數表示反向。
　matrix
　　設置元素的變形矩陣，由於矩陣變形過於複雜，暫略。
   origin
　　設置元素的懸掛點，用法包括：
　　　　transform-origin: a b; 元素的懸掛點爲(a, b)
　　　　元素的懸掛點即爲它旋轉和傾斜時的中心點。取值中的a、b能夠是長度值、以%結尾的百分比或者left、top、right、bottom四個值。

 transition

   transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：

• transition-property  規定設置過渡效果的 CSS 屬性的名稱。
• transition-duration  規定完成過渡效果須要多少秒或毫秒。
• transition-timing-function  規定速度效果的速度曲線。

• bezier(0.25,0.1,0.25,1)）。

• ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
• ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。

• ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。

• cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值

• transition-delay  定義過渡效果什麼時候開始。