css的基礎知識sharing

時間 2019-12-05

標籤 css 基礎知識 sharing 欄目 CSS 简体版

原文原文鏈接

Html標籤分類（補充）

塊級元素：元素本身獨佔一行 ,能夠設置寬度和高度若是兩個塊級元素嵌套，子元素若沒有設置寬度，那麼元素的寬度與父元素同樣（p div h ul li）
行內元素: 全部元素都在一行顯示，行內元素的寬度就是其內容的寬度（因此沒辦法設置居中）不能直接設置寬和高(span a strong)
行內塊元素：全部元素在一行顯示，能夠設置寬和高(img input) 模式的轉換: display: block; [以塊級元素顯示] display: inline-block; [以行內塊顯示方式顯示] dispaly: inline; [以行內部元素的方式顯示]

CSS中的定位簡介

定位經常使用的有四種，包括靜態定位、絕對定位、相對定位、固定定位。css

靜態定位（position: static）：若設置靜態定位，則顯示方式爲標準流的顯示方式。前端
絕對定位(position: absolute)： ①若是一個單獨的元素，設置絕對定位，那麼元素，以瀏覽器左上角爲基準設置定位。 ②若是一個元素的父元素，沒有設置定位，則該元素以瀏覽器左上角爲準設置定位。 ③若是一個元素的父元素，設置定位（除了靜態定位之外）那麼子元素，會以父元素左上角爲準設置定位。絕對定位的特色：①設置絕對定位的盒子會脫離標準流。 ②絕對定位能夠實現模式轉換。 ③絕對定位的元素不佔位置。用完定位的元素，仍然可使用盒模型。css3
相對定位(position: relative)：若是一個元素設置了相對定位，那麼該元素只會參照本身的位置設置定位（與父元素是否認位無關）相對定位的特色：①元素設置了相對定位，該元素沒有脫標，仍佔原來的位置。 ②不能實現模式轉換c++
固定定位(position: fixed)：若是設置固定定位的元素，只會看瀏覽器的左上角但是區域進行定位。固定定位的特色：①設置固定定位的元素會脫標（不佔位置） ②能夠實現模式轉換web

層級（z-index）

定位，不得不說層級關係。 z-index的值越大，層級就越高。瀏覽器

使用層級的必要條件：①只有定位的元素纔有，層級關係，她的值只能是整數
層級的特色：①定位的盒子的層級會高於標準的盒子 ②若是兩個定位的盒子在一塊兒顯示，那麼後面的定位的盒子會壓着前面定位的盒子，後來者居上 ③若是兩個子元素的父元素都設置了定位，那麼首先要看兩個父元素的值。

居中的方式：app

對於脫標的盒子 ① 首先子元素走父盒子寬度的一半 ② 再往回走子元素本身寬度的通常

例如： position:  absolute;
      left:  50%;
      margin-left:  -150px;(假設子盒子的寬度是300)
複製代碼

CSS3 2D轉換（簡介transition和animation）

2D平面上的移動、旋轉、縮放、斜切框架

移動： transform: translate(x軸, y軸) 分開來寫： transform: translatex(); transform: translateY() 參數：能夠是px 也能夠是百分比目的：(實現居中) 咱們能夠經過盒子的絕對定位配合transform：translate（-50%，-50%）實現一個沒有寬度高度的盒子水平垂直居中 ,若是沒有寬度的話，盒子最大的寬只能達到父盒子的一半

/*內容垂直水平居中*/
.content-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
/*內容垂直居中*/
.content-vertical-center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
/*內容水平居中*/
.content-horizontal-center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
複製代碼

旋轉： transform: rotate(xxdeg) 方向：正值是順時針，負值是逆時針中心點：能夠控制 transform-origin:left center/ 100px 100px/ 50% 70%ide
縮放：transform: scale(); 分開來寫：transform: scaleX(); transform: scaleY(); 參數：能夠接受小數，能夠是具體的倍數中心點：能夠控制佈局
斜切： transform: skew() 中心點：能夠控制做用：(好比將長方形變成四邊形）

這些效果能夠並存的例： transform: rotate(360deg) scale(2)
過渡（transition) 它不是動畫，只是CSS由一種狀態到另一種狀態的變換過程用的地方：那個元素須要變化，就能夠給那個元素加上使用：transition: all 1s [簡寫的一種方式，涉及到的全部的屬性都會在h1s完成]
動畫（animation）性能特別好，特別是對移動端，由於它底層是c++,而其餘的定時器，因此但凡不是功能性的動畫就用css3 animation的參數：{ ①：自定義動畫名 ②：運行的時間 ③：運動的曲線 ④：延時執行的時間 ⑤：循環的次數 ⑥：是否逆序播放（默認是normal）[逆序 alternal] ⑦：播放的狀態（默認是running）[暫停是 paused] ⑧：動畫最後中止的位置 [forwards 讓動畫中止在最後一幀] }

@前綴keyframes 自定義的動畫名{
0%{
 //css語句
 }
...
100%{
//css語句
}
}

例如：
.flyIn-flyOut {
  animation: flyIn 0.3s linear forwards, flyOut 0.3s linear 3s forwards;
  -webkit-animation: flyIn 0.3s linear forwards, flyOut 0.3s linear 3s forwards;
}

@keyframes flyIn {
  0% {
    top: 2rem;
    right: 75rem;
  }
  100%{
    top: 2rem;
    right: 1rem;
  }
}

