技術文章 » CSS基礎

CSS基礎

2020-08-10 10:46:04

一、CSS初始

1. CSS初始

  • 概念：CSS（Cascading Style Sheets），通常稱爲CSS樣式表或層疊樣式表（級聯樣式表）
  • 作用：
    • 主要用於設定HTML頁面中的文字內容（字型、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局和外觀顯示樣式
    • CSS以HTML爲基礎，提供了豐富的功能，如字型、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設定不同的樣式

2. 引入CSS樣式表（書寫位置）

2.1 行內式（內聯樣式）

  • 概念：稱行內樣式、行間樣式，是通過標籤style屬性來設定元素的樣式
  • 基本語法格式如下：
    <標籤名 style="屬性1:屬性值1; 屬性2: 屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>
  • 注意：
    • style其實就是標籤的屬性
    • 屬性和值中間是「:」
    • 多組屬性值之間用";"隔開
    • 只能控制當前的標籤和以及巢狀在其中的字標籤，造成程式碼冗餘
  • 缺點：沒有實現樣式和結構相分離

2.2 內部樣式表（內嵌樣式表）

  • 概念：稱內嵌式，是講CSS程式碼集中解除安裝HTML文件的head頭部標籤中，並且用style標籤定義
  • 基本語法格式如下：
    <head>
	<style type="text/css">
		選擇器 {
			屬性1：屬性值1；
			屬性2：屬性值2；
			屬性3：屬性值3；
		}
	</style>
</head>
  • 注意：
    • style標籤一般位於head標籤中，當然理論上它可以放在HTML文件的任何地方
    • type=「text/css」在html5中可以省略
    • 只能控制當前的頁面
  • 缺點：沒有徹底分離

2.3 外部樣式表（外鏈式）

  • 概念：稱鏈入式，是將所有的樣式放在一個或多個以.CSS爲擴充套件名的外部樣式表檔案中，通過link標籤將外部樣式表檔案鏈接到HTML文件中

  • 基本語法格式如下：

    <head>
	<link rel="stylesheet" type="text/css" href="css檔案路徑">
</head>

  • 注意：

    • link是個單標籤
    • link標籤需要放在head頭部標籤中，並且指定link標籤的三個屬性
    屬性 作用
    rel 定義當前文件與被鏈接文件之間的關係，在這裏需要指定爲「stylesheet」，表示被鏈接的文件是一個樣式表檔案
    type 定義所鏈接文件的型別，在這裏需要指定爲「text/css」，表示鏈接的外部檔案爲CSS樣式表，我們都可以省略
    href 定義所鏈接外部樣式表檔案的URL，可以是相對路徑，也可以是絕對路徑

2.4 總結

樣式表 優點 缺點 使用情況 控制範圍
行內樣式表 書寫方便 沒有實現樣式和結構相分離 較少 控制一個標籤（少）
內部樣式表 部分結構和樣式相分離 沒有徹底分離 較多 控制一個頁面（中）
外部樣式表 完全實現結構和樣式相分離 需要引入 最多，強烈推薦 控制整個站點（多）

  • 團隊約定-程式碼風格
    樣式書寫一般有兩種：

    • 一種是緊湊格式：

      .jdc{ display: block; width: 50px;}

    • 一種是展開格式（推薦）

      h3 {
	color: deeppink;
	font-size: 20px;
}

  • 團隊約定-程式碼大小寫
    樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母，屬性字串允許使用大小寫

    /* 推薦 */
h3 {
	color: pink;
}

/* 不推薦 */
H3 {
	COLOOR: PINK;
}

