CSS 屬性

尺寸

　　width　　  設置寬度

　　height　　設置高度

ps:

　　塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。

字體屬性 

字體樣式

 

文字字體

設置字體名稱，取字體名稱，若是字體名稱中出現了空格或中文，必須加引號；多個字體名稱之間使用,隔開，用於設置備用字體

按照從第一個開始識別,直到可以識別到爲止,識別到後後面的再也不繼續

body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
 font-size: 14px;
}

字重(粗細)

　　font-weight用來設置字體的字重（粗細）。

normal 　　　　標準粗細 (默認)
bold    　　　 粗體
bolder    　　 更粗
lighter　　    更細
inherit 　　　　繼承父元素字體的粗細值

　　100~900 設置具體粗細，400等同於normal，而700等同於bold

p {
font-weight: bold;
}　　

p {
font-weight: 500;
}　

文本顏色

格式:

　　　　十六進制值 - 如: ＃FF0000

　　　　一個RGB值 - 如: RGB(255,0,0)

　　　　顏色的名稱 - 如: red

　　　　rgba(255,0,0,0.3)，第四個值指定了色彩的透明度/不透明度，範圍爲0.0~1.0

p {
 color:RGB(255,0,0);
}

文字裝飾

　　text-decoration 給文字添加特殊效果。

• 　　　　none 　　　　   定義標準的文本。(默認)
• 　　　　underline 　　    定義文本下的一條線。
• 　　　　overline 　　      定義文本上的一條線。
• 　　　　line-through 　　定義穿過文本下的一條線。
• 　　　　inherit 　　　  　繼承父元素的text-decoration屬性的值。

經常使用的爲去掉a標籤默認的自劃線

a {
text-decoration: none;
}

字體屬性簡寫

p {
　　font:style weight size/line-height family;
}

段落屬性

水平對齊設置

　　text-align 屬性規定元素中的文本的水平對齊方式。

• 　　　　left 　　    左邊對齊 默認值
• 　　　　right 　　  右對齊
• 　　　　center 　   居中對齊
• 　　　　justify 　　兩端對齊

垂直居中

默認在垂直方向對齊方式爲 靠近上方

設置等於行高便可居中

 /* 文本垂直居中調行高 */
 /* 一行文本在文本中始終是垂直居中 能夠手動將行高調整爲與元素高度一致 */
 line-height: 50px;

文本

首行縮進

將段落的第一行縮進 32像素

p {
text-indent: 32px;
}

背景屬性

background-color:背景顏色
background-image:url('11.jpg'); 背景圖片連接

background-repeat:repeat; 默認兩個方向重複平鋪
background-repeat:repeat-x; x軸平鋪
background-repeat:repeat-y; y軸平鋪
background-repeat:no-repeat; 不重複

background-position:400px 200px 調整背景的位置（距左。距右）
background-position: center:center; 背景居中

簡寫：
background: url('11.jpg') no-repeat center;

背景位置

background-position:x y;

取值

像素值

設置背景圖片在元素座標系中的顯示位置，默認從（0,0）點，左上角顯示，超出元素尺寸部分不可見

方位值

• 水平：left / center / right
• 垂直: top / center / bottom

注意：缺省某個方向，默認爲center

百分比

• 0% 0% ：左上角
• 50% 50%：居中
• 100% 100% 右下角

應用

精靈圖技術

爲了減小網頁請求，一般將一組圖標拼在一張圖片上，

一次請求所有獲得，藉助於background-position調整圖標顯示

背景屬性簡寫

背景圖片的尺寸單獨設置

background:color url() repeat position;

邊框屬性

 屬性

border-width　　寬度

border-style　　 風格

　　none 　　　   無邊框。
　　dotted    　  點狀虛線邊框。
　　dashed    　　矩形虛線邊框。
　　solid    　　 實線邊框。

border-color　　 顏色