複製代碼

css的盒子陰影

box-shadow: 水平上的偏移 垂直上的偏移  羽化的大小（模糊） 陰影的尺寸  陰影的顏色  內陰影或者外陰影
box-shadow:  20px  50px  30px  red  inset
(陰影能夠簡寫可是有些值須要補0)
複製代碼

CSS3私有前綴

做用：兼容低版本的一些高級瀏覽器，或者一些特定的css3屬性須要添加私有前綴才起做用 每一條css3屬性合理來講都須要添加對應瀏覽器的前綴，以保證其兼容性
谷歌 蘋果：-webkit- 火狐：-moz- IE：-ms- o：-o- 小細節：在手機端，通常來講只須要寫一個-webkit-（針對國內的絕大部分手機端）
添加的位置：大部分都是直接添加到最前面，css2沒有的屬性都是添加在最前面的，有一些是css2就有的屬性是添加在後面的（background：-webkit-linear-gradient（））
複製代碼

css 僞元素（::before ::after）

做用：渲染一個虛擬的標籤插入到當前元素內部的前邊或者後邊，它並無真實的存放在DOM裏，默認是行內元素。例：.className::before{ content: '' ======>這個屬性不能夠省略，還能夠添加別的樣式 } 經常使用的案例：能夠代替某些標籤來完成一些ICON.好處是：不開銷DOM，可是僞元素是不存在的，JS獲取不到它，可是咱們仍然可使用利用window.getComputedStyle方法選擇到僞元素，而後利用getPropertyValue方法獲取對應的屬性的值。

CSS的常見規範以及CSS命名規範 [cascading style sheets]

CSS的特性

①層疊性：發生層疊的前提是標籤的權重同樣時，其樣式發生衝突時，最後定義的樣式會將前邊定義的樣式覆蓋掉，與樣式中類的調用的順序無關。

②繼承性：子元素的樣式會使用父元素的樣式，可是隻有發生嵌套關係的時候，纔會發生繼承，與文字相關的屬性都會被繼承

③優先級： !important > 行內樣式 > id選擇器 > 類選擇器 > 標籤選擇器
```
1.繼承的權重爲0
  2.權重會疊加（舉個小栗子： 類名+id名 > id名）
複製代碼
```
CSS的書寫方式

①外聯式寫法 link  rel="stylesheet"  type="text/css"  href=「xxxx.css」> 
      影響的範圍較廣，整個網站站點，實現告終構和樣式的徹底分離，代碼維護性高
  ②內嵌式寫法 <style  type="text/css">css代碼</style>
       影響的範圍只有當前頁面，沒有實現結構與css的徹底分離（當通常頁面中的樣式代碼會不多的時候使用）
  ③行內式寫法 <p  style="color:  red"></p>  【不推薦】
       只會影響當前的標籤樣式，徹底沒有實現結構和樣式的分離
複製代碼

命名的要求（前提）

W3C CSS2.1的 4.1.3 節中提到：標識符（包括選擇器中的元素名，類和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符編碼U+00A1及以上，再加連字號（-）和下劃線（_）；它們不能以數字，或一個連字號後跟數字爲開頭。它們還能夠包含轉義字符加任何ISO 10646字符做爲一個數字編碼。

類名可使用漢字可是不推薦，不能使用純數字或者數字開頭，不能使用特殊符號開頭，"_"這個除外【個人簡短總結】。
區分id和class

class: 一個標籤能夠同時調用多個類名，多個標籤能夠同時調用一個類樣式

id: 一個標籤只能調用一個id樣式，頁面中的每個標籤的id名稱必須惟一
CSS文件中class或id起名規則：

① 用class_name方式寫類名

② 樣式通常都用class而不用id，由於id不能夠重複，可是class卻能夠被重複使用。id的優先級比class的要高，如果寫了一個#link{color: red}，若是須要修改裏邊的樣式，都必須加上#link才能越過這個優先級。

③ id選擇器通常是配合JS使用，這樣才符合表現與行爲分離的原則。因此id能夠選擇駝峯式命名法。
margin和padding的縮寫形式代碼的量的減小也能夠有利於頁面的優化，對於margin，padding的使用也是大有文章。之內邊距padding爲例：

padding:  10px  (表示上下左右都是10px)
  padding： 10px  20px  (表示上下是10px,左右是20px)
  padding:  10px  20px  30px (表示上是10px,左右20px,下是30px)
  padding:  10px  20px  30px  40px  (表示上是10px  右是20px  下是30px  左是40px)
複製代碼

語義化標籤

語義化標籤是個很大的話題，簡單點說，語義化標籤就是讓css選擇器的命名可以反映頁面結構的功能區塊，如內容區域的class類名定義爲content，頁腳區域的class類名定義爲footer。語義化標籤的一個好處是讓網頁結構一目瞭然，另一個好處是提升網頁對一些特殊瀏覽設備的友好性。語義化標籤的一個誤區是按CSS樣式表現的結果命名。從深層層次分析，CSS的出現是讓HTML只專一於結構，實現網頁結構和樣式的分離，這也是CSS可以代替表格佈局而風靡的重要緣由。按CSS樣式表現結果命名，其實是讓HTML結構和CSS產生強耦合，是違背結構和樣式分離的。所以咱們命名的時候儘可能要以不是常常變化的事物進行命名，好比HTML的某塊區域的功能以及在頁面中顯示的位置。