3. 總結CSS樣式規則

  • 具體格式如下：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ie4PSCn7-1597025809185)(file:///C:/Users/25839/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png)]

  • 總結：

    • 選擇器用於指定CSS樣式作用的HTML標籤，花括號內是對該物件設定的具體樣式
    • 屬性和屬性值以「鍵值對」的形式出現
    • 屬性是對指定的物件設定的樣式屬性，例如字型大小、文字顏色等
    • 屬性和屬性值之間用英文「:」鏈接
    • 多個「鍵值對」之間用英文「;」進行區分

二、CSS基礎選擇器

1. CSS選擇器作用

作用：找到特定的HTML頁面元素

2. CSS基礎選擇器

2.1 標籤選擇器

  • 概念：標籤選擇器（元素選擇器）是指用HTML標籤名稱作爲選擇器，按標籤名稱分類，爲頁面中其他一類標籤指定統一的CSS樣式
  • 語法：
    標籤名{屬性1：屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
  • 作用：標籤選擇器可以把某一類標籤全部選擇出來，比如所有的div標籤和所有的span標籤
  • 優點：是能快速爲頁面中同類型的標籤統一樣式
  • 缺點：不能設計差異化樣式

總結 口訣
標籤選擇器，
頁面同選起。
直接寫標籤，
全部不放棄。

2.2 類選擇器

  • 概念：類選擇器使用"."（英文點號）進行標識，後面緊跟類名
  • 語法：
    • 類名選擇器
    .類名 {
	屬性1:屬性值1;
	屬性2:屬性值2;
	屬性3:屬性值3;
}
    • 標籤
    <p class="類名"></p>
  • 優點：可以爲元素物件定義單獨或相同的樣式。可以選擇一個或者多個標籤
  • 注意：
    • 類選擇器使用"."（英文點號）進行標識，後面緊跟類名
    • 長名稱或詞組可以使用中橫線來爲選擇器命名
    • 不要純數位、中文等命名，儘量使用英文字母來標識
      命令規範：見附件（Web前端開發規範手冊）

2.3 類選擇器特殊用法-多類名

<span class="blue font100">G</span>
<span class="red font100">o</span>
<span class="byellow font100">o</span>
<span class="blue font100">g</span>
<span class="green font100">l</span>
<span class="red font100">e</span>

2.4 id選擇器

id選擇器使用#進行標識，後面緊跟id名

  • 基本語法格式如下：
    • id選擇器
    #id名 {
	屬性1:屬性值1;
	屬性2:屬性值2;
	屬性3:屬性值3;
}
    • 標籤
    <p id="id名"></p>
  • 元素的id值是唯一的，只能對應於文件中某一個具體的元素
  • 用法基本和類選擇器相同
  • id選擇器和類選擇器的區別
    • W3C標磚規定，在同一個頁面內，不允許由相同名字的id物件出現，但是允許相同名字的class
    • 類選擇器（class）好比人的名字，是可以多次重複使用的
    • id選擇器（id）好比人的身份號碼，全中國是唯一的，不得重複，只能使用一次
      id選擇器和類選擇器最大的不同在於使用次數上
  • 總結
    • 類選擇器我們在修改樣式中，用的最多
    • id選擇器一般用於頁面唯一性元素身上，經常和我們後面學習的JavaScript搭配使用

2.5 萬用字元選擇器

  • 概念：萬用字元選擇器用「」號表示，「」就是選擇所有的標籤
  • 基本語法格式如下：
* {
	屬性1:屬性值1;
	屬性2:屬性值2;
	屬性3:屬性值3;
}
  • 注意：會匹配頁面所有的元素，降低頁面響應速度，不建議隨便使用

2.6 基礎選擇器總結

選擇器 作用 缺點 使用情況 用法
標籤選擇器 可以選出所有相同的標籤，比如p 不能差異化選擇 較多 p {color: red; }
類選擇器 可以選出1個或者多個標籤 可以根據需求選擇 非常多 .nav {color: red; }
id選擇器 一次只能選擇1個標籤 只能使用一次 不推薦使用 #nav {color: red; }
萬用字元選擇器 選擇所有的標籤 選擇的太多，有部分不推薦 不推薦使用 * {color: red; }

2.7 團隊約定

  • 儘量少用通用選擇器*
  • 儘量少用ID選擇器
  • 不適用無具體語意定義的標籤選擇器div、span
/* 推薦 */
.jdc {}
li {}
p {}

/* 不推薦 */
* {}
#jdc {}
div {}

三、CSS文字文字樣式

1. font字型

1.1 font-size：大小

  • 作用：font-size屬性用於設定字號
P {
	font-size: 20px;
}

  • 單位

    • 可以使用相對長度單位，也可以使用絕對長度單位
    • 相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用推薦使用較少
    相對長度單位 說明
    em 相對於當前物件內文字的字型尺寸
    px 畫素，最常用，推薦使用
    絕對長度單位 說明
    in 英寸
    cm 釐米
    mm 毫米
    pt 點

  • 注意：

    • 我們文字大小以後，基本就用px，其他單位很少使用
    • 谷歌瀏覽器預設的文字大小爲16px
    • 但是不同瀏覽器可能預設顯示的字號大小不一致，我們儘量給一個明確值大小，不要預設大小

1.2 font-family：字型

  • 作用：font-family屬性用於設定哪一種字型
p {
	font-family: "微軟雅黑";
}
  • 網頁中常用的字型由宋體、微軟雅黑、黑體等，例如將網頁中所有段落文字的字型設定爲微軟雅黑
  • 可以同時指定多個字型，中間以逗號隔開，表示如果瀏覽器不支援第一個字型，則會嘗試下一個，直到找到合適的字型
p {
	font-family: "Arial", "Microsoft Yahei", "微軟雅黑";
}

常用技巧：

  1. 各種字型之間必須使用英文狀態下的逗號隔開
  2. 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號，當需要設定英文字型時，英文字型名必須位於中文字型名之前
  3. 如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: 「Times New Roman」;
  4. 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示

CSS Unicode字型

  • 爲什麼使用Unicode字型
    * 在CSS中設定字型名稱，直接寫中文是可以的，但是在檔案編碼（GB2312、UTF-8等）不匹配時會產生亂碼的錯誤

    • xp系統不支援類似微軟雅黑的中文

  • 解決：

    • 方案一：可以使用英文替代，比如font-family: 「Microsoft Yahei」
    • 方案二：在CSS直接使用Unicode編碼來寫字型名稱可以避免這些錯誤，使用Unicode寫中文字型名稱，瀏覽器是可以正確的解析的
    字型名稱 英文名稱 Unicode編碼
    宋體 SimSun \5B8B\4F53
    新宋體 NSimSun \65B0\5B8B\4F53
    黑體 SimHei \9ED1\4F53
    微軟雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
    楷體_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
    隸書 LiSu \96B6\4E66
    幼圓 YouYuan \5E7C\5706
    華文細黑 STXihei \534E\6587\7EC6\9ED1
    細明體 MingLIU \7EC6\660E\4F53
    新細明體 PMingLIU \65B0\7EC6\660\4F53

1.3 font-weight：字型粗細

  • 在HTML中如何將字型加粗我們可以用標籤來實現

    • 使用b和strong標籤是文字加粗

  • 可以使用CSS來實現，但是CSS是沒有語意的

    屬性值 描述
    normal 預設值（不加粗的）
    bold 定義粗體（加粗的）
    100-900 400等同於normal，而700等同於bold

提倡：我們平時更喜歡用數位來表示加粗和不加粗

1.4 font-style：字型風格

  • 在HTML中如何將字型傾斜我們可以用標籤來實現
    • 字型傾斜用i和em標籤
  • 可以使用CSS來實現，但是CSS是沒有語意的
    font-style屬性用於定義字型風格，如設定斜體、傾斜或正常字型，其可用屬性值如下：
屬性 作用
normal 預設值，瀏覽器會顯示標準的字型樣式
italic 瀏覽器會顯示斜體的字型樣式

小技巧：平時我們很少給文字加斜體，反而喜歡個斜體標籤（em，i）改爲普通模式

1.5 font：綜合設定字型樣式

  • 基本語法格式如下：
    選擇器 {
	font: font-style font-weight font-size/line-height font-family;
}
  • 注意：
    • 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開
    • 其中不需要設定的屬性可以省略（即預設值），但必須保留font-size和font-family屬性，否則font屬性將不起作用

1.6 font總結

屬性 表示 注意點
font-size 字號 我們通常用的單位是px畫素，一定要跟上單位
font-family 字型 實際工作中按照團隊約定來寫字型
font-weight 字型粗細 記住加粗是700或者bold不加粗是normal或者400 記住數位不要跟單位
font-style 字型樣式 記住傾斜是italic，不傾斜是normal，工作中我們最常用normal
font 字型連寫 1. 字型連寫是由順序的，不能隨意換位置 2. 其中字號和字型必須同時出現

2. CSS外觀屬性

2.1 color：文字顏色

  • 作用：color屬性用於定義文字的顏色
  • 其取值方式有如下三種
    表示 屬性值
    預定義的顏色值 red，green，blue，還有我們的御用色pink
    十六進制 #FF0000，#FF6600，#29D794
    RGB程式碼 rgb(255,0,0)或rgb(100%,0%,0%)
  • 注意：我們實際工作中，用十六進制的寫法是最多的，而且我們更喜歡簡寫方式比如#f00代表紅色

2.2 text-align：文字水平對齊方式

  • 作用：text-align屬性用於設定文字內容的水平對齊，相當於HTML中的align對齊屬性
  • 其可用屬性值如下：
    屬性 解釋
    left 左對齊（預設值）
    right 右對齊
    center 居中對齊
  • 注意：是讓盒子裏面的內容水平居中，而不是讓盒子居中對齊

2.3 line-height：行間距

  • 作用：line-height屬性用於設定行間距，就是行與行之間的距離，即字元的垂直間距，一般稱爲行高
  • 單位：line-height常用的屬性值單位有三種，分別爲畫素px，相對值em和百分比%，實際工作中使用最多的是畫素px
  • 技巧：
    一般情況下，行距比字號大7、8畫素左右大小就可以了。
line-height: 24px;

2.4 text-indent：首行縮排

  • 作用：text-indent屬性用於設定首行文字的縮排

  • 屬性值

    • 其屬性值可爲不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%，允許使用負值
    • 建議使用em作爲設定單位
      1em就是一個字的寬度，如果是漢字的段落，1em就是一個漢字的寬度
      	p {
	        /* 行間距 */
	        line-height: 25px;
	        /* 首行縮排2個字，一個em就是1個字的大小 */
	        text-indent: 2em;
	}

    2.5 text-decoration文字的裝飾

    text-decoration通常我們用於給鏈接修改裝飾效果

    值 描述
    none 預設，定義標準的文字，取消下劃線（最常用）
    underline 定義文字下的一條線，下劃線也是我們鏈接自帶的（常用）
    overline 定義文字上的一條線（不用）
    line-through 定義穿過文字下的一條線（不常用）

    2.6 CSS外觀屬性總結

    屬性 表示 注意點
    color 顏色 我們通常用十六進制比如#fff
    line-height 行高 控制行與行之間的距離
    text-align 水平對齊 可以設定文字水平的對齊方式
    text-indent 首行縮排 通常我們用於段落首行縮排2個字的距離
    text-decoration 文字裝飾 記住新增下劃線underline，取消下劃線none

四、CSS選擇器

1. CSS複合選擇器

1.1 後代選擇器

  • 概念：後代選擇器又稱爲包含選擇器

  • 作用：用來選擇元素或元素組的子孫後代

  • 其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔，先寫父親爺爺，再寫兒子孫子

    	父級 子級 {
	        屬性：屬性值；
	        屬性：屬性值；
	}

  • 語法：

    	.class h3 {
	        color: red;
	        font-size: 16px;
	}

在这里插入图片描述

  • 當標籤發生巢狀時，內層標籤就稱爲外層標籤的後代
  • 子孫後代都可以這麼選擇。或者說，它能選擇任何包含在內的標籤

1.2 子元素選擇器

  • 作用：子元素選擇器只能選擇作爲某元素子元素（親兒子）的元素
  • 其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個「>」進行連線
  • 語法：
    	.class>h3 {
	        color:red;
	        font-size: 14px;
	}

在这里插入图片描述

1.3 交集選擇器

  • 條件：交集選擇器由兩個選擇器構成，找到的標籤必須滿足：既有標籤一的特點，也有標籤二的特點

在这里插入图片描述

  • 語法：

在这里插入图片描述

  • 其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如h3.special

1.4 並集選擇器

  • 應用：如果某些選擇器定義的樣式相同樣式，就可以利用並集選擇器，可以讓程式碼更簡潔

  • 並集選擇器（CSS選擇器分組）是各個選擇器通過「,」連線而成的，通常用於集體宣告

  • 語法：

在这里插入图片描述

  • 任何形式的選擇器（包括標籤選擇器、class類選擇器、id選擇器等），都可以作爲並集選擇器的一部分

1.5 鏈接僞類選擇器

  • 作用：用於向某些選擇器新增特殊的效果，比如給鏈接新增特殊效果，比如可以選擇第一個，第n個元素

  • 類選擇器和鏈接僞類選擇器的區別

    • 類選擇器是一個點，比如.demo{}
    • 鏈接僞類選擇器是兩個點就是冒號，比如:link{}
    	a:link                              /* 未存取的鏈接 */
	a:visited                         /* 已存取的鏈接 */
	a:hover                           /* 滑鼠移動到鏈接上 */
	a:active                           /* 選定的鏈接 */

    【注意】
    * 寫的時候，他們的順序儘量不要顛倒，按照lvha的順序，否則可能引起錯誤
    * 因爲叫鏈接僞類，所以都是利用交集選擇器a:link，a:hover
    * 因爲a鏈接瀏覽器具有預設樣式，所以我們實際工作中都需要給鏈接單獨指定樣式
    * 實際工作開發中，我們很少寫全四個狀態，一般我們寫法如下：

a {                              /* a是標籤選擇器，所有的鏈接 */
	font-weight: 700;
	font-size: 14px;
	color: gray;
}
a:hover {                   /* :hover是鏈接僞類選擇器滑鼠經過 */
	color: red;        /* 滑鼠經過的時候，由原來的灰色變成了紅色 */
}

1.6 複合選擇器總結

選擇器 作用 特徵 使用情況 隔開符號及用法
後代選擇器 用來選擇元素後代 是選擇所有的子孫後代 較多 符號是空格.nav a
子代選擇器 選擇最近一級元素 只選親兒子 較少 符號是>.nav>p
交集選擇器 選擇兩個標籤交集的部分 既是 又是 較少 沒有符號p.one
並集選擇器 選擇某些相同樣式的選擇器 可以用於集體宣告 較多 符號是逗號 .nav,.header
鏈接僞類選擇器 給鏈接更改狀態 較多 重點記住a{}和a:hover實際開發中的寫法

2. 標籤顯示模式（display）

2.1 什麼是標籤顯示模式

  • 什麼是標籤的顯示模式
    標籤以什麼方式進行顯示，比如div自己佔一行，比如span一行可以放多個
  • 作用：
    我們網頁的標籤非常多，在不同地方會用到不同類型的標籤，以便更好的完成我們的網頁
  • 標籤的型別（分類）
    • 塊級元素
    • 行內元素

2.2 塊級元素（block-level）

  • 例：
    常見的塊元素由<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素

在这里插入图片描述

  • 塊級元素的特點
    1. 比較霸道，自己獨佔一行
    2. 高度、寬度、外邊框以及內邊距都可以控制
    3. 寬度預設是容器的100%
    4. 是一個容器及盒子，裏面可以放行內或者塊級元素
  • 【注意】
    • 只有文字才能 纔能組成段落，因此p裏面不能放塊級元素，特別是p不能放div
    • 同理還有這些標籤h1、h2、h3、h4、h5、h6、dt，他們都是文字類塊級標籤，裏面不能放其他塊級元素

2.3 行內元素（inline-level）

  • 例：
    常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素，有的地方也稱內聯元素

在这里插入图片描述

  • 行內元素的特點

    1. 相鄰行內元素在一行上，一行可以顯示多個
    2. 高、寬直接設定是無效的
    3. 預設寬度就是它本身內容的寬度
    4. 行內元素只能容納文字或其他行內元素

  • 【注意】

    • 鏈接裏面不能再次放鏈接
    • 特殊情況a裏面可以放塊級元素，但是給a轉換一下塊級模式最安全

2.4 行內塊元素（inline-block）

  • 例：
    在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性

在这里插入图片描述

  • 行內塊元素的特點
    1. 和相鄰行內元素（行內塊）在一行是但是之間會有空白縫隙，一行可以顯示多個
    2. 預設寬度就是它本身內容的寬度
    3. 高度、行高、外邊距以及內邊距都可以控制

2.5 三種模式區別

元素模式 元素排列 設定樣式 預設寬度 包含
塊級元素 一行只能放一個塊級元素 可以設定寬度高度 容器的100% 容器級可以包含任何標籤
行內元素 一行可以放多個行內元素 不可以直接設定寬度高度 它本身內容的寬度 容納文字或其他行內元素
行內塊元素 一行放多個行內塊元 可以設定寬度和高度 它本身內容的寬度

2.6 標籤顯示模式轉換display

  • 塊轉行內：display:inline;
  • 行內轉塊：display:block;
  • 塊、行內元素轉換爲行內塊：display:inline-block;

3. 行高那些事

3.1 行高測試

行高的測量方法：

在这里插入图片描述

在这里插入图片描述

3.2 單行文字垂直居中

行高我們利用最多的一個地方是：可以讓單行文字在盒子中垂直居中對齊
行高=上距離+內容高度+下距離

在这里插入图片描述

上距離和下距離總是相等的，因此文字看上去是垂直居中的
行高和高度的三種關係：

  • 如果行高等於高度文字會垂直居中
  • 如果行高大於高度文字會偏下
  • 如果行高小於高度文字會偏上

4. CSS背景（background）

4.1 背景顏色（color）

  • 語法：
    background-color: 顏色值;         /* 預設的值是transparent透明的 */

4.2 背景圖片（image）

  • 語法：

    background-image: none| url(url);
    參數 作用
    none 無背景圖（預設的）
    url 使用絕對或相對地址指定背景影象 
    background-image: url(images/demo.png);

小技巧：我們提倡背景圖片後面的地址，url不要加引號

4.3 背景平鋪（repeat）

  • 語法：
    background-repeat: repeat | no-repeat | repeat-x | repeat-y;
    參數 作用
    repeat 背景影象在縱向和橫向上平鋪（預設的）
    no-repeat 背景影象不平鋪
    repeat-x 背景影象在橫向上平鋪
    repeat-y 背景影象在縱向上平鋪

4.4 背景位置（position）

  • 語法：

    background-position: length || length
background-position: position || position
    參數 值
    length 百分比
    position top

  • 【注意】

    • 必須先指定background-image屬性
    • position後面是x座標和y座標，可以使用方位名詞或者精確單位
    • 如果指定兩個值，兩個值都是方位名詞，則兩個值前後順序無關，比如left top和top left效果一致
    • 如果只指定一個方位名詞，另一個預設值爲居中
    • 如果只指定一個數值，那該數值用於x座標，另一個預設是y座標，預設居中
    • 如果指定兩個值，精確單位和方位名字混合使用，則第一個值是x座標，第二個值是y座標
    /* 超大背景圖片的做法 背景定位 */
background-position: center top;

4.5 背景附着

  • 背景附着就是解釋背景是卷動的還是固定的
  • 語法：
    background-attachment: scroll | fixed
    參數 作用
    scroll 背景影象是隨物件內容卷動
    fixed 背景影象固定

4.6 背景簡寫

  • background：屬性的值的書寫順序官方並沒有強制標準的，建議大家如下寫：
    background： 背景顏色 背景圖片地址 背景平鋪 背景卷動 背景位置；
  • 語法：
    background: transparent url(image.jpg) repeat-y scroll center top;

4.7 背景透明（CSS3）

  • 語法：
    background: rgb(0, 0, 0, 0.3);
  • 最後一個參數是alpha透明值，取值範圍0~1之間
  • 我們習慣把0.3的0省略掉，這樣寫background：rgba(0，0，0，.3)；
  • 【注意】：背景半透明是指盒子背景半透明，盒子裏面的內容不受影響
  • 因爲是CSS3，所以低於IE9的版本是不支援的

4.8 背景總結

屬性 作用 值
background-color 背景顏色 預定義的顏色值/十六進制/RGB程式碼
background-image 背景圖片 url（圖片路勁）
background-repeat 是否平鋪 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position 分別是x和y座標，切記如果有精確數值單位，則必須按照先x後y的寫法
background-attachment 背景固定還是卷動 scroll/fixed
背景簡寫 更簡單 背景顏色 背景圖片地址 背景平鋪 背景卷動 背景位置；它們沒有順序
背景透明 讓盒子半透明 Background: rgba(0, 0, 0, .3); 後面必須是4個值

5. CSS三大特性

5.1 CSS層疊性

在这里插入图片描述

  • 概念：
    所謂層疊性是指多種CSS樣式的疊加
    是瀏覽器處理衝突的一個能力，如果一個屬性通過兩個相同選擇器設定到相同一個元素上，那麼這個時候一個屬性就會將另一個屬性層疊掉
  • 原則：
    • 樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式
    • 樣式不衝突，不會層疊

5.2 CSS繼承性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCrNsFnz-1597025809219)(file:///C:/Users/25839/AppData/Local/Temp/msohtmlclip1/02/clip_image001.png)]

  • 概念：
    子標籤會繼承父標籤的某些樣式，如文字顏色和字號
    想要設定一個可繼承的屬性，只需將它應用於父元素即可
  • 注意：
    • 恰當的使用繼承可以簡化程式碼，降低CSS樣式的複雜性，比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了
    • 子元素可以繼承父元素的樣式(text, font, line這些元素開頭的可以繼承，以及color屬性)

CSS繼承口訣，龍生龍，鳳生鳳，老鼠的孩子會打洞

5.3 CSS優先順序

在这里插入图片描述

  • 概念
    定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，此時
    • 選擇器相同，則執行層疊性
    • 選擇器不同，就會出現優先順序的問題

1). 權重計算公式

