文章目錄
- 一、HTML簡介
- 二、HTML基本標籤
- 三、CSS（層疊樣式表）
- 四、CSS選擇器
- 4.1 CSS選擇器簡介與分類
- 4.2 CSS選擇器的書寫規範
- 4.3 類選擇器
- 4.4 ID選擇器
- 4.5 標籤選擇器
- 4.6 選擇器的分組
- 4.7 衍生選擇器（派生、上下文）
- 4.8 選擇器的優先級
- 4.9 CSS僞類選擇器
- 五、CSS屬性設置
- 六、CSS盒子模型
- 七、CSS塊級元素和行內元素
- 八、CSS伸縮佈局flex
一、HTML簡介
1.1 HTML概述
HTML全稱：Hyper Text Markup Language(超文本標記語言)
HTML是一門用戶創建網頁文檔的標記語言，網頁本身是一種文本文件，在文本文件中添加標記符。
瀏覽器來解析HTML標記的內容（文字的處理，畫面排版安排，圖片如何顯示、音頻、視頻等等）
HTML是用來創建網頁的標記語言
1.2 HTML特點
1、簡易性：超文本標記語言的版本升級採用的超集方式。更加方便靈活
2、可擴展性：超文本標記語言採取的子類元素的方式，爲系統擴展帶來保證
3、平臺無關性：
4、通用性：HTML是網絡的通用語言，一種簡單、通用的標記語言。
1.3 HTML的發展
超文本標記語言(第一版)------1993年6月作爲互聯網工程小組(IETF)工作草案發布(並非標準)
HTML2.0 --1995年11月
HTML3.2 --1997年1月14日，W3C標準
HTML4.0 --1997年12月18日 W3C標準
HTML4.01 --1999年12月24日 W3C的推薦標準
HTML5 —2014年10月29日，W3C推薦標準
1.4 HTML基本結構
<!-- 文檔聲明：告訴瀏覽器使用HTML5版本解析 -->
<!DOCTYPE html>
<html>
<!--網頁的頭部 -->
<head>
<!--頁面的字符集編碼 -->
<meta charset="utf-8" />
<!-- 頁面的標題 -->
<title>我的頁面</title>
</head>
<!-- 網頁的主題，顯示的部分-->
<body>
展示的內容
</body>
</html>
1、HTML頁面包含頭部head和主體body
2、HTML標籤通常是成對出現的，有開始標籤，有結束標籤，稱爲對標籤。沒有結束標籤的爲 空標籤
3、HTML標籤通常都有屬性，格式：屬性名 = “屬性值” 屬性名 = “屬性值”。多個屬性用空格間隔
4、HTML標籤不區分大小寫，建議小寫
5、HTML文件後綴名爲html或htm
二、HTML基本標籤
2.1 結構標籤
<html></html>:根標籤
<head> ：頭標籤
<title></title>頁面的標題
</head>
<body>：主體標籤：顯示網頁內容
</body>
屬性：
color:文本的顏色
bgColor:背景色
background：背景圖片
顏色的表示方式：
第一種：顏色名稱 red blue green yellow orange
第二種方式：RGB模式 #000000 #ffffff #325687
2.2 排版標籤
1、註釋標籤：< !-- 註釋-- >
2、換行標籤：< br/ >
3、段落標籤：<p>文本文字</p>
特點：段落與段落之間有行高（行間距）自帶換行
屬性：文本對齊方式 align （left、center 、right）
4、水平線標籤：<hr/>
屬性：
width：水平線的長度(兩種：像素表示。第二種：百分比顯示)
size：水平線的粗細（避免過粗、太醜、一般給個位數 比如 6px）
color：水平線的顏色
align：水平線的對齊方式(left、center、right)
2.3 標題標籤
<h1>-<h6>
數字越小，標題文字越大！默認加粗、默認字號、默認佔據一行
2.4 容器標籤
<div></div> ： 塊級標籤，獨佔一行，自帶換行
<span></span> ： 行級標籤，所有內容都在同一行
作用：<div>主要是結合css做頁面分塊 佈局
<span>：進行友好提示信息的顯示
2.5 列表標籤
2.5.1 無序列表
ul(unorder list)
<!--ul是無序列表，默認標識爲實心圓 disc
circle 空心圓
square 黑色方塊
-->
<ul type="square">
<li>蘭博基尼</li>
<li>法拉利</li>
<li>賓利</li>
<li>邁凱倫</li>
</ul>
2.5.2 有序列表
ol(order list)
<!--ol是有序列表，默認標識爲阿拉伯數字 1
a A 字母字典順序
i I 羅馬數字
-->
<ol type="I">
<li>鐵膽火車俠</li>
<li>光明勇士</li>
<li>米老鼠和唐老鴨</li>
<li>小頭兒子和隔壁老王</li>
</ol>
2.5.3 定義列表
dl(defination list)定義列表
dt(defination title)定義標題
dd(defination description) 定義描述
<dl>
<dt>秦牛正威</dt>
<dd>就當是一場夢，醒來還是很感動</dd>
<dt>???</dt>
<dd>蛋黃的長裙，蓬鬆的頭髮。</dd>
</dl>
2.5.4 列表嵌套
<ul>
<li>最新娛樂新聞</li>
<li>
<dl>
<dt>青春有你2</dt>
<dd>非常龐大的導師陣容，Ella，Jony J，蔡徐坤，Lisa</dd>
</dl>
</li>
<li>
獵心者
<ol>
<li>戴猛。。。</li>
<li>廖朵朵。。。</li>
<li>花笙。。。</li>
</ol>
</li>
</ul>
2.6 圖片標籤
<img /> 獨立標籤
屬性：
src 圖片地址
width 圖片的寬度
height 圖片的高度
border 邊框
alt 圖片的文字說明 當圖片未能正確加載時，才顯示
title 鼠標懸停時，顯示的文字
<img src="img/微信圖片_20200306173413.jpg"
width="500px"
height="900px"
/>
<img src="img/timg.jpg"
width="500px"
height="500px"
border="5"
alt="給你點讚的小老虎"
title="給你點讚的大老虎"
/>
2.7 鏈接標籤
超鏈接可以是文本，也可以是圖片，可以點擊鏈接標籤，進入新的文檔，或者是當前文檔中的某個部分
<a>文本或圖片</a>、
屬性：
href="跳轉的地址"跳轉外網需要添加協議
target:_self(當前文檔)
_blank(新頁面,會一直打開新的)
_search 之前打開的頁面存在，則不打開新的頁面，直接複用
name 充當錨點（頂部、底部）
需要爲標籤提供name屬性，進行賦值
需要點擊跳轉的標籤href屬性給 #name
2.8 表格標籤
表格由<table>標籤來定義，每個表格均有若干行(由tr標籤定義行)，每行由若干個單元格組成(由td標籤來定義)。每一個數據單元可以包含文本、圖片、列表。。。。。。
2.8.1 普通表格
table tr td
<!--創建表格 table 行 tr 列 td
table屬性：
默認沒有邊框體現
border:邊框的寬度
bordercolor:邊框的顏色
cellspacing:單元格的間距
cellpadding:單元格與內容的間距
width:寬度
height:高度
align:控制表格的對齊方式 left center right
td的屬性：
align:控制的單元格內容的對齊方式 left center right
valign:控制單元格內容的垂直對齊方式 top middle bottom
-->
<table border="1" bordercolor="red" cellspacing="10" cellpadding="10"
width="300px" height="300px" align="center">
<tr>
<td align="center">學號</td>
<td align="center">姓名</td>
<td align="center">性別</td>
</tr>
<tr>
<td valign="bottom">S1001</td>
<td valign="middle">張三</td>
<td valign="top">男</td>
</tr>
</table>
2.8.2 表格的表頭
th
<!-- th作爲表頭，默認居中，加粗 -->
<table border="1">
<tr>
<th>學號</th>
<th>姓名</th>
<th>分數</th>
</tr>
<tr>
<td>S1002</td>
<td>張三</td>
<td>100</td>
</tr>
</table>
2.8.3 表格的列合併
colspan
<table border="1" bordercolor="red">
<tr>
<td align="center" colspan="4">學生信息表</td>
</tr>
<tr>
<td>學號</td>
<td>姓名</td>
<td colspan="2">各科成績</td>
</tr>
<tr>
<td>1</td>
<td>哆啦A夢</td>
<td>80</td>
<td>90</td>
</tr>
</table>
2.8.4 表格的行合併
rowspan
<table border="1" bordercolor="blue">
<tr>
<td colspan="4" align="center">學生表</td>
</tr>
<tr>
<td>學號</td>
<td>姓名</td>
<td>語文成績</td>
<td>數學成績</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">光頭強</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>100</td>
<td>99</td>
</tr>
</table>
2.9 文本格式化標籤
<!--粗體文本-->
<b>今天天氣好</b><br />
<!--大號字-->
<big>今天天氣好</big><br />
<!--着重文字-->
<em>今天天氣好</em><br />
<!--斜體字 物理上把字體傾斜-->
<i>今天天氣好</i><br />
<!--小號字-->
<small>今天天氣好</small><br />
<!--定義加重語氣-->
<strong>今天天氣好</strong><br />
<!--下標字-->
CO<sub>2</sub><br />
<!--上標字-->
孫悟空三打白骨精<sup>①</sup><br />
<!--插入字-->
<ins>今天天氣好</ins><br />
<!--刪除字-->
<del>今天天氣好</del>
3.0 表單標籤
概念：表單可以將頁面上錄入的信息攜帶到服務器端。它是一個包含表單元素的區域。表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、複選框等等）輸入信息的元素。表單使用表單標籤（<form>）定義。
| <form> | 定義供用戶輸入的表單 |
|---|---|
| <input> | 定義輸入域 |
| <textarea> | 定義文本域 (一個多行的輸入控件) |
| <select> | 定義一個選擇列表 |
| <option> | 定義下拉列表中的選項 |
| <button> | 定義一個按鈕 |
3.0.1 輸入標籤
多數情況下被用到的表單標籤是輸入標籤（<input>）。輸入類型是由類型屬性（type）定義的。
name表示控件屬性名稱，value是控件名稱對應的值
下面舉幾個常用的type標籤，要學會舉一反三哦！在其他標籤內有的也是可以用的！
3.0.0.1 文本域（text）
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
3.0.0.2 單選按鈕（radio）
當用戶從若干給定的的選擇中選取其一時，就會用到單選框。
注意：只能從中選取其一。
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
3.0.0.3 複選框（Checkboxes）
當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到複選框。
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
3.0.0.4 提交按鈕（submit）
當用戶需要按鈕提交時，就會用到提交按鈕
<form>
<input type="submit" value="提交"/>
</form>
3.0.0.5 重置按鈕（reset）
當用戶輸入信息想要重置成初始未提交樣子，就會用到重置按鈕
<form>
<input type="reset" value="重置"/>
</form>
3.0.0.6 密碼輸入（password）
當輸入密碼時，會用*代替
<form>
<input type="password" name="password"/>
</form>
3.0.2 選擇列表標籤
select 元素可創建單選或多選菜單。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，並且在將 <select> 表單數據提交給服務器時包括 name 屬性。
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
3.0.3 文本域標籤
<textarea> 標籤定義多行的文本輸入控件。文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。
<textarea rows="3" cols="20">
這是一個文本域！
</textarea>
3.0.4 下拉列表標籤
option 元素定義下拉列表中的一個選項（一個條目）。瀏覽器將 <option> 標籤中的內容作爲 <select> 標籤的菜單或是滾動列表中的一個元素顯示。option 元素位於 select 元素內部。
<select name="city">
<option value="Wuhan" selected="selected">河北</option>
<option value="Xiaogan" >北京</option>
</select>
3.0.5 按鈕標籤
<button> 標籤定義一個按鈕。
<button type="button">按鈕</button>
3.0.6 表單案例
做一個表單在頁面上正常顯示的內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單標籤</title>
</head>
<body>
<!--
外部必須嵌套一個form標籤,只有嵌套這個標籤，瀏覽器上的內容才能夠提交到服務器上！！
name 控件屬性名稱
value 屬性對應的值
selected 默認選擇
placeholder 默認輸入提示內容
checkbox 複選框
file 選擇添加文件
-->
<form>
賬戶：
<!-- 當在賬戶type中加入value="root"時，他會覆蓋placeholder的默認輸入提示內容 -->
<input type="text" name="username" placeholder="請輸入賬戶" />
<br />
密碼：
<input type="password" name="password" placeholder="請輸入密碼" />
<br />
地址：
<select name="city">
<option value="Hebei" selected="selected">河北</option>
<option value="Beijing">北京</option>
</select>
<br />
愛好：
<input type="checkbox" name="hobbys" value="basketball" />籃球
<input type="checkbox" name="hobbys" value="pingpang" />乒乓球
<input type="checkbox" name="hobbys" value="badminton" />羽毛球
<br />
照片：
<input type="file" name="picture" />
<br />
<!--
<input type="submit" /> 將表單的內容提交到服務器
<input type="submit" value="註冊" />
<input type="reset" value="重置" />
注意：input提交按鈕這裏就不用了，下面用button按鈕來實現
-->
<button type="submit">註冊</button>
<button type="reset">重置</button>
</form>
</body>
</html>
3.0.7 表單提交（瀏覽器地址）
表單輸入內容後提交會在瀏覽器的地址欄上拼上你在表單輸入內容字符串
注意： 你有沒有發現地址欄上字符串密碼也顯示了出來呢，所以該提交是不安全的，需要加工處理。這裏只是簡單的提起，後面會重點講到瀏覽器的get和post提交方式
3.0.8 表單標籤小結
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單標籤的總結</title>
</head>
<body>
<!--
賬戶:<input> type="text" value:默認值 placeholder:提示
密碼:<input> type="password" value:默認值 placeholder:提示
性別:<input> type="radio" checked:默認選中 value:默認值
地址：<select>/<option> selected:默認選中
愛好：<input> checkbox
介紹: <textarea></textarea>
提交/重置 :<input> type="submit" , <input> type="reset"
-->
</body>
</html>
三、CSS（層疊樣式表）
3.1 HTML標籤存在的問題
a標籤中是否自帶屬性可以去掉下劃線??html中的a標籤是沒有這個功能吧！這麼說即使有也會產生一系列其他問題的！比如：如果不使用CSS代碼，所有的裝飾代碼都需要寫到html標籤上，維護不方便！而我們編程思想的初衷即是將不同功能的代碼要做分離，高內聚低耦合！！！而現在面臨着脫軌問題！這時候CSS出現了，拯救了HTML！看看CSS如何解決HTML遺留下來的問題吧！
3.2 CSS簡介
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊爲一
3.2.1 CSS優點
- 通過CSS可以定義HTML元素如何顯示 ，解決了HTML在標籤樣式上無法滿足的需求（HTML相當於毛坯房,很多效果達不到，CSS相當於是在毛坯基礎上做精裝修）
- CSS極大的提高了程序員的工作效率
- 使用CSS樣式提高了代碼的清晰度（類似Java中的分包），讓我們將html代碼與樣式代碼分離 ，便於後期維護
3.2 CSS的使用（與HTML的結合方式）
關於CSS層疊樣式表的使用，就是以HTML結合的方式去修飾HTML樣式
- 與HTML的內聯結合
- 與HTML的內部結合
- 與HTML的外部結合
3.2.1 CSS的書寫規範
格式：選擇器 {屬性:屬性值;屬性:屬性值}
選擇器：確定當前css修飾的是哪一個元素
3.2.2 CSS和HTML結合之內聯結合
實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS和html結合之內聯結合</title>
</head>
<body>
<!--
使用font標籤來改變文本的字體大小和字體顏色
font標籤設置字體大小，最大隻能設定爲7.
css內聯代碼:所有的符號必須是在英文半角模式下！！！
在標籤中使用style屬性,格式如下：
style="屬性名1: 屬性值1;屬性名2: 屬性值2"
顏色取值：顏色英文單詞/顏色16進制
-->
<div>
<font style="font-size: 600px; color: #008000;">這是一個div，使用的內聯結合方式實現</font>
</div>
</body>
</html>
- 優缺點
- 優點：簡單方便
- 缺點：複用性差
- 注意：CSS內聯代碼中所有的符號必須是在英文半角模式下
3.2.3 CSS和HTML結合之內部結合
實現
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS和HTML結合之內部結合</title>
<!--
內聯結合：
缺點：不能複用!
優點：簡單！
對少數的特定的元素進行單獨設置！
內部結合
1，需要在head標籤中，使用style標籤
2，使用選擇器選中元素(後面詳細講)
3，編寫css代碼
格式：
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
}
-->
<style>
font{
font-size: 200px;
color: darkgreen;
}
</style>
</head>
<body>
<div>
<!--字體大小爲:200px,字體顏色:綠色-->
<font >這是一個font1</font><br />
<!--字體大小爲:200px,字體顏色:綠色-->
<font >這是一個font2</font><br />
<!--字體大小爲:200px,字體顏色:紅色-->
<font style="color: red;">這是一個font3</font><br />
</div>
</body>
</html>
- 優缺點
- 優點：可以對多個標籤進行統一樣式設置
- 缺點：只能作用於當前頁面
3.2.4 CSS和HTML結合之外部結合
實現
- 新建一個css樣式文件
- 使用link標籤引入外部樣式文件
<!-- CSS文件 -->
font{
font-size: 200px;
color: greenyellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS和html結合之外部結合</title>
<link rel="stylesheet" href="css/css01.css" />
<!--
外部結合方式：
1，新建一個css樣式文件
2，編寫css代碼
3，在html文件中引入css外部文件 ,使用link標籤引入
優點：複用性高！簡單！
-->
</head>
<body>
<div>
<!--字體大小爲:200px,字體顏色:綠色-->
<font >這是一個font1</font><br />
<!--字體大小爲:200px,字體顏色:綠色-->
<font >這是一個font2</font><br />
<!--字體大小爲:200px,字體顏色:紅色-->
<font >這是一個font3</font><br />
</div>
</body>
</html>
- 優缺點
- 優點：複用性高！簡單！
3.2.5 CSS與HTML結合方式小結
| CSS與HTML結合方式 | 優點 | 缺點 |
|---|---|---|
| 內聯結合 | 簡單方便 | 複用性差 |
| 內部結合 | 可以對多個標籤進行統一樣式設置 | 只能作用與當前頁面，不具有普適性 |
| 外部結合 | 複用性高！簡單！具有普適性 | 無 |
<!--
內聯結合：
缺點：不能複用!
優點：簡單！
對少數的特定的元素進行單獨設置！
內部結合：
1，需要在head標籤中，使用style標籤
2，使用選擇器選中元素(後面詳細講)
3，編寫css代碼
格式：
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
}
缺點：複用性不高！css代碼和html代碼分離不徹底！
優點：簡單！
外部結合方式：
1，新建一個css樣式文件
2，編寫css代碼
3，在html文件中引入css外部文件 ,使用link標籤引入
優點：複用性高！簡單！
以上三種結合方式中，推薦用誰？
三種都有用！
外部結合方式！！
html中的相對路徑!!!
-->
3.3 CSS路徑問題
- 訪問路徑：
- 絕對路徑：不帶協議的絕對路徑/帶協議的絕對路徑（絕對路徑是從盤符開始的路徑，是一種簡化版的路徑，以當前文件，活動窗口目錄爲根目錄，進行向上或者向下）
- 相對路徑：相對於index.html資源去訪問css01.css資源（相對路徑是從當前路徑開始的路徑，就是真實的路徑，是計算機中完整路徑，必須準確，否則不能找到，起點是系統的根目錄，也就是各個盤符 ）
- CSS中訪問路徑：比如：http://127.0.0.1:8020/index.html
- / 代表文件所在的根目錄
./ 代表文件所在當前目錄（./ 可以省略 ，即：css/css01.css）；意爲在index.html的同一個目錄下訪問css文件夾下的css01.css- …/ 代表上一級目錄
- …/…/ 代表文件所在的父級目錄的父級目錄
四、CSS選擇器
4.1 CSS選擇器簡介與分類
要使用CSS對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器 。HTML頁面中的元素就是通過CSS選擇器進行控制的。
選擇器分類： id選擇器、類選擇器、元素選擇器（標籤）、選擇器的分組、衍生選擇器（派生）
4.2 CSS選擇器的書寫規範
不管是css和html的內聯、內部結合還是外部結合，而選擇器是讓開發者能夠選定元素進行樣式的規劃
<!--
選擇器{
屬性名:屬性值;
}
id選擇器：引用的是id屬性值
#id屬性值{
屬性名:屬性值;
}
-->
4.3 類選擇器
類選擇器：使用”.”來描述，引用的的是元素上的class屬性值 ，用於處理多個元素有相同樣式效果的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>類選擇器</title>
<!--
類選擇器:引用的是class屬性值
格式：
.class屬性值{
屬性名:屬性值;
}
處理多個元素有相同樣式效果的！！！
-->
<style>
font{
font-size: 200px;
}
.one{
color: greenyellow;
}
.two{
color: red;
}
.three{
color: pink;
}
</style>
</head>
<body>
<!--字體顏色：綠-->
<font class="one">this is font one</font><br />
<font class="one">this is font two</font><br />
<!--字體顏色：紅-->
<font class="two">this is font three</font><br />
<font class="two">this is font one</font><br />
<!--字體顏色：粉-->
<font class="three">this is font three</font><br />
<font class="three">this is font two</font><br />
</body>
</html>
4.4 ID選擇器
id選擇器：它使用#引入，引用的是元素的id屬性值
<head>
<style type="text/css">
#div1 {
font‐size: 20px;
color: red;
}
#div2 {
font‐size: 10px;
color: blue;
}
</style>
</head>
<body>
<div id="div1">這是一個div</div>
<div id="div2">這是一個div</div>
</body>
4.5 標籤選擇器
標籤選擇器：對頁面上的標籤進行統一的設置，引用的就是標籤的名稱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標籤選擇器</title>
<!--
標籤選擇器/元素選擇器
格式：
標籤名{
屬性名:屬性值;
}
將font標籤中的文本顏色修改爲紅色
將span標籤中的文本顏色修改爲藍色
將div標籤中的文本顏色修改爲綠色
所有的文本大小都爲300px
-->
<style>
body{
font-size: 200px;
}
font{
color: red;
}
span{
color: blue;
}
div{
color: green;
}
</style>
</head>
<body>
<font>this is a font</font><br />
<span>this is a span</span><br />
<font>this is a font</font><br />
<div>this is a div</div><br />
<span>this is a span</span><br />
<font>this is a font</font><br />
<div>this is a div</div><br />
</body>
</html>
4.6 選擇器的分組
選擇器的分組：多個選擇器使用同一段css,那麼就可以使用分組。選擇器之間使用逗號分開
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分組選擇器</title>
<!--
選擇器分組:如果多個選擇器中的css代碼相同，那麼就可以將這多個選擇器劃爲一組。
格式：
id選擇器,class選擇,元素選擇器{
屬性名:屬性值;
}
font/span/div中的文本內容字體大小爲200px,字體顏色爲綠色
-->
<style>
#f1,.s1,div{
font-size: 200px;
color: green;
}
</style>
</head>
<body>
<font id="f1">this is a font</font><br>
<span class="s1">this is a span</span><br>
<div>this is a div</div><br>
</body>
</html>
4.7 衍生選擇器（派生、上下文）
衍生選擇器：通過依據元素在其位置的上下文關係來定義，可以使標記更加簡潔。也稱爲上下文選擇器
書寫規範：父標籤名(父id,父類名) 子標籤名(子id,子類名){ 樣式代碼; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>衍生選擇器</title>
<!--
衍生選擇器/上下文選擇器:依據元素所在的位置進行元素的選擇
格式：
父選擇器 子選擇器{
屬性名:屬性值;
}
父選擇器：可以是id選擇器、class選擇器、元素選擇器
子選擇器：可以是id選擇器、class選擇器、元素選擇器
需求：設置span中的font中內容樣式。不準用id選擇器、內聯、class選擇器
先找到span,再找到font
-->
<style>
span font{
font-size: 200px;
color: blue;
}
</style>
</head>
<body>
<span>
<font>這是一個font</font>
</span>
<div>
<font>這也是一個font</font>
</div>
</body>
</html>
4.8 選擇器的優先級
內聯結合方式 > ID選擇器 > 類選擇器 > 元素選擇器
規律： 作用範圍越小，優先級越大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器的優先級</title>
<style>
/*
優先級:內聯樣式 > id選擇器 > 類選擇器 > 標籤選擇器
規律：作用範圍越小，優先級越大！！！
*/
/*標籤選擇器*/
font{
font-size: 50px;
color: yellow;
}
/*類選擇器*/
.clazz{
font-size: 150px;
color: orange;
}
/*id選擇器*/
#id1{
font-size: 250px;
color: orangered;
}
</style>
</head>
<body>
<!--內聯樣式-->
<font id="id1" class="clazz" style="font-size: 350px; color: red;">
這是一個font
</font>
</body>
</html>
4.9 CSS僞類選擇器
實現
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
注意：a:hover 必須被置於 a:link 和 a:visited 之後；a:active 必須被置於 a:hover 之後
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS僞類</title>
<!--
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
注意事項： a:hover 必須被置於 a:link 和 a:visited 之後
a:active 必須被置於 a:hover 之後
-->
<style>
a:link {
/* 未訪問的鏈接 */
color: cornflowerblue;
}
a:visited {
/* 已訪問的鏈接 */
color: red;
}
a:hover {
/* 鼠標移動到鏈接上 */
color: orange;
}
a:active {
/* 選定的鏈接 */
color: green;
}
font:hover{
color: green;
/* 鼠標移動到字體上會變大至100px */
font-size: 100px;
}
button{
background-color: orange;
}
button:hover{
background-color: orangered;
}
</style>
</head>
<body>
<a href="index.html">this is a super</a><br />
<font>this is a font element</font><br />
<button>按鈕</button><br />
</body>
</html>
五、CSS屬性設置
5.1 CSS字體屬性
CSS 字體屬性允許您設置字體系列 (font-family) 和字體加粗 (font-weight)，您還可以設置 字體的大小、字體風格（如斜體）和字體變形（如小型大寫字母）
5.1.1 常用字體屬性
| 屬性 | 描述 |
|---|---|
| font | 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。 |
| font-family | 設置字體系列。 |
| font-size | 設置字體的尺寸。 |
| font-style | 設置字體風格。 |
| font-variant | 以小型大寫字體或者正常字體顯示文本。 |
| font-weight | 設置字體的粗細。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中的字體屬性</title>
<!--
font-family:
微軟雅黑、楷體、宋體、仿宋。如果瀏覽器不支持字體系列，就會使用默認的字體系列(微軟雅黑!)，比如：草書
font-size:
字體大小
font-style:
字體傾斜度
font-weight:
字體的粗細
-->
<style>
span{
font-family: "草書";
font-size: 100px;
font-style: oblique;
font-weight: bolder;
}
</style>
</head>
<body>
<span>這是一個span標籤</span>
</body>
</html>
5.2 CSS文本屬性
可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
5.2.1 常用文本屬性
| 屬性 | 描述 |
|---|---|
| color | 設置文本顏色 |
| direction | 設置文本方向 |
| line-height | 設置行高 |
| letter-spacing | 設置字符間距 |
| text-align | 對齊元素中的文本 |
| text-decoration | 向文本添加修飾 |
| text-indent | 縮進元素中文本的首行 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 設置文本方向 |
| white-space | 設置元素中空白的處理方式 |
| word-spacing | 設置字間距 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS文本屬性</title>
<!--
css文本屬性
左邊調到右邊、右邊調到左邊
direction:
ltr: left to right
rtl: right to left
line-height:
行高
text-align:
文本的對齊方式
text-decoration
文本裝飾 underline none line-through
letter-spacing
字符間距,字符與字符之間的間距
word-spacing:
單詞間距,單詞與單詞之間的間距
-->
<style>
div{
font-size: 50px;
color: gray;
direction: ltr;
text-align: left;
text-decoration: none;
}
a{
font-size: 50px;
text-decoration: none;
}
</style>
</head>
<body>
<div>
這是一個div
</div>
<a href="index.html">超鏈接</a>
</body>
</html>
5.2.2 文本屬性之字符間距和單詞間距的區別
字符間距（letter-spacing）是每一個字符之間有間隔距離
單詞間距（word-spacing）是每一個英文單詞之間有間隔距離
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文本屬性之字符間距和單詞間距的區別</title>
<style>
div{
font-size: 30px;
/*letter-spacing: 10px;*/
word-spacing: 100px;
}
</style>
</head>
<body>
<div>
this is a div
</div>
</body>
</html>
5.2.3 字體屬性和文本屬性小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本屬性及字體屬性綜合練習</title>
<!--
標題：字號2em，顏色紅色，居中，楷體，加粗
內容：字號1.2em，顏色黑色，居左，宋體，首行縮進2em，行高2em，字符間距0.1em
-->
<style>
body{
background-image: url(img/Saying.png);
background-size: cover;
}
#title{
font-size: 2em;
font-weight: bolder;
color: red;
text-align: center;
font-family: "楷體";
}
.content{
font-size: 1.2em;
color: black;
text-align: left;
font-family: "宋體";
text-indent: 2em;
line-height: 2em;
letter-spacing: 0.1em;
font-weight: bolder;
}
.foot{
text-align: right;
color: black;
font-family: "楷體";
font-weight: bolder;
letter-spacing: 0.1em;
}
</style>
</head>
<body>
<p id="title">
持續努力，變平凡爲不凡：
</p>
<p class="content">
夢想與現實之間的巨大落差常令人煩躁不安。然而，人生就是”今天”的不斷積累，就是“現在”這一刻的不斷延續，如此而已。
</p>
<p class="content">
然而，不錯過今天，認真工作就能看清明天，明天再認真工作就能看清後面的一週，一週認真工作，就能看清後面的一月…
就是說，即使不去探索遙遠的未來，只要全身貫注於眼前的每一個瞬間，以前看不清楚的未來的景象就會自然地呈現在你眼前。
</p>
<p class="content">
與其莫名其妙爲明天而煩惱，與其苦思冥想去制定長遠的計劃，還不如全力過好今天這一天。這纔是實現理想最切實的辦法。
</p>
<p class="foot">
----稻盛和夫《活着》
</p>
</body>
</html>
5.3 CSS背景屬性
CSS 允許應用純色作爲背景，也允許使用背景圖像創建相當複雜的效果。
5.3.1 常用背景屬性
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設置在一個聲明中 |
| background-attachment | 背景圖像是否固定或者隨着頁面的其餘部分滾動 |
| background-color | 設置元素的背景顏色 |
| background-image | 把圖像設置爲背景 |
| background-position | 設置背景圖像的起始位置 |
| background-repeat | 設置背景圖像是否及如何重複 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css背景屬性</title>
<!--
background-color:將顏色作爲背景
backgrount-image:將圖片作爲背景
同時設置圖片會覆蓋背景顏色
-->
<style>
body{
background-color: green;
color: red;
font-size: 20px;
/* 設置背景圖片後會覆蓋背景顏色 */
/* background-image: url(img/motivational.png); */
background-size: cover;
}
</style>
</head>
<body>
青青草原我最帥
</body>
</html>
5.4 CSS尺寸屬性
CSS 尺寸 (Dimension)屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。CSS 尺寸屬性允許你控制元素的高度和寬度。同樣，還允許你增加行間距。
5.4.1 常用尺寸屬性
| 屬性 | 描述 |
|---|---|
| height | 設置元素的高度 |
| line-height | 設置行高 |
| max-height | 設置元素的最大高度 |
| max-width | 設置元素的最大寬度 |
| min-height | 設置元素的最小高度 |
| min-width | 設置元素的最小寬度 |
| width | 設置元素的寬度 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css尺寸屬性</title>
<!--
注意：css尺寸屬性對行內元素無效
但是圖片屬於特殊的行內元素，對它有效
我們可以使用display屬性設置行內元素和塊狀元素
block：塊狀元素
inline：行內元素
inline-block：既有行內元素的特徵也有塊狀元素的特徵
當我們設置的高度、寬度等超過了最大或最小值後，它會默認設置到最大或最小值，不會超出最大最小值範圍！
這裏我們不細講行內和塊狀元素，後面會重點講到！
-->
<style>
#d1{
min-width: 100px;
max-width: 300px;
min-height: 100px;
max-height: 300px;
background-color: red;
display: inline-block;
}
</style>
</head>
<body>
<font id="d1">這是一個font</font>
<!-- 圖片屬於特殊的行內元素 -->
<img src="img/Saying.png" id="d1" />
<!-- <span id="d1">這是一個span</span> -->
<!-- <div id="d1">這是一個div</div> -->
</body>
</html>
5.5 CSS列表屬性
CSS 列表屬性允許你放置、改變列表項標誌，或者將圖像作爲列表項標誌。
5.5.1 常用列表屬性
| 屬性 | 描述 |
|---|---|
| list-style | 簡寫屬性，用於把所有用於列表的屬性設置於一個聲明中 |
| list-style-image | 將圖象設置爲列表項標誌 |
| list-style-position | 設置列表中列表項標誌的位置 |
| list-style-type | 設置列表項標誌的類型 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css列表屬性</title>
<!--
list-style-image 將圖像設置爲列表項標誌
list-style-position 設置列表中列表項標誌的位置
list-style-type 設置列表項標誌的樣式
-->
<style>
ul{
/* 文本內容的對齊方式 */
text-align: center;
list-style-image: url(img/a.gif);
/* 空心圓點 */
/* list-style-type: circle; */
/* 注意：設置對齊方式之後列表項標誌不會隨之移動，需要設置位置，纔會同步移動 */
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>Ziph</li>
<li>Join</li>
<li>Marry</li>
</ul>
</body>
</html>
5.6 CSS邊框屬性
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border 屬性允許你規定元素邊框的樣式、
寬度和顏色。
5.6.1 常用邊框屬性
| 屬性 | 描述 |
|---|---|
| border | 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明 |
| border-style | 用於設置元素所有邊框的樣式，或者單獨地爲各邊設置邊框樣式 |
| border-width | 簡寫屬性，用於爲元素的所有邊框設置寬度，或者單獨地爲各邊邊框設置寬度 |
| border-color | 簡寫屬性，設置元素的所有邊框中可見部分的顏色，或爲 4 個邊分別設置顏色 |
| border-bottom | 簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中 |
| border-bottom-color | 設置元素的下邊框的顏色 |
| border-bottom-style | 設置元素的下邊框的樣式 |
| border-bottom-width | 設置元素的下邊框的寬度 |
| border-left | 簡寫屬性，用於把左邊框的所有屬性設置到一個聲明中 |
| border-left-color | 設置元素的左邊框的顏色 |
| border-left-style | 設置元素的左邊框的樣式 |
| border-left-width | 設置元素的左邊框的寬度 |
| border-right | 簡寫屬性，用於把右邊框的所有屬性設置到一個聲明中 |
| border-right-color | 設置元素的右邊框的顏色。 |
| border-right-style | 設置元素的右邊框的樣式 |
| border-right-width | 設置元素的右邊框的寬度 |
| border-top | 簡寫屬性，用於把上邊框的所有屬性設置到一個聲明中 |
| border-top-color | 設置元素的上邊框的顏色 |
| border-top-style | 設置元素的上邊框的樣式 |
| border-top-width | 設置元素的上邊框的寬度 |
| border-radius | 設置圓角邊框 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css邊框屬性</title>
<style>
body{
text-align: center;
}
#d1{
/* 所有邊框樣式設置 */
border: dotted red 2px;
/*
左邊框
樣式：點狀
顏色：綠色
寬度5px
*/
border-left-style: dotted;
border-left-color: green;
border-left-width: 5px;
/* 同理如下（簡寫）： */
/* border: dotted green 5px; */
/*
上邊框
樣式：虛線
顏色：紅色
寬度5px
*/
border-top-style: dashed;
border-top-color: green;
border-top-width: 5px;
/*
右邊框
樣式：實線
顏色：紫色
寬度5px
*/
border-right-style: solid;
border-right-color: purple;
border-right-width: 5px;
/*
下邊框
樣式：雙實線
顏色：藍色
寬度5px
*/
border-bottom-style: double;
border-bottom-color: blue;
border-bottom-width: 5px;
}
</style>
</head>
<body>
<img id="d1" src="img/kuli.png" />
</body>
</html>
圓角邊框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css圓角邊框</title>
<style>
/*
圓角邊框是在圖片的四個角用同一個半徑相同的圓來切成的！（數學的內切圓原理）
而我們提供的即是內切圓的半徑（像素值、百分比）
*/
img{
border-radius: 50px;
/* border-radius: 50%; */
}
</style>
</head>
<body>
<img src="img/kuli.png" />
</body>
</html>
六、CSS盒子模型
6.1 盒子模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的尺寸。
注意：內邊距和外邊距的值可以是負數 ；在頁面上，設置margin-right無效，因爲元素默認是左對齊，不管怎麼設置元素都是左對齊，所以將元素設置爲右對齊就可以看到效果，float:right。
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置爲 70 像素，請看下圖：
6.1.1 盒子模型的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css盒子模型基本使用</title>
<!--
內邊距：邊框到元素內容的距離
padding:同時設置左上右下內邊距
padding-left/padding-top/padding-right/padding-bottom
外邊距：邊框到其他元素的距離
margin:同時設置左上右下外邊距
margin-left/margin-top/margin-right/margin-bottom
瀏覽器：元素進行渲染的時候，是從左往右進行渲染，
相當於現實生活中，排隊買東西，margin-right告訴最後一個人，離下一個人要有200米遠
-->
<style>
body{
float: right;
}
img{
width: 200px;
height: 100px;
border: 5px solid blue;
}
#img1{
/* padding: 10px; */
margin: 50px;
}
#img3{
/* padding-top: 20px; */
/* margin-left: 150px; */
margin-right: 200px;
}
</style>
</head>
<body>
<img id="img1" src="img/girl01.jpg" />
<img id="img2" src="img/girl02.jpg" />
<img id="img3" src="img/girl03.jpg" />
</body>
</html>
6.2 CSS盒子定位介紹
CSS 定位 (Positioning) 屬性允許你對元素進行定位。
6.2.1 CSS定位和浮動
CSS 爲定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。
6.2.2 常用的盒子定位屬性
CSS定位屬性允許你對元素進行定位
| 屬性 | 描述 |
|---|---|
| position | 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中 |
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移 |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移 |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移 |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移 |
| overflow | 設置當元素的內容溢出其區域時發生的事情。 |
| clip | 設置元素的形狀。元素被剪入這個形狀之中，然後顯示出來 |
| vertical-align | 設置元素的垂直對齊方式 |
| z-index | 設置元素的堆疊順序 |
6.2.3 CSS position（定位） 值類型
position 屬性規定元素的定位類型。
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 |
| relative | 生成相對定位的元素，相對於其正常位置進行定位。 因此，“left:20” 會向元素的 LEFT 位置添加 20 像素。 |
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
6.3 CSS固定定位
CSS 定位 (Positioning) 屬性允許你對元素進行定位。
CSS固定定位其實很常見，就比如說，我們在網頁上瀏覽時，有時候右下角會彈出一些不明圖片。你會發現圖片可以點擊去，細心的你們也會發現圖片的右上角右一個×，當我們點擊×的時候這個不明圖片廣告並不會關閉，而是被你打開了！所有這是一個虛擬的❌！所有這個不明廣告時不能關閉的，你瀏覽網頁上下滑動時，他的位置依然不變，像這種流氓廣告就是CSS固定定位的產物！其實實現起來很簡單，就讓我們來看一下這流氓時怎麼實現的吧！Come on baby！如果你下載我的代碼筆記，也可以去看一下這個代碼的！其中的img是美女哦！點進去也是驚喜！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css定位屬性概念</title>
<!--
css定位
position：固定(fix)、相對relative、絕對absolute、靜態static
left：對元素進行左偏移
top：對元素進行上偏移
right：對元素進行右偏移
bottom：對元素進行下偏移
-->
<style>
img{
position: fixed;
width: 350px;
height: 200px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/weixin_44170221"><img src="img/girl01.jpg" /></a>
<p>這是一個流氓廣告頁面！</p>
</body>
</html>
6.4 CSS相對定位
相對定位(relative) 屬性如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。
溫馨提示： 設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。相對於原來的位置進行偏移！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css相對定位</title>
<!--
設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。
相對於原來的位置進行偏移！！！
-->
<style>
#s1{
background-color: red;
}
#s2{
/* 實際上span2在原本位置基礎上向下移動了20px，向右移動了20px */
background-color: orange;
position: relative;
top: 20px;
left: 20px;
}
#s3{
background-color: yellow;
}
</style>
</head>
<body>
<span id="s1">
這是span1
</span>
<span id="s2">
這是span2
</span>
<span id="s3">
這是span3
</span>
</body>
</html>
6.5 CSS絕對定位
絕對定位(absolute) 的元素的位置相對於最近的已定位父元素。
溫馨提示：絕對定位並不會在原有位置佔用空間，這點與相對定位不同。 並相對於其包含塊定位，元素原來在正常文檔流中所佔的空間會關閉。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css絕對定位</title>
<!--
並相對於其包含塊定位，
元素原來在正常文檔流中所佔的空間會關閉
-->
<style>
#s1{
background-color: red;
}
#s2{
/* 注意：原來的位置被span3替換了過來（它原來在文檔流中的空間被關閉了，也就是沒有了！） */
background-color: orange;
position: absolute;
top: 50px;
left: 50px;
}
#s3{
background-color: yellow;
}
</style>
</head>
<body>
<span id="s1">
這是span1
</span>
<span id="s2">
這是span2
</span>
<span id="s3">
這是span3
</span>
</body>
</html>
6.6 CSS浮動
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。 由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
6.6.1 浮動的多種方式與問題
當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因爲它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
6.6.2 浮動行框和清理
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，創建浮動框可以使文本圍繞圖像：
要想阻止行框圍繞浮動框，需要對該框應用clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨着浮動框。
爲了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
這種情況下，出現了一個問題。因爲浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不佔據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了一個新的問題，由於沒有現有的元素可以應用清理，所以我們只能添加一個空元素並且清理它。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
這樣可以實現我們希望的效果，但是需要添加多餘的代碼。常常有元素可以應用 clear，但是有時候不得不爲了進行佈局而添加無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。爲了解決這個問題，有些人選擇對佈局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助於減少或消除不必要的標記。
6.7 CSS clear 屬性
clear 屬性規定元素的哪一側不允許其他浮動元素。clear 屬性定義了元素的哪邊上不允許出現浮動元素。
6.7.1 常用clears值
| 值 | 描述 |
|---|---|
| left | 在左側不允許浮動元素 |
| right | 在右側不允許浮動元素 |
| both | 在左右兩側均不允許浮動元素 |
| none | 默認值。允許浮動元素出現在兩側 |
| inherit | 規定應該從父元素繼承 clear 屬性的值 |
七、CSS塊級元素和行內元素
7.1 CSS塊級元素和行內元素介紹
塊級元素 ：塊級元素前後會帶有換行符，佔用一整行 。常見的塊級元素：div
行內元素 ：行內元素前後沒有換行符，只包裹內容 。常見的行內元素：span ；margin-top、margin-bottom、padding-top、padding-bottom設置無效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css塊級元素和行內元素</title>
<!--
1,行內元素:元素僅僅包裹內容,常見：span
padding-top/padding-bottom , margin-top/margin-bottom 存在問題設置無效
2,塊級元素:佔滿整一行,常見:div
-->
<style>
div{
background-color: yellow;
/* 修改爲行內元素*/
display: inline;
padding: 10px;
margin-top: 100px;
}
span{
background-color: greenyellow;
margin-top: 100px;
/* 將span標籤修改爲塊級元素*/
display: block;
}
</style>
</head>
<body>
<div>
這是div
</div>
<span>
這是span
</span>
</body>
</html>
八、CSS伸縮佈局flex
8.1 CSS伸縮佈局的介紹（flex）
CSS3在佈局方面做了非常大的改進，使得我們對塊級元素的佈局排列變得十分靈活，適應性非 常強，其強大的伸縮性，在響應式開發中可以發揮極大的作用。
主軸(main axis)：flex容器的主軸主要用來分配flex子元素，默認是水平方向（row）
側軸(cross axis)：與主軸垂直的軸稱爲側軸，默認是垂直方向 （colum）
8.2 伸縮佈局入門案例
8.2.1 伸縮佈局入門案例一
需求：完成以下圖示佈局，左邊是菜單欄（40%），右邊是內容欄（60%），高度填充整個屏幕。
注意：html標籤和body標籤的height默認都不是100%,需要進行設置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS伸縮佈局入門案例一</title>
<!--
完成以下圖示佈局，左邊是菜單欄（40%），右邊是內容欄（60%），高度填充整個屏幕。
瀏覽器 -> html -> body > container -> left/right
-->
<style>
html{
height: 100%;
}
body{
/*按照父容器的高度的100%進行設定*/
height: 100%;
margin: 0px;
}
#container{
display: flex;
/* 按照父容器的高度的100%進行設定 */
height: 100%;
}
#left{
background-color: indianred;
width: 40%;
/* 按照父容器的高度的100%進行設定 */
height: 100%;
}
#right{
background-color: cornflowerblue;
width: 60%;
height: 100%;
</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
8.2.2 伸縮佈局入門案例二
需求：完成以下圖示佈局，上邊是菜單欄（40%），下邊是內容欄（60%），寬度填充整個屏幕。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS伸縮佈局入門案例二</title>
<!--
完成以下圖示佈局，上邊是菜單欄（40%），下邊是內容欄（60%），寬度填充整個屏幕。
-->
<style>
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
}
#container{
display: flex;
/* 改變主軸方向 */
flex-direction: column;
height: 100%;
}
#top{
background-color: orange;
height: 40%;
}
#bottom{
background-color: dodgerblue;
height: 60%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">top</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
OK！下一章Tomact和Http持續更新！