border-radius　 用這個屬性能實現圓角邊框的效果。
　　　　　　　　　將border-radius設置爲長或高的 50% 便可獲得一個圓形，可用於圓形頭像展現

示例

#i1 {
border-width: 2px;
border-style: solid;
border-color: red;
}

支持簡寫方式

#i1 {
 border: 2px solid red;
}

表格屬性

邊框間距

border-spacing:h v;

兩個值分別表明水平和垂直方向上的邊框距離，一個值表示統一設置水平和垂直方向的距離。

只能邊框分離狀態下設置邊距

邊框合併

border-collapse:separate/collapse;

默認邊框分離，能夠設置collapse合併。

顯示屬性

用於控制HTML元素的顯示效果。

display

 屬性

display:"none"    　　　　HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。

display:"block"    　　　　默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。

display:"inline"    　　　　按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。

display:"inline-block"    　使元素同時具備行內元素和塊級元素的特色。

display:"none"與 visibility:hidden 的區別：

　　visibility:hidden: 隱藏某個元素，隱藏的元素仍需佔用與未隱藏以前同樣的空間。會影響佈局。

　　display:none: 隱藏某個元素，隱藏的元素不會佔用任何空間。不影響佈局

cursor

設置鼠標在元素上的顯示形狀

• default 箭頭形狀（按鈕，圖片）
• pointer 手指形狀（超連接）
• text 文本信息，顯示爲「I」

opacity

定義透明效果 0~1 , 設置元素總體半透明, 包含元素自身和全部後代元素

CSS盒子

概念 

　　margin: 用於控制元素與元素之間的距離；

　　　　margin的最基本用途就是控制元素周圍空間的間隔，

　　　　從視覺角度上達到相互隔開的目的。

　　padding: 用於控制內容與邊框之間的距離；

　　Border(邊框): 圍繞在內邊距和內容外的邊框。

　　Content(內容): 盒子的內容，顯示文本和圖像。

margin外邊距

.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}

推薦使用簡寫：

　　順序：上右下左

.margin-test {
margin: 5px 10px 15px 20px;
}

　　常見的居中方式:

.mycenter {
 margin: 0 auto;
 }

外邊距合併

1. 垂直方向

　　1) 子元素的 margin-top 做用於父元素上
　　　　解決：

　　　　　　1.爲父元素設置頂部透明邊框

　　　　　　2.爲父元素添加padding-top:0.1px;

　　2) 垂直方向上元素同時設置上下的外邊距，發生外邊距合併，取較大的值

2. 水平方向

　　行內元素對盒模型的相關屬性不徹底支持，不能設置寬高，不能添加上下邊距
　　水平方向上的外邊距會疊加顯示

具備默認外邊距的元素

body,h1,h2,h3,h4,h5,h6,p,ul,ol{
    margin:0;
}

padding內填充

.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}

推薦使用簡寫：

　　順序：上右下左

.padding-test {
padding: 5px 10px 15px 20px;
}

補充padding的經常使用簡寫方式：

　　提供一個，用於四邊；

　　提供兩個，第一個用於上－下，第二個用於左－右；

　　若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；

　　提供四個參數值，將按上－右－下－左的順序做用於四邊；

具備默認內邊距的元素

body,h1,h2,h3,h4,h5,h6,p,ul,ol{
    margin:0;
    padding:0;
    list-style:none;
}

元素尺寸計算

屬性　　box-sizing

取值

1. content-box 默認值

　　width/height 設置內容框的尺寸，元素最終在文檔中的實際尺寸由盒模型先關屬性值累加獲得

2. border-box 按鈕的默認計算方式

　　width/height 設置包含邊框在內的區域大小，內容框的尺寸會隨着邊框和內邊距的設置，自動調整

盒陰影

box-shadow 

取值

• offsetX
• offsetY
• blur (spread)
• color;

座標系

不論是元素仍是窗口均可以構建座標系，一概以左上角爲原點(0,0),向右向下爲X軸和Y軸的正方向

float 

概念