關於CSS權重，我們需要一套計算公式來去計算，這個就是CSS Specificity（特殊性）

標籤選擇器 計算權重公式
繼承或者* 0，0，0，0
每個元素（標籤選擇器） 0，0，0，1
每個類，僞類 0，0，1，0
每個ID 0，1，0，0
每個行內樣式style=「」 1，0，0，0
每個!important重要的 ∞無窮大
  • specificity用一個四位的數，更像四個級別
  • 值從左到右，左邊的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越

2). 權重疊加

  • div ul li ----> 0，0，0，3

  • .nav ul li ----> 0，0，1，2

  • a:hover ----> 0，0，1，1

  • .nav a ----> 0，0，1，1

    【注意】 數位之間沒有進位制，比如說：0，0，0，5+0，0，0，5=0，0，0，10而不是0，0，1，0，所以不會存在10個div能趕上一個類選擇器的情況

3). 繼承的權重是0

修改樣式，一定要看該標籤有沒有被選中

  • 如果選中了，那麼以上面的公式來計算權重，誰大聽誰的
  • 如果沒有選中，那麼權重是0，因爲繼承的權重爲0

【注意】 有兩個特殊標籤 鏈接 和 h標籤 ，它們瀏覽器有自己預設的樣式，繼承的權重爲0，所以，我們還是要單獨給鏈接和標題一樣樣式

