前端學習總結——CSS

CSS（cascading style sheet）層疊樣式表

• 給文檔添加樣式：優先級：內聯樣式>內部樣式表>外部樣式表
  • 內聯樣式
  • 內部樣式表
  • 外聯樣式表

• CSS書寫順序：
  • 顯示屬性：display/position/float/clear
  • 自身屬性：width/height/margin/padding/border/background
  • 文本屬性：color/font/text-align/vertical-align/whitespace

經常使用樣式總結：

• 單行文本截斷並添加省略號：

white-space: nowrap;/* 不換行 */
overflow-x: hidden;
text-overflow：ellipsis;/* 隱藏部分加省略號 */
word-wrap: normal;

•  容器內多行文本垂直居中方法：

.container {
  display：table；/* 外層容器 */
}
.content {
  display：table-cell; /* 內層文本 */
  vertical-align：middle;
}

•  行內塊和行內元素文本對齊方式調整：

vertical-align：bottom；/* 默認 */
vertical-align：top；
vertical-align：middle；
vertical-align：10px;
vertical-align：-10px；

• 如何讓內盒子在外盒子中居中？外層盒子固定寬高，內層給100%，外層設定padding
• 給定位元素設置相對定位relative和絕對定位absolute的區別和聯繫：
  • 都是使用left/right top/bottom來設置位置
  • absolute新建一個層並把原來的位置騰出來，定位是相對於其上級定位元素（包括絕對定位和相對定位元素）的位置，若其上級都沒有定位元素，就是相對於HTML文檔
  • relative新建了一個層，可是原來的位置不給騰出來，相對於原來位置的定位
  • 通常咱們設置定位都是給父級元素一個relative，給子級元素一個absolute，這樣能夠直接設置子級相對父級元素的位置
• 清除浮動：
  
  • 塊級元素沒法識別浮動元素的位置，高度塌陷問題

 

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

 

• margin塌陷問題：子元素設置margin-top，父元素隨子元素一塊兒有了這個margin值，而不是子元素相對於父元素在其上增長margin；
  
  • 讓父級元素觸發BFC（Block Formatting Context，塊格式化上下文），下列方式會致使BFC：
    • float: right/left
    • position: absolute/fixed
    • display: inline-block; table-cell;(多行文本垂直居中)
    • flex
    • overflow: hidden/auto/scroll
  • 或者給父級元素：border-top: 1px solid transparent;

• 背景圖片屬性設置：

background-color: #fff;
background-image: url(/img/bg.png);
background-repeat：no-repeat；
background-attachment: fixed;/* fixed：背景圖片固定在視口，不滾動；scroll：默認值，背景repeat並滾動 */
background-position:center center;/* x | y； 能夠是百分數，像素值，left，right | bottom，top， */ 
background-size: 100% 100%；/* 值能夠是：百分數，像素值，另外，cover：圖片佔滿整個盒子，縮放窗口時切掉多餘的部分，圖片不變形；contain：圖片在盒子內部完整呈現，只按照原比例調整大小，但盒子不必定佔滿 */

• 網站的ico圖標設置：
  • 把後綴爲.ico的小圖標下載下來以後, 放在項目根目錄下
  • 在HTML裏, head標籤中間引入代碼: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
• 兩種盒模型：

box-sizing: content-box;/* 默認值，標準盒模型，width、height的值只包括內容，不包括邊框border、內邊距padding、外邊距margin */
box-sizing: border-box;/* 怪異盒模型，設置的width、height的值包括內容、內邊距padding和邊框，但不包括外邊距margin */

• 如何設置水平垂直居中？
  • 內聯元素水平居中：給父級添加 text-align: center
  • 內聯元素垂直居中：line-height: 20px（父級元素的高度）
  • 塊級元素水平居中：margin: 0 auto （要求塊級元素本身有設置寬度）
  • 塊級元素居中：絕對定位，設置top: 50%; left: 50%，給元素水平和垂直方向的margin值設爲自身寬或高的一半的負值
  • flex佈局（下面具體說）
• flex佈局
  • 彈性容器{ display: flex }，裏面的全部一級子元素稱爲彈性子元素；
  • 彈性盒子有橫軸、縱軸，根據橫縱軸來佈局；
  • 彈性子元素裏面的元素跟全部設置都無關；
  • 彈性子元素默認在彈性容器內一行展現；
  • 彈性容器的屬性：
    • flex-direction：row從左向右，row-reverse從右向左，column從下往上，column-reserve從上往下。解釋：子元素在容器中的排列方向，默認從左向右排列；
    • justify-content：flex-start，center，flex-end，space-between，space-around。解釋：子元素在橫軸上的對齊方式；
    • align-items：flex-start，flex-end，center，stretch，baseline。解釋：子元素在縱軸的對齊方式；
    • flex-wrap：no-wrap，wrap，wrap-reverse。子元素超過一行時的換行方式；
    • align-content：center，space-between，space-around，stretch。多行子元素行與行之間如何對齊；
  • 彈性子元素的屬性：
    • flex，能夠設置固定值：{ flex: 0, 0, 30px }；也能夠設置數字：{ flex: 1 }，其中的1,2,3,4……表明彈性元素如何分配空間，數字越大分配到的空間就越大
    • align-self：彈性元素自身在縱軸的對齊方式
       
• CSS新特性
  • transition: property duration timing-function delay; （CSS屬性名 過渡時間 過渡曲線 過渡延長時間）
  • transform
    
    • transform: rotate(30deg) 旋轉
    • transform: translate(100px, 20px) 移動
    • transform: scale(2, 1.5) 縮放　
    • transform: skew(30deg, 10deg) 扭曲
  • animation: move 1s linear;  // 定義動畫的時間 動畫的名稱 動畫的貝塞爾曲線