在 CSS 中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。

特色

水平浮動

浮動的框( 注意是有框的 ! )只能基於當前位置向左或向右移動

直到它的外邊緣 碰到包含框 或 另外一個浮動框 的邊框爲止,  垂直方向是不受影響的

實例1

如圖 藍色200寬 紫色400寬, 在 500範圍內的粉色框中.

紫色 不論向左浮動仍是向右都沒辦法在 500範圍內放下 天然會只能在當前行進行調整

可是哪怕你把 500 設置成 800, 已經有位置放得下了. 依舊是不會垂直方向調整

實例2

如圖正常排版, 而後藍色設置左邊浮動 紫色設置左浮動 那麼就會垂直變化

浮動元素之間是沒法重疊的.所以至關於對於全部浮動元素會再次排版,

位置在前的 藍色會靠前, 而紫色緊隨其後

 若是藍色左浮, 紫色右浮就彼此不受影響, 由於都脫流, 因此都向上到最前

 

脫離文檔流

因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣

其餘的標準流元素會無視浮動元素向上向前對齊

如圖 正常來講入上圖這樣的排版, 若是將紫色設置成向左浮動.

就會變成這樣. 由於紫色不佔位. 因此灰色上位 

文字環繞

圖文排版的時候. 圖片設置浮動會讓後面文本元素向前佔位圍繞浮動元素

如圖排版顯示以下 p標籤做爲塊級獨佔一行 , div色塊獨佔. 此時將 色塊設置浮動,

正常狀況來講應該是 色塊脫離文檔. 所以文字在左上方開始顯示. 和色塊重疊致使一部分文字沒法顯示

這樣很不友好.所以對於圖文排版存在一個優化機制 讓文字繞開重疊在其後顯示造成環繞.以下圖所示

ps:

　　此狀況適用於 input 或者是 image 也會造成存在文字環繞, 等價於 色塊

行內元素浮動

行內設置浮動屬性後會被轉換成塊級標籤, 能夠設置行高

 

浮動和行內混用

行內元素會一直向後推移讓位. 相似於環繞效果

實例

如圖 按照正常排班來講應該是 input 標籤在前, 可是由於 浮動脫流會飄在 input 上面遮擋. 

所以優化稱爲 行內元素 input 標籤日後推移讓位.從效果來講等效於圖文排版環繞效果

本質都是爲了更好的優化顯示

浮動帶來的問題

影響佈局 , 影響高度

浮動元素不佔位 , 會漂浮在標準流上方 ,  致使標準文檔流向前佔位對齊致使元素重疊, 高度出現誤差影響佈局

取值

　　left：　　向左浮動
　　right： 　向右浮動
　　none：    默認值，不浮動

clear

概念

清除浮動的反作用（父標籤塌陷問題, 排版錯位）

父標籤塌陷問題

浮動後的元素會脫離文檔流,被浮動的元素會跑出父標籤,從而破壞頁面佈局

實例

div設置邊框爲1,裏面包兩個p1和p2.p1浮動後.div會變成一條線

而p1和p2 會被放置在 div 下面而不是div內部 ,即浮動後的元素跑出了父標籤

解決方法

固定高度

　　固定高度限制死了.若是後期有更多的浮動元素快超出了限定高度就無效了

　　且 固定高度 是從視覺上解決了 浮動元素致使的排版錯位 本質上浮動依舊是脫離標準流的

僞元素清除法

　　只要子孫元素有浮動就給父標籤設置這一屬性便可,原理是浮動元素的下面添加空內容動態撐起父標籤

overflow:hidden

　　將溢出的部分消除, 會破壞子標籤的顯示, 不推薦

推薦僞元素清除法（使用較多）