五、盒子模型

1. 盒子模型（Box Model）

  • 所謂盒子模型

    • 就是把HTML頁面中的佈局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器

在这里插入图片描述

在这里插入图片描述

  • 總結：
    • 盒子模型有元素的**內容、邊框（border）、內邊框（padding）和外邊框（margin）**組成
    • 盒子裏面的文字和圖片等元素是內容區域
    • 盒子的厚度我們稱爲盒子的邊框
    • 盒子內容與邊框的距離是內邊距（類似單元格的cellpadding）
    • 盒子與盒子之間的距離是外邊距（類似單元格的cellspacing）
  • 標準盒子模型

在这里插入图片描述

2. 盒子邊框（border）

在这里插入图片描述

  • 語法：
  border:  border-width | border-style | border-color;
屬性 作用
border-width 定義邊框粗細，單位是px
border-style 邊框的樣式
border-color 邊框顏色
  • 邊框的樣式：
    • none：沒有邊框即忽略所有邊框的寬度（預設值）
    • solid：邊框爲單實線（最爲常用的）
    • dashed：邊框爲虛線
    • dotted：邊框爲點線

2.1 邊框綜合設定

border: border-width | border-style | border-color;

例如：

border: 1px solid red;

2.2 盒子邊框寫法總結表

上邊框 下邊框 左邊框 右邊框
border-top-style:樣式; border-bottom-style:樣式; border-left-style:樣式; border-right-style:樣式;
border-top-width:寬度; border-bottom-width:寬度; border-left-width:寬度; border-right-width:寬度;
border-top-color:顏色; border-bottom-color:顏色; border-left-color:顏色; border-right-color:顏色;
border-top: 寬度 樣式 顏色; border-bottom: 寬度 樣式 顏色; border-left: 寬度 樣式 顏色; border-right: 寬度 樣式 顏色;

