CSS 基礎學習筆記

貓董發表於2018-11-06
CSS筆記

CSS中的優先順序

  • 原則：後解析的內容樣式會覆蓋先解析的。
    1. 同一個選擇器內，自上到下順序執行。
    2. 同一型別的選擇器，自上到下順序執行。
    3. 不同型別的選擇器的優先順序關係：精確性越高優先順序越高（*<div<class<id）
    4. 外部樣式和內部樣式：先合併再解析，同等條件下內部樣式優先順序要高於外部樣式。
    5. 內聯樣式：優先順序要高於外部樣式和內部樣式。
    6. 樣式後面加!important，可以提高優先順序到最高。

CSS中的繼承原則

  1. 只有文字文字相關的樣式才會被子元素繼承，其他不可以。
  2. 對於塊級元素，如果寬度和高度沒有設定，則寬度會由其父級元素的寬度決定，高度會有內容的高度決定。

CSS選擇器

  • 組合選擇器
    1. div, p{...}
    2. div p{...}
    3. div>p{...} 直系子元素選擇器。
    4. div+p{...} 相鄰同級元素選擇器。

CSS屬性選擇器

  1. [屬性] 有這個屬性的元素。
  2. [屬性=值]
  3. [屬性~=值]
  4. [屬性^=值] 開頭
  5. [屬性$=值] 結束

偽元素選擇器

可以理解為html文件自動新增的隱藏元素。常用的有::before,::after, ::first-letter, ::first-line等。 以before和after為例：

<p>
<!--before-->
這是一段話。
<!--after-->
</p>
複製程式碼

偽類選擇器

  • 對於連結a標籤主要有4個狀態：a:link,a:hover,a:active,a:visted.

背景操作

background-color: red;
background-image: url('');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: 100px,200px; //(也可以用%)
複製程式碼

可以按照順序簡寫為：

background: red url('') repeat-x 50%,0 fixed; //（可以預設）
複製程式碼

字型操作

1. 常用字型操作

font-family: "Microsoft YaHei", "宋體";
font-size: 30px; //預設字型大小16px，也就是1em
font-weight: bold; //lighter or normal
font-style: italic;
line-height: 60px;
複製程式碼

也可以簡寫為： font: style weight size/line-height family; //其中size和family是必選項

2. 更多字型操作

color: red;
letter-spacing: 10px; //字母間距
word-spacing: 10px;//單詞間距
direction: rtl/ltr;
text-decoration: none/line-through/overline/underline;//下劃線等等
text-align: center/left/right/justify; //對齊方式
text-indent: 60px; //縮排
text-transform: uppercase/lowercase/capitalize; //大小寫轉換
複製程式碼

用white-space/overflow/text-overflow可以做不換行，超出顯示省略號等效果

white-space: nowrap; //不換行
overflow: hidden;
text-overflow: clip/ellipsis; //clip表示直接截斷，ellipsis表示省略號
複製程式碼

圖片與文字的對齊（垂直對齊）：
vertical-align: top/center/bottom;

列表的處理

  • 列表項圓點的處理（改成圖示）：
ul{
    list-style-type: none; //可以有square，disc, cycle等樣式
}
li{
    background-image: url('');
    background-repeat: no-repeat;
    height: 50px;
    padding: 25px 50px 0; //通過調整padding來調整li內容相對於圖片的位置
}
複製程式碼

盒子模型

  • 典型的盒子模型如下：
.box{
    border: 2px solid black;
    padding: 20px; //順時針設定
    margin: 20px; //順時針設定
    background-color: yellow; //background 包括內容和padding， 不包括border和margin
}
複製程式碼
  • margin的使用過程中需要注意兩個問題：
    1. 兩個盒子平級的情況下，上下margin會自動合併，取較大值，左右margin則不會；
      如果想讓上下margin相加可以設定float:left; 或者 display: inline-block;
    2. 兩個盒子巢狀的情況下，如果父盒子沒有內容，沒有border， 沒有padding，則子盒子的margin不會生效；解決辦法就是給父盒子加上內容或者border或者padding；

佈局之浮動與清除浮動

  • float: left; 操作會使div脫離文件流, 其位置浮動在上一個元素的下面，這會產生兩個問題： 後面的元素被覆蓋， 父元素高度坍塌；為了解決這兩個問題就需要在後面的元素上清理浮動：clear: both;

  • 清理浮動可以在浮動div 的後面加上一個空的div，並在空div上面使用clear: both;但這會引入一個空div，並不是推薦的做法；
    常用的做法是利用父級的偽元素::after來清理浮動：

.container::after{
    content:'';//加上空內容；
    display: block; //after 偽元素是行級元素需要轉換成塊級元素；
    clear: both;
    }
複製程式碼
  • 正常情況下，還會出現前面盒子模型提到的由於父元素沒有內容導致子元素margin不生效的問題， 為了同時解決這兩個問題，最常用的程式碼方案如下：
.container::before, .container::after{
    content:'';
    display: table;
}
.container::after{
    clear: both;
}
複製程式碼
  • 在父級元素上加overflow:hidden;也可以清除浮動，參考連結

佈局之定位

position主要有4個值：

position: static; //預設值
position: fixed; //固定在頁面某個位置，不隨頁面滾動；常用於導航欄或者回到頂部
position: relative;//相對於父元素移動，仍然佔有位置，後面的元素不會補位上來
position: absolute;
// 與浮動類似，不再佔有位置，後面的元素會補位上來；    
//相對於非static的父級移動，（會向上查詢，直到找到非static的父級或者body；常與relative共用；）
複製程式碼

相關文章