.clearfix:after {   # 在元素的最下面插入一個內容
content: "";   　　 # 內容爲空
display: block;    # 展現爲整個寬度(變成塊級)
clear: both;       # 不容許浮動
}

 清除浮動示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li標籤的float示例</title>
  <style>
    /*清除瀏覽器默認外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標籤默認的下劃線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認的圓點樣式*/
      margin: 0; /*刪除列表默認的外邊距*/
      padding: 0; /*刪除列表默認的內填充*/
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓連接顯示爲塊級標籤*/
      padding: 0 15px; /*設置左右各15像素的填充*/
      color: #b0b0b0; /*設置字體顏色*/
      line-height: 40px; /*設置行高*/
    }
    /*鼠標移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">雲服務</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">優品</a></li>
  </ul>
</div>
<!-- 頂部導航欄 結束 -->
</body>
</html>

頂部導航菜單示例

overflow溢出屬性 

屬性值

visible 　　 默認值。內容不會被修剪，會呈如今元素框以外。

hidden 　   內容會被修剪，而且其他內容是不可見的。

scroll 　　  內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。

auto 　　   若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。

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

滾動條出現位置

• overflow（水平和垂直均設置）
• overflow-x（設置水平方向）
• overflow-y（設置垂直方向）

圓形頭像示例

圓形頭像示例

定位（position）

屬性值

static 　　默認值 不定位

relative    相對定位 相對於該元素的原始位置, 不會脫離文檔流

absolite    絕對定位 相對於父標籤的定位,一層一層往上直到 body, 會脫離文檔流
 
fixed    固定,以窗口爲參考點固定,不跟隨頁面滾動而滾動, 脫離文檔流

相對定義示意

第二個灰色偏移出來了. 以後的粉色堆疊位置會按照灰色以前的位置

即相對定位會保留原有的空間, 並不會脫離文檔流

絕對定位示意

#d2 {
    width: 200px;
    height: 200px;
    background-color: deepskyblue;
    position: absolute;
    left: -200px;
    top: -200px;
}

由於 灰色被定位過了所以基於灰色的坐上定點做爲 (0.0) 向右移動200 向上移動200 (距左 200, 距下 200)

能夠看到 藍色偏移後 由於脫離文檔, 因此綠色緊靠上來擠佔了原來藍色的位置

由於灰色沒有設置高度.因此也被減少了200px

 

在使用 absolite 的時候, 父標籤可只設置 position 

只設置 position, 沒設置 偏移屬性僅僅表示此標籤被定位過

不影響原標籤的任何屬性 (沒加屬性位置未變, 相對定位不脫離文檔,結構也沒變化)

可是實現了能夠內部子標籤基於此父標籤進行絕對定位

偏移屬性

• top　　距上
• left　　距左
• right　　距右
• bottom　　距下

設置爲負值 表示相反 好比 top:-100px; 表明 距下100 

返回頂部按鈕示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

返回頂部按鈕樣式示例

z-index

概念

　　設置對象的層疊順序。

　　z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，

　　z軸表明了你與電腦的距離,離你越近的頁面 z-index 越大

　　被定位後的元素，纔可以使用z-index,無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index

ps:

　　position:relative  可讓元素定位而不變換位置.雖然沒換位置,可是這個元素已是被定位過的元素了.

　　　　z-index值 沒有單位，就是一個正整數，

　　　　默認的z-index值爲 0 , 若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，

　　　　定位了元素，永遠壓住沒有定位的元素。

#i2 {
z-index: 999;
}

自定義模態框示例 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定義模態框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

自定義模態框示例

CSS 樣式不生效 報錯處理 

基本上的報錯均可以在 瀏覽器檢查模式裏面 style 裏面看到若是被劃掉會有報錯提示

CSS 屬性名寫錯

CSS 屬性值寫錯

分號, 冒號 寫錯

　　不報錯, 常常是中英文輸入問題致使

括號對不上

　　會把下面的都括起來致使報錯

解決方式

　　使用 功能豐富一點的 IDE 掌握良好的代碼規範

　　好比 pycharm 裏面的 快捷鍵就能夠自動對齊代碼

　　這樣極大程度避免以上的問題