小技巧：

border: none;
border-top: 1px solid red;

2.3 表格的細邊框

在这里插入图片描述

  • 通過表的cellspacing=「0」，將單元格與單元格之間的距離設定爲0

  • 但是兩個單元格之間的邊框會出現重疊，從而使邊框變粗

  • 通過CSS屬性：

    	table {
	        border-collapse: collapse;
	}
    • collapse單詞是合併的意思
    • border-collapse: collapse; 表示相鄰邊框合併在一起
    <style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table,
    td {
        border-collapse: collapse;         /* 合併相鄰邊框 */
    }
</style>

3. 內邊距（padding）

在这里插入图片描述

3.1 內邊距

padding屬性用於設定內邊距，是指邊框與內容之間的距離

3.2 設定

屬性 作用
padding-left 左內邊距
padding-right 右內邊距
padding-top 上內邊距
padding-bottom 下內邊距

當我們給盒子指定padding值之後，發生了兩件事情

  1. 內容和邊框有了距離，新增了內邊距
  2. 盒子會變大

【注意】 後面跟幾個數值表示的意思是不一樣的

值的個數 表示意思
1個值 padding：上下左右內邊距;
2個值 padding：上下內邊距 左右內邊距;
3個值 padding：上內邊距 左右內邊距 下內邊距;
4個值 padding：上內邊距 右內邊距 下內邊距 左內邊距;

【新浪導航欄案例】

<!DOCTYPE html>  
<html  lang="ch-CN">  
<head>   
	<meta  charset="UTF-8">    
	<title>新浪導航</title>    
	<style>     
    .nav {        
        height: 41px;        
        background-color: #fcfcfc;        
        border-top: 3px  solid #ff8500;        
        border-bottom: 1px  solid #edeef0;     
    }     
    .nav a {       
        display:  inline-block;       
        height: 41px;       
        line-height: 41px;       
        color: #4c4c4c;       
        padding: 0  20px;        
        text-decoration: none;        
        font-size: 12px;     
    }     
    .nav a:hover {        
        background-color: #eee;      
    }    
	</style>  
</head>  
<body>    
	<div  class="nav">     
		<a href="#">設爲首頁</a>
		<a href="#">手機新浪網</a>
        <a href="#">移動用戶端</a>
        <a href="#">部落格</a>
        <a href="#">微博</a>
        <a href="#">關注我</a> 
	</div>
</body> 
</html>

3.4 內盒尺寸計算（元素實際大小）

在这里插入图片描述

  • 寬度

    Element Height = content height + padding + border （height爲內容高度）

  • 高度

    Element width = content width + padding + border （width爲內容寬度）

  • 盒子的實際大小 = 內容的寬度和高度 + 內邊距 + 邊框

3.5 內邊距產生的問題

  • 問題：會撐大盒子

在这里插入图片描述

  • 解決：通過給盒子設定了寬度的盒子，減去相應的內邊距的值，維持盒子原有的大小

在这里插入图片描述

3.6 padding不影響盒子大小情況

如果沒有給一個盒子指定寬度，此時，如果給這個盒子指定padding，則不會撐開盒子

4. 外邊距（margin）

在这里插入图片描述

4.1 外邊距

margin屬性用於設定外邊距，margin就是控制盒子與盒子之間的距離

4.2 設定

屬性 作用
margin-left 左外邊距
margin-right 右外邊距
margin-top 上外邊距
margin-bottom 下外邊距

4.3 外邊距實現盒子居中

  • 可以讓一個塊級盒子實現水平居中必須：

    • 盒子必須指定了寬度

    • 然後就給左右的外邊距都設定爲auto

    實際工作中常用這種方式進行網頁佈局，範例程式碼如下：

    .header {  
  widtth: 960ox;  
margin: 0 auto;  
}

    常見的寫法，以下三種都可以

  • margin-left: auto; margin-right: auto;

  • margin: auto;

  • margin: 0 auto;

4.4 文字居中和盒子居中區別

  1. 文字水平居中使text-align：center; 而且還可以讓行內元素和行內塊居中對齊
  2. 塊級盒子水平居中 左右margin改爲auto
text-align: center;                /* 文字、行內元素、行內塊元素水平居中 */  
margin: 10px auto;              /* 塊級盒子水平居中，左右margin改爲auto就可以了 */

4.5 插入圖片和背景圖片區別

  1. 插入圖片我們用的最多比如產品展示類，移動位置只能靠盒模型padding、margin
  2. 背景圖片我們一般用於小圖示背景或者超大背景圖片，背景圖片只能通過background-position

4.6 清楚元素的預設內外邊距

在这里插入图片描述

* { 
	padding: 0;           /* 清除內邊距 */ 
	margin: 0;            /* 清除外邊距 */ 
}

【注意】行內元素爲了照顧相容性，儘量只設置左右內外邊距，不要設定上下內外邊距

4.7 外邊距合併

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併

1). 相鄰塊元素垂直外邊距的合併

  • 當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom
  • 下面 下麪的元素有上外邊距margin-top，則它們之間的垂直間距不是margin-bottom與margin-top之和
  • 取兩個值中的較大者這種現象被稱爲相鄰元素垂直外邊距的合併（也稱外邊距塌陷）

在这里插入图片描述

**解決方案：**儘量只給一個盒子新增margin值

2). 巢狀塊元素垂直外邊距的合併（塌陷）

  • 對於兩個巢狀關係的塊元素,如果父元素沒有上內邊距及邊框
  • 父元素的上外邊框會與子元素的上外邊框發生合併
  • 合併後的外邊框爲兩者中的較大者
    在这里插入图片描述

解決方案：

  1. 可以爲父元素定義上邊框
  2. 可以爲父元素定義上內邊距
  3. 可以爲父元素新增overflow: hidden

還有其他方法，比如浮動、固定、絕對定位的盒子不會有問題

6. 盒子模型佈局穩定性

建議如下：
按照優先使用寬度（width）其次使用內邊距（padding）再次外邊距（margin）

  width >  padding > margin 

原因：
	○ margin會有外邊距合併還有IE6下面 下麪margin加粗的bug，所以最後使用
	○ padding會影響盒子大小，需要進行加減計算，其次使用
	○ width沒有問題，我們經常使用寬度剩餘法、高度剩餘法來做的

7. 拓展

7.1 圓角邊框（CSS3）

  • 語法：
    border-radius: length;
    • 其中每一個值可以爲數值或百分比的形式
    • 技巧：讓一個正方形變成圓
    border-radius: 50%;

在这里插入图片描述

  • 以上效果圖矩形的圓角，就不要用百分比，因爲百分比會是表示高度和寬度的一半
  • 而我們這裏矩形就只要用高度的一半就好了

7.2 盒子陰影（CSS3）

  • 語法：
box-shadow: 水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/外陰影;
值 描述
h-shadow 必需，水平陰影的位置，允許負值
v-shadow 必需，垂直陰影的位置，允許負值
blur 可選，模糊距離
spread 可選，陰影的尺寸
color 可選，陰影的顏色
inset 可選，將外部陰影（outset）改爲內部陰影
  • 前兩個屬性是必須寫的，其餘的可以省略
  • 外陰影（outset）是預設的，但不能寫，想 要內陰影可以寫inset
div {        
    width: 200px;       
    height: 200px;       
    border: 10px solid red;      
    /* box-shadow: 5px 5px 3px 4px rgba(0,  0, 0, .4); */        
    /* box-shadow:水平位置 垂直位置 模糊距離  陰影尺寸（影子大小） 陰影顏色 內/外陰影； */   box-shadow: 0 15px 30px rgba(0, 0, 0, .4);         
}

六、浮動

1. 浮動

1.1 CSS佈局的三種機制 機製

  • 普通流（標準流）

    • 塊級元素會獨佔一行，從上向下順序排列

      • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

    • 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則會自動換行

      • 常用元素：span、a、i、em等

  • 浮動

    • 讓盒子從普通流中浮起來，主要作用讓多個塊級盒子一行顯示

  • 定位

    • 將盒子定在瀏覽器的某一個位置——CSS離不開定位，特別是後面的js特效

1.2 爲什麼需要浮動？

思考題：

我們首先要思考以下兩個佈局中最常見的問題？

  1. 如何讓多個盒子（div）水平排列成一行？

在这里插入图片描述

  1. 如何實現盒子的左右對齊？

在这里插入图片描述

雖然我們前面學過行內塊（inline-block）但是他卻有自己的缺陷：

  1. 它可以實現多個元素一行顯示，但是中間會有空白縫隙，不能滿足以上第一個問題
  2. 它不能實現以上第二個問題，盒子左右對齊

1.3 什麼是浮動（float）

概念：元素的浮動是指設定了浮動屬性的元素會

  1. 脫離標準普通流的控制
  2. 移動到指定位置

作用

  1. 讓多個盒子（div）水平排列成一行，使得浮動稱爲佈局的重要手段
  2. 可以實現盒子的左右對齊等等
  3. 浮動最早是用來控製圖片，實現文字環繞圖片的效果

語法

選擇器 { float: 屬性值;}
屬性值 描述
none 元素不浮動（預設值）
left 元素向左浮動
right 元素向右浮動

1). 浮動口訣之浮

浮動——浮、浮、浮——漂浮在普通流的上面，脫離標準流的

在这里插入图片描述

.box1 {
    width: 200px;    
    height: 200px;   
    background-color: rgba(255, 0, 0, 0.5);    
    float: left;  
} 
.box2 {    
    width: 150px;    
    height: 300px;    
    background-color: skyblue; 
}

小結：float屬性會讓盒子浮動在標準流的上面，所以第二個標準流的盒子跑到浮動盒子的底下了

2).浮動口訣之漏

浮動——漏、漏、漏，浮動的盒子，把自己原來的位置漏給下面 下麪標準流的盒子，就是不佔有原來位置，是脫離標準流的，我們俗稱「脫標」

.box1 { 
    width: 200px; 
    height: 200px;  
    bakcground-color: rgba(255, 0, 0, 0.5);  
    /* 讓第一個盒子浮動起來，不佔位置 */ 
    float: left; 
}    
.box2 {  
    width: 150px;  
    height: 300px; 
    bakcground-color: skyblue; 
}

3). 浮動口訣之特

浮動——特性float屬性會改變元素display屬性

任何元素都可以浮動，浮動元素會生成一個塊級框，而不論它本身是何種元素，生成的塊級框和我們前面的行內塊極其相似

【注意】浮動元素之間預設沒有縫隙

在这里插入图片描述

【注意】浮動的元素相互貼靠在一起的，但是如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊

1.4 浮動（float）小結

特點 說明
浮 家裏浮動的盒子是浮起來的，浮動在其他標準流盒子的上面
漏 加了浮動的盒子是不佔位置的，它原來的位置漏給了標準流的盒子
特 特別注意：浮動元素會改變display屬性，類似轉換爲行內塊，但是元素之間沒有空白縫隙

1.5 浮動（float）的應用

浮動和標準流的父盒子搭配

我們知道，浮動是脫標的，會影響下面 下麪的標準流元素。此時，我們需要給浮動的元素新增一個標準流的父親，這樣，最大化的減小了對其他標準流的影響

1.6 浮動（float）的擴充套件

1). 浮動元素與父盒子的關係

  • 子盒子的浮動參照父盒子對齊
  • 不會與父盒子的邊框重疊，也不會超過父盒子的內邊距

在这里插入图片描述

2). 浮動元素與兄弟盒子的關係

在一個父盒子中，如果前一個兄弟盒子是：

  • 浮動的，那麼當前盒子會與前一個盒子的頂部對齊
  • 普通流的，那麼當前盒子會顯示在前一個兄弟盒子的下方

在这里插入图片描述

浮動只會影響當前的或者是後面的標準流的盒子，不會影響前面的標準流

2. 清除浮動

2.1 爲什麼要清除浮動

因爲父級盒子很多情況下，不方便給高度，但是子盒子浮動就不佔有位置，最後父級盒子高度爲0，就影響了下面 下麪的標準流盒子

在这里插入图片描述

在这里插入图片描述

總結：

  • 由於浮動元素不再佔用原文件流的位置，所以它會對後面的元素排版產生影響
  • 準確地說，並不是清除浮動，而是清除浮動後造成地影響

2.2 清除浮動本質

清除浮動主要爲了解決父級元素因爲子級浮動引起內部高度爲0的問題。清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面 下麪的標準流了

2.3 清除浮動的方法

  • 語法：
選擇器 {  clear: 屬性值;  }
屬性值 描述
left 不允許左側有浮動元素（清除左側浮動的影響）
right 不允許右側有浮動元素（清除右側浮動的影響）
both 同時清除左右兩側浮動的影響

但是我們實際工作中，幾乎只用clear: both;

1). 額外標籤法（隔牆法）

  W3C推薦的做法是通過在浮動元素末尾新增一個空的標籤例如<div style="clear: both;"></div>，或者其他標籤br等亦可
  • 優點：通俗易懂，書寫方便
  • 缺點：新增許多無意義的標籤，結構化較差

2). 父級新增overflow屬性方法

可以給父級新增：overflow爲 hidden | auto |  scroll 都可以實現
  • 優點：程式碼簡介
  • 缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素

3). 使用after僞元素清除浮動

:after方式爲空元素額外標籤法的升級版，好處是不用單獨新增標籤了**

使用方法：

.clearfix:after {  
    content: "";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;  
}    
/* IE6、7專有 */ 
.clearfix { 
    *zoom: 1;  
}
  • 優點：符合閉合浮動思想 結構語意正確
  • 缺點：由於IE6、7不支援:after，使用zoom：1觸發hasLayout

4). 使用雙爲元素清除浮動

使用方法：

.clearfix:before, 
.clearfix:after {  
    content: ""; 
    display: table; 
}  
.clearfix:after { 
    clear: both; 
}  
.clearfix {  
    *zoom: 1; 
}
  • 優點：程式碼簡潔
  • 缺點：由於IE6、7不支援after，指用zoom：1觸發hasLayout

2.4 清除浮動總結

什麼使用需要清除浮動

  1. 父級沒有高度
  2. 子盒子浮動了
  3. 影響下面 下麪佈局
清除浮動的方式 優點 缺點
額外標籤法（隔牆法） 通俗易懂 新增許多無意義的標籤，結構化比較差
父級overflow:hidden; 書寫簡單 溢位隱藏
父級僞元素 結構語意化正確 由於IE6、7不支援after，相容性問題
父級雙僞元素 結構語意化正確 由於IE6、7不支援after，相容性問題

七、定位（position）

1. CSS佈局的三種機制 機製

  • 普通流（標準流）
  • 浮動

讓盒子從普通流中浮動起來——讓多個盒子（div）水平排列成一行

  • 定位

將盒子定在某一個位置自由的漂浮在其他盒子的上面—— CSS離不開定位，特別是後面的js特效

2. 定位詳解

定位也是用來佈局的，它有兩部分組成：定位 = 定位元型樣 + 邊偏移

2.1 邊偏移

在CSS中，通過top、bottom、left、right屬性定義元素的邊偏移

邊偏移屬性 範例 描述
top top：80px 頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom bottom：80px 底部偏移量，定義元素相對於其父元素下邊線的距離
left left：80px 左側偏移量，定義元素相對於其父元素左邊線的距離
right right：80px 右側偏移量，定義元素相對於其父元素右邊線的距離

2.2 定位元型樣（position）

在CSS中，通過position屬性定義元素的定位元型樣，語法格式如下：

  選擇器 { position: 屬性值;}
值 語意
static 靜態定位
relative 相對定位
absolute 絕對定位
fixed 固定定位

在这里插入图片描述

1) 靜態定位（static）

  • 靜態定位是元素的預設定位方式，無定位的意思。它相當於border裏面的none，不要定位的時候使用
  • 靜態定位按照標準流特性擺放位置，它沒有邊偏移
  • 靜態定位在佈局時我們幾乎不用的

2) 相對定位（relative）

  • 相對定位是元素相對於它原來在標準流中的位置來說的（自戀型）

效果圖：

在这里插入图片描述

相對定位的特點：

  • 相對於自己原來在標準流中位置來移動的
  • 原來在標準流的區域繼續佔有，後面的盒子仍然以標準流的方式對待它

3) 絕對定位（absolute）

絕對定位是元素以帶有定位的父級元素來移動位置（拼爹型）

  • 完全脫標——完全不佔位置
  • 父元素沒有定位，則以瀏覽器爲準定位（Document文件）

在这里插入图片描述

  • 父元素有定位，將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位

在这里插入图片描述

絕對定位的特點：

  • 絕對是以帶有定位的父級元素來移動位置（拼爹型），如果父級都沒有定位，則以瀏覽器文件爲準移動位置
  • 不保留原來的位置，完全是脫標的

定位口訣——子絕父相

4) 固定定位（fixed）

固定定位是絕對定位的一種特殊形式：（認死理型），如果說絕對定位是一個矩形，那麼固定定位就類似於正方形

  • 完全脫標_完全不佔位置

  • 只認瀏覽器的可視視窗——瀏覽器可視視窗 + 邊偏移屬性 來設定元素的位置

    • 跟父元素沒有任何關係
    • 不隨卷軸卷動

在这里插入图片描述

3. 定位（position）的擴充套件

3.1 絕對定位的盒子居中

【注意】絕對定位/固定定位的盒子不能通過設定margin: auto設定水平居中

在使用絕對定位時要想實現水平居中，可以按照下圖的方法：

在这里插入图片描述

  1. left: 50%; ：讓盒子左側移動到父級元素的水平中心位置
  2. margin-left: -100px; ：讓盒子向左移動自身寬度的一半

3.2 堆疊順序（z-index）

在使用定位佈局時，可能會出現盒子重疊的情況

加了定位的盒子，預設後來者居上，後面的盒子會壓住前面的盒子

應用z-index層疊等級屬性可以調整盒子的堆疊順序。如下圖所示：

在这里插入图片描述

z-index的特性如下：

  1. 屬性值：正整數、負整數或0，數值越大，盒子越靠上
  2. 如果屬性值相同，則按照書寫順序，後來居上
  3. 數位後面不能加單位

【注意】z-index只能應用於相對定位、絕對定位和固定定位的元素，其他標準流、浮動和靜態定位無效

3.3 定位改變display

前面講過，display是顯示模式，可以改變顯示模式有以下方式：

  • 可以用inline-block轉換爲行內塊
  • 可以用浮動float預設轉換爲行內塊（類似，並不完全一樣，因爲浮動是脫標的）
  • 絕對定位和固定定位也和浮動類似，預設轉換的特性轉換爲行內塊

【注意】浮動元素、絕對定位（固定定位）元素的都不會出發外邊距合併的問題

4. 定位小結

定位元型樣 是否脫標佔有位置 移動位置基準 模式切換（行內塊） 使用情況
靜態static 不脫標，正常模式 正常模式 不能 幾乎不用
相對定位relative 不脫標，佔有位置 相對自身位置移動 不能 基本單獨使用
絕對定位absolute 完全脫標，不佔有位置 相對於定位父級移動位置 能 要和定位父級元素搭配使用
固定定位fixed 完全脫標，不佔有位置 相對於瀏覽器移動位置 能 單獨使用，不需要父級

【注意】

  1. 邊偏移需要和定位元型樣聯合使用，單獨使用無效
  2. top和bottom不要同時使用
  3. left和right不能同時使用

八、CSS高階技巧

1. 元素的顯示與隱藏

1.1 display顯示

  • display設定或檢索物件是否及如何顯示
  display: none;     隱藏物件  
  display: block;      除了轉換爲塊級元素之外，同時還有顯示元素的意思
  • 特點：隱藏之後，不再保留位置

在这里插入图片描述

1.2 visibility可見性

  • 設定或檢索是否顯示物件
  visibility: visible;        物件可視  visibility: hidden;         物件隱藏
  • 特點：隱藏之後，繼續保留原有位置（停職留薪）

在这里插入图片描述

1.3 overflow溢位

  • 檢索或這是當物件的內容超過其指定高度及寬度時如何管理內容
屬性值 描述
visible 不剪下內容也不新增卷軸
hidden 不顯示超過物件尺寸的內容，超出的部分隱藏掉
scroll 不管超出內容，總是顯示卷軸
auto 超出自動顯示卷軸，不超出不顯示卷軸

在这里插入图片描述

1.4 顯示與隱藏總結

屬性 區別 用途
display 隱藏物件，不保留位置 配合後面js做特效，比如下拉式選單，原先沒有，滑鼠經過，顯示下拉式選單，應用極爲廣泛
visibility 隱藏物件，保留位置 使用較少
overflow 只是隱藏超出大小的部分 可以清除浮動 保證盒子裏面的內容不會超出蓋盒子範圍

2. CSS用戶介面樣式

2.1 滑鼠樣式cursor

設定或檢索在物件上移動的滑鼠指針採用何種系統預定義 的遊標形式

屬性值 描述
default 預設
pointer 小手
move 移動
text 文字
not-allowed 禁止

2.2 輪廓線outline

在这里插入图片描述

是繪製於元素周圍的一條線，位於邊框邊緣的外面，可起到突出元素的作用

   outline : outline-color ||outline-style ||  outline-width

但是我們都不關心可以設定多少，我們平時都是去掉的

最直接的寫法是：outline: 0; 或者 outline: none;

   <input type="text" style="outline: 0;"/>

2.3 防止拖拽文字域resize

在这里插入图片描述

實際開發中，我們文字域右下角是不可推拽：

  <textarea style="resize:  none;"></textarea>

2.4 用戶介面樣式總結

屬性 作用 用途
滑鼠樣式 更改滑鼠樣式cursor 樣式很多，重點記住pointer
輪廓線 表單預設outline outline輪廓線，我們一般直接去掉，border是邊框，我們會經常用
防止拖拽 主要針對文字域resize 防止使用者隨意拖拽文字域，造成頁面佈局混亂，我們使用resize: none;

3. vertical-align垂直對齊

  • 有寬度的塊級元素居中對齊，是margin: 0 auto;
  • 讓文字居中對齊，是text-align: center;

vertical-align垂直對齊，它只針對行內元素或者行內塊元素

在这里插入图片描述

  vertical-align : baseline |top |middle |bottom

設定或檢索物件內容的垂直對齊方式

【注意】vertical-align不影響塊級元素中的內容對齊，它只針對於行內元素或者行內塊元素，特別是行內塊元素，通常用來控製圖片/表單與文字的對齊

3.1 圖片、表單和文字對齊

通過vertical-align控製圖片和文字的垂直關係，預設的圖片會和文字基線對齊

在这里插入图片描述

模式 單詞
基線對齊：預設的是文字和圖片基線對齊 vertical-align: baseline;
垂直居中：預設的是文字和圖片基線對齊 vertical-align: middle;
頂部對齊：預設的是文字和圖片基線對齊 vertical-align: top;

3.2 去除圖片底側空白縫隙

在这里插入图片描述

  • 原因：

    • 圖片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊
    • 圖片底側會有一個空白縫隙

  • 解決方法：

    • 給img標籤新增vertical-align: middle | top等等，讓圖片不要和基線對齊
    • 給img標籤新增display: block; 轉換爲塊級元素就不會存在問題

4. 溢位的文字省略號顯示

4.1 white-space

white-space設定或檢索物件內文字顯示放十四。通常我們使用於強制一行顯示內容

  white-space: normal;                    預設處理方式  
  white-space: nowrap;                  強制在同一行內顯示所有文字，直到文字結束或者遭遇br標籤物件才換行

4.2 text-overflow文字溢位

設定或檢索是否使用一個省略標記（……）表示物件內文字的溢位

text-overflow: clip;           不顯示省略標記（……），而是簡單的裁切  
text-overflow: ellipsis;          當物件內文字溢位時顯示省略標記（……）

【注意】一定要首先強制一行內顯示，再次和overflow屬性搭配使用

4.3 總結

  /* 1. 先強制一行內顯示文字 */ 
white-space: nowrap;  
 /* 2. 超出的部分隱藏 */  
 overflow:  hidden; 
 /* 3. 文字用省略號替代超出的部分 */  
 text-overflow: ellipsis;

5. CSS精靈技術（sprite）

5.1 爲什麼需要精靈技術

在这里插入图片描述

圖所示爲網頁的請求原理圖，當使用者存取一個網站時，需要向伺服器發送請求，網頁上的每張影象都要經過一次請求才能 纔能展示給使用者。

然而，一個網頁中往往會應用很多小的背景影象作爲修飾，當網頁中的影象過多時，伺服器就會頻繁地接收和發送請求，這將大大降低頁面的載入速度

【why？】爲了有效地減少伺服器接受和發送請求的次數，提高頁面的載入速度

5.2 精靈技術講解

css精靈其實是將網頁中的一些背景影象整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖

在这里插入图片描述

當使用者存取該頁面時，只需向伺服器發送一次請求，網頁中的背景影象即可全部展示出來

需要使用CSS中的

  • background-image
  • background-repeat
  • background-position屬性進行背景定位
  • 其中最關鍵的是使用background-position屬性精確地定位

5.3 精靈技術使用核心

  1. 精確測量，每個小背景圖片的大小和位置
  2. 給盒子指定小背景圖片時，背景定位基本都是負值

6. 滑動門

在這裏插入圖片描述

爲了使各種特殊形狀的背景能夠自適應元素中文字內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文字內容，可用性更強，最常見於各種導航欄的滑動門

6.1 核心技術

核心技術就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度，以使能適應不同字數的導航欄

一般的經典佈局都是這樣的：

<a href="#">  
    <span>公司</span> 
</a> 
<a href="#">  
    <span>公司新聞</span>  
</a>

CSS樣式

/* 1. a是設定左側背景（左門） */  
a {  
/*  因爲是滑動門，左右推拉的。跟文字內容多少有關，此時需要用文字撐開盒子，就要用到行內塊 */ 
    display: inline-block; 
    height: 33px;  
    background: url(images/to.png) no-repeat;  
    margin: 100px;  
    padding-left: 15px;  
    color: #fff; 
} 
/* 2. span是設定右側背景（右門） */ 
a span {  
    display: inline-block; 
    height: 33px;  
    /*  注意span需要背景圖片右對齊 */  
    background: url(images/to.png) no-repeat right top;  
    padding-right: 15px;  
}

效果：

在这里插入图片描述

總結：

  1. a 設定背景左側，padding撐開合適寬度
  2. span設定背景右側，padding撐開合適寬度剩下由文字繼續撐開寬度
  3. 之所以a包含span就是因爲整個導航都是可以點選的

7. 拓展

7.1 margin負值之類

1）負邊距+定位：水平居中

2）壓住盒子相鄰邊框

在这里插入图片描述

【注意】

  • 浮動的盒子是緊貼在一起的
  • 定位的盒子是最高層的
  • 都是定位的盒子，可以通過z-index來實現層級關係

7.2 CSS三角形之美

div {  
    width: 0;  
    height: 0;  
    border-top: 10px  solid red;  
    border-right: 10px  solid green;  
    border-bottom: 10px  solid blue;  
    border-left: 10px  solid pink; 
}

效果：

在这里插入图片描述

總結：

  1. 我們用css 邊框可以模擬三角效果

  2. 寬度高度爲0

  3. 我們4個邊框都要寫， 只保留需要的邊框顏色，其餘的不能省略，都改爲 transparent 透明就好了

而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖

[外連圖片轉存中…(img-FULWAyCM-1597025809311)]

當使用者存取該頁面時，只需向伺服器發送一次請求，網頁中的背景影象即可全部展示出來

需要使用CSS中的

  • background-image
  • background-repeat
  • background-position屬性進行背景定位
  • 其中最關鍵的是使用background-position屬性精確地定位