教程揭秘 | 動力節(jié)點內(nèi)部Java零基礎(chǔ)教學(xué)文檔第四篇：HTML_CSS_JavaScript（1）
接上期后續(xù)
本期分享第四章節(jié)-CSS
三章都有已經(jīng)分享完了，大家都跟上了嗎？
跟上的我就不得不說真厲害~
沒跟上的要加油了！
但時間還久，后面要學(xué)還有很多~
大家需保持耐心慢慢來
爭取你們學(xué)習(xí)的速度！
跟上我更新的速度哦~?
今日新篇章
【CSS】
【主要內(nèi)容】
1.?CSS簡介
2.?CSS基礎(chǔ)語法
3.?CSS選擇器
4.?CSS常用屬性
5.?CSS元素分類
6.?CSS定位
【學(xué)習(xí)目標(biāo)】
1.?CSS的簡介
1.1?CSS定義與解釋
CSS是Cascading Style Sheets（層疊樣式表單）的簡稱，CSS就是一種叫做樣式表（stylesheet）的技術(shù)。它用于定義HTML元素的顯示形式，是一種格式化網(wǎng)頁內(nèi)容的技術(shù)。CSS現(xiàn)在已經(jīng)被大多數(shù)瀏覽器所支持，成為網(wǎng)頁設(shè)計者必須掌握的技術(shù)之一。
W3C自1996年12月發(fā)布第一個CSS正式推薦版CSS 1.0以來，一直在對CSS標(biāo)準(zhǔn)進行修訂、升級。1999年1月，CSS 2.0 正式推薦版發(fā)布，增加了對其它媒體（打印機、視覺設(shè)備）、可下載字體、元素定位和表格的支持。最新標(biāo)準(zhǔn)的CSS 3.0已經(jīng)發(fā)部，其主要的影響是可以使用新的可用的選擇器和屬性，這些會允許你實現(xiàn)新的設(shè)計效果（譬如動態(tài)和漸變），而且可以很簡單的設(shè)計出以前需要JavaScript才能設(shè)計出來的效果。
1.2?CSS替我們解決什么問題
通過前面我們知道CSS也只是一個技術(shù)或一個東西的代名詞，那究竟CSS作用是什么，CSS能幫我們解決什么問題呢？
DIV + CSS 作用與解決問題：
1.?CSS技術(shù)幫我們控制網(wǎng)頁中的字體大小、頁面寬度、頁面內(nèi)容靠左靠右、字體樣式、某些網(wǎng)頁里區(qū)域背景圖片、背景顏色、超鏈接鼠標(biāo)事件樣式、圖片居中、文字居中、網(wǎng)頁中內(nèi)容板塊間隔等樣式。
2.?CSS的最核心作用：實現(xiàn)將內(nèi)容與表現(xiàn)形式相分離。
2.?CSS基礎(chǔ)語法
2.1?CSS語法
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
選擇器 { 屬性1: 值1; 屬性2: 值2; ... 屬性N: 值N; }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成，屬性和值用冒號(“?:?”)分開，多條聲明用分號(“?;?”)分開。
下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色，同時將字體大小設(shè)置為 14 像素。
在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color: red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結(jié)構(gòu)：
?2.2?引入樣式方式
2.2.1?行內(nèi)樣式（內(nèi)聯(lián)樣式）??css樣式的個數(shù)<=3
使用該屬性可以直接指定樣式，當(dāng)然，該樣式僅能用于該元素的內(nèi)容，對于另一個同名的元素則不起作用。
1、樣式的屬性內(nèi)容直接跟在將要修飾的文字標(biāo)記里
2、具體格式： style="color: red; font-size: 14px"
<p style="color: red; font-size: 14px">我是一個p標(biāo)簽</p>
2.2.2?內(nèi)部樣式（嵌入式）??3<css樣式的個數(shù)<=10
用戶可在HTML文檔頭部定義多個style元素，實現(xiàn)多個樣式表。
<style?type=”text/css”>
????body {
????????/*設(shè)置背景顏色*/
????????background-color: yellow;
????}
????h1 {
????????/*設(shè)置字體顏色*/
????????color: blue;
????????/*設(shè)置字體大小*/
????????font-size: 30px;
????}
</style>
CSS的注釋和HTML的注釋不太一樣，CSS的注釋是以 "/* " 開頭，以" */ "結(jié)尾，快捷注釋和HTML一樣都是 Ctrl + / 或 Ctrl + Shift + /
2.2.3?外部樣式（外鏈?zhǔn)剑?/span>??css樣式的個數(shù)>10
1、可以在多個文檔間共享樣式表，對于較大規(guī)模的網(wǎng)站，將CSS樣式定義獨立成一個一個的文檔，可有效地提高效率，并有利于對網(wǎng)站風(fēng)格的維護。
2、可以改變樣式表，而無需更改HTML文檔，這也與HTML語言內(nèi)容與形式分開的原則相一致。
3、可以根據(jù)介質(zhì)有選擇的加載樣式表。
<head>
????<meta charset="UTF-8">
????<title>CSS層疊樣式表</title>
????<!--引入外部的層疊樣式表，href指向的是需要加載樣式表的.css文件-->
????<link rel="stylesheet" href="css/index.css">
</head>
2.3?樣式的優(yōu)先級
多重樣式：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況。
樣式優(yōu)先級總結(jié)：誰離得近，誰優(yōu)先級高！行內(nèi)樣式優(yōu)先級最高！
3.?CSS參考手冊
3.1?長度單位
l?絕對長度單位：絕對長度值最好用于打印輸出設(shè)備，而在僅僅作為屏幕顯示用時，絕對長度值并無多大意義。
3.2?顏色單位
顏色是通過對紅（red）、綠(green)和藍(blue)光的組合來顯示的。
1、RGB 顏色值是這樣規(guī)定的：rgb(red, green, blue)，每個參數(shù) (red、green 以及 blue) 定義顏色的強度，可以是介于 0 與 255 之間的整數(shù)，或者是百分比值（從 0% 到 100%）。
2、十六進制顏色是這樣規(guī)定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍色）十六進制整數(shù)規(guī)定了顏色的成分。所有值必須介于00 到 FF（255的十六進制是 FF） 之間。
3.3?相對路徑與絕對路徑
在Web開發(fā)中，插入圖片、包含CSS文件等都需要有路徑，如果文件路徑的添加錯誤，就會導(dǎo)致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)。那么接下來我們就詳細的介紹一下相對路徑與絕對路徑。
相對路徑：以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑。
絕對路徑：以磁盤上的地址構(gòu)成的路徑為絕對路徑，意指當(dāng)所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的。
??相對路徑的使用
以下為建立路徑所使用的幾個特殊符號，及其所代表的意義。
“.”–代表目前所在的目錄。
“..”–代表上一層目錄。
假設(shè)項目有如下圖所示目錄路徑:
假若要在index.html文件中引用bg.jpg文件時，其相對路徑如下：
<body>
????<img src="./img/bg.jpg" alt="">
????/*也可以省略 "./" 直接用以下這個方式引用*/
????<img src="img/bg.jpg" alt="">
</body>
假若要在login.html文件中引用bg.jpg文件時，其相對路徑如下：
<body>
????<img src="../img/bg.jpg" alt="">
</body>
4.?CSS選擇器
首先CSS選擇器分這么幾大類：基礎(chǔ)選擇器、關(guān)系選擇器、屬性選擇器、偽類選擇器等。
4.1?基礎(chǔ)選擇器
基礎(chǔ)選擇器包含：標(biāo)簽選擇器、class選擇器、id選擇器和通配符選擇器。
4.1.1?標(biāo)簽選擇器
HTML標(biāo)簽是最典型的選擇器類型，任何一個HTML元素都可以做為選擇器。
如果設(shè)置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
html { background-color: yellow; }
h1 { color: blue; }
h2 { color: red; }
標(biāo)簽選擇器的有效范圍為頁面中所有的、名稱相同的HTML元素。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????p {
????????????color: blue;
????????????font-size: 18px;
????????????background-color: yellow;
????????}
????</style>
</head>
<body>
????<p>我是第一個p標(biāo)簽</p>
????<p>我是第二個p標(biāo)簽</p>
????<p>我是第三個p標(biāo)簽</p>
</body>
</html>
4.1.2?類選擇器
第一步：給需要選中的元素添加class屬性
第二步：選中該元素再添加樣式?.類名 { 屬性: 值; }
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS層疊樣式表</title>
????<style>
????????.tag {
????????????color: blue;
????????}
????</style>
</head>
<body>
????<h1 class="tag">我是標(biāo)題</h1>
????<div class="tag">我是一個div</div>
</body>
</html>
4.1.3?id選擇器
第一步：給需要選中的元素添加id屬性
第二步：選中該元素?#id名 { 屬性: 值; }
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????#title {
????????????color: blue;
????????}
????????#block {
????????????/*文字居中*/
????????????text-align: center;
????????????color: red;
????????}
????</style>
</head>
<body>
????<h1 id="title">我是標(biāo)題</h1>
????<div id="block">我是一個div</div>
</body>
</html>
注意：id與類選擇器的概念相似，只是ID選擇器只能被引用一次，而類選擇器可以被多次引用。
4.1.4?通配符選擇器
在CSS中，使用 * 代表所有的標(biāo)簽或元素，它叫做通配符選擇器。
比如：* { color : red; } 這里就把所有元素的字體設(shè)置為紅色。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????* {
????????????color: red;
????????}
????</style>
</head>
<body>
????<h1>我是標(biāo)題</h1>
????<div>我是一個div標(biāo)簽</div>
????<span>我是一個span標(biāo)簽</span>
</body>
</html>
4.2?關(guān)系選擇器
4.2.1??交集選擇器
交集符合選擇器是由兩個選擇器直接構(gòu)成的，其結(jié)果是二者元素范圍的交集。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????/*選中"我是一個div標(biāo)簽"的這個標(biāo)簽*/
????????div.tag {
????????????color: blue;
????????}
????????/*選中"我是一個p標(biāo)簽"的這個標(biāo)簽*/
????????p#title {
????????????font-size: 30px;
????????}
????</style>
</head>
<body>
????<h1 class="tag">我是標(biāo)題</h1>
????<div class="tag">我是一個div標(biāo)簽</div>
????<p id="title">我是一個p標(biāo)簽</p>
</body>
</html>
4.2.2?并集選擇器
并集選擇器是由多個選擇器通過逗號連接在一起的，這些選擇器分別是：標(biāo)簽選擇器、類選擇器或id選擇器等。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????/*選中符合條件的所有標(biāo)簽*/
????????.search, span, #Important {
????????????color: red;
????????}
????</style>
</head>
<body>
????<a class="search" href="#">百度一下</a>
????<h1>我是一個h1標(biāo)簽</h1>
????<span>我是一個span標(biāo)簽</span>
????<div>
????????<p>我是一個p標(biāo)簽</p>
????????<span>我是一個span標(biāo)簽</span>
????????<strong id="Important">我是一個強調(diào)標(biāo)簽</strong>
????</div>
????<p>我是一個p標(biāo)簽</p>
</body>
</html>
4.2.3?后代選擇器
后代選擇器又稱為包含選擇器，選擇所有被E元素包含的F元素，中間用空格隔開。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????/*選中所有.box標(biāo)簽中存在的span標(biāo)簽*/
????????.box span {
????????????color: red;
????????}
????</style>
</head>
<body>
????<div class="box">
????????<h1>我是一個h1標(biāo)簽</h1>
????????<span>我是一個span標(biāo)簽</span>
????????<div>
????????????<p>我是一個p標(biāo)簽</p>
????????????<span>我是一個span標(biāo)簽</span>
????????????<strong>我是一個強調(diào)標(biāo)簽</strong>
????????</div>
????????<p>我是一個p標(biāo)簽</p>
????</div>
</body>
</html>
4.2.4??親子選擇器
選擇所有作為E元素的直接子元素F，對孫子元素不起作用，用大于號表示。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????.tag > span {
????????????color: red;
????????}
????</style>
</head>
<body>
????<div class="tag">
????????<h1>我是一個h1標(biāo)簽</h1>
????????<span>我是一個span標(biāo)簽</span>
????????<div>
????????????<p>我是一個p標(biāo)簽</p>
????????????<span>我是一個span標(biāo)簽</span>
????????????<strong>我是一個強調(diào)標(biāo)簽</strong>
????????</div>
????????<p>我是一個p標(biāo)簽</p>
????</div>
</body>
</html>
4.3?屬性選擇器
通過html的屬性來選擇元素，<p></p>?align即是屬性，center是align的屬性值。
寫法：元素[ 屬性名= “屬性值”]?，等號不固定，可換其它符號。
4.3.1?E[att]
選擇具有attr屬性的E元素，不用去管att屬性的值是什么。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????[class] {
????????????color: red;
????????}
????</style>
</head>
<body>
????<div class="block">我是一個div標(biāo)簽</div>
????<p class="title">我是一個p標(biāo)簽</p>
</body>
</html>
4.3.2?E[att="val"]
選擇具有att屬性且屬性值等于val的E元素。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????[class="title"] {
????????????color: red;
????????}
????</style>
</head>
<body>
????<div class="block">我是一個div標(biāo)簽</div>
????<p class="title">我是一個p標(biāo)簽</p>
</body>
</html>
4.4?偽類選擇器
偽類通過冒號來定義，它定義了元素的狀態(tài)，如點擊按下、點擊完等等，我們之前都是直接操作元素的樣式，現(xiàn)在可以為元素的狀態(tài)改樣式，使元素看上去更“動態(tài)”。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>CSS選擇器</title>
????<style>
????????/*鼠標(biāo)懸浮在標(biāo)簽上的狀態(tài)*/
????????div:hover, a:hover {
????????????color: green;
????????}
????????/*元素在鼠標(biāo)按下時的狀態(tài)*/
????????div:active, a:active {
????????????color: yellow;
????????}
/*元素被訪問后的狀態(tài)*/
????????div:active, a:visited?{
????????????color: yellow;
????????}
????</style>
</head>
<body>
????<div class="block">我是一個div標(biāo)簽</div>
????<br>
????<a href="#">百度一下</a>
</body>
</html>
?4.5?選擇器優(yōu)先級
4.5.1?單個優(yōu)先級比較
優(yōu)先級規(guī)則：!important >?id樣式 > class樣式 > 標(biāo)簽樣式?> 通配符樣式
在CSS中，通過對某一樣式聲明! important ，可以更改默認(rèn)的CSS樣式優(yōu)先級規(guī)則，使該條樣式屬性聲明具有最高優(yōu)先級，也就是相當(dāng)于寫在最下面。
.box {
????color:red !important;
}
4.5.2?復(fù)合標(biāo)簽優(yōu)先級比較
復(fù)合標(biāo)簽優(yōu)先級：由三個級別和各級別的出現(xiàn)次數(shù)決定的，三個級別對應(yīng)的是：ID選擇符、class選擇符、元素選擇符。
先比較符合標(biāo)簽中ID選擇符出現(xiàn)的次數(shù)，誰出現(xiàn)的次數(shù)多，則優(yōu)先級更高，反之則優(yōu)先級低；如果復(fù)合符合標(biāo)簽中的ID選擇符出現(xiàn)的次數(shù)相同，那么則比較class選擇符出現(xiàn)的次數(shù)，誰出現(xiàn)的次數(shù)多，則優(yōu)先級更高，反之則優(yōu)先級低；如果復(fù)合符合標(biāo)簽中的class選擇符出現(xiàn)的次數(shù)相同，那么則比較元素選擇符出現(xiàn)的次數(shù)，誰出現(xiàn)的次數(shù)多，則優(yōu)先級更高，反之則優(yōu)先級低。
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>Title</title>
????<style>
????????/*2個id選擇符?1個元素選擇符*/
????????div #box-second-id #box-three-id {
????????????color: blue;
????????}
????????/*1個id選擇符?1個元素選擇符?1個元素選擇符*/
????????div #box-second-id .box-three-class {
????????????color: red;
????????}
????????/*最后在瀏覽器上面顯示?blue 顏色的文字*/
????</style>
</head>
<body>
????<div class="box-first-class" id="box-first-id">
????????<div class="box-second-class" id="box-second-id">
????????????<div class="box-three-class" id="box-three-id">
????????????????我是一個p標(biāo)簽
????????????</div>
????????</div>
????</div>
</body>
</html>
4.5.3?優(yōu)先級相同
優(yōu)先級相同時，則采用就近原則，選擇最后出現(xiàn)的樣式;
5.?CSS常用屬性
5.1?背景屬性
CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。
5.1.1?background-color
使用 background-color 屬性為元素設(shè)置背景色，其默認(rèn)值是 transparent 也就是“透明”的意思，可使用顏色名稱、RGB、RGBA、十六進制數(shù)來指定顏色。
<style>
????/* 給.box的背景色設(shè)置為紅色?*/
????.box {
????????background-color: red;
????}
</style>
5.1.2?background-image
使用 background-color 屬性為元素設(shè)置背景背景圖片，
其默認(rèn)值是 none，表示背景上沒有放置任何圖像。
如果需要設(shè)置一個背景圖像，必須為這個屬性要么設(shè)置為?URL，要么設(shè)置一個圖片路徑。
<style>
????.box {
????????background-image: url("img/bg.jpg");
????}
</style>
5.1.3?background-repeat
使用 background-repeat 屬性設(shè)置背景圖片是否重復(fù)。
repeat 重復(fù)（默認(rèn)值）
repeat-x 圖片在橫向上平鋪
repeat-y 圖片在縱向上平鋪
no-repeat 不重復(fù)平鋪
<style>
????.box {
????????background-image: url("img/11.jpg");
????????/* 設(shè)置圖片不重復(fù)平鋪?*/
????????background-repeat: no-repeat;
????}
</style>
5.1.4?background-position
使用background-position 屬性改變圖像在背景中的位置。
可以使用長度值，如 100px，最后也可以使用百分?jǐn)?shù)值。
可以使用一些關(guān)鍵字：top、bottom、left、right 和 center，不能超過兩個關(guān)鍵字，一個對應(yīng)水平方向，另一個對應(yīng)垂直方向。
<style>
????.box {
????????background-image: url("img/link.jpg");
????????background-repeat: no-repeat;
????????/*距離左側(cè)200px 頂部100px*/
????????background-position: 200px 100px;
????????/*居中對齊*/
????????background-position: 50% 50%;
????????/*左下角對齊*/
????????background-position: left bottom;
????}
</style>
5.1.5?background-size
background-size 屬性規(guī)定背景圖片的尺寸。
在 CSS3 之前，背景圖片的尺寸是由背景圖片的實際尺寸決定的。在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們在不同的環(huán)境中重復(fù)使用背景圖片。
設(shè)置背景圖片尺寸的參數(shù)：可以為長度單位：px、%，也可以用關(guān)鍵字cover和contain。
l?cover: 按照最小寬或最小高來做拉伸，背景圖片能夠鋪滿設(shè)備屏屏幕，并不會造成圖片失真。
l?contain：按照最大寬度或最大高度來做拉伸，但是背景圖片有可能不能鋪滿設(shè)備屏幕。
5.1.6?background-attachment
如果文檔比較長，那么當(dāng)文檔向下滾動時，背景圖像也會隨之滾動。當(dāng)文檔滾動到超過圖像的位置時，圖像就會消失，可以通過 background-attachment 屬性防止這種滾動。
通過這個屬性，可以聲明圖像相對于可視區(qū)是固定的（fixed），因此不會受到滾動的影響。
<style>
????.box {
????????background-image: url("img/link.jpg");
????????background-repeat: no-repeat;
????????background-position: center center;
????????/* 無論滾動條如何滾動，圖片都在標(biāo)簽的最中心?*/
????????background-attachment: fixed;
????}
</style>
5.2?文本屬性
CSS 文本屬性可定義文本的外觀。
通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
text-align：對齊方式，left、right、center
text-decoration：文本修飾,underline(下劃線)、line-throuth(刪除線)、overline(上劃線)、none
line-height：行高
text-indent：文字/圖片縮進
5.2.1?color文本的顏色
可使用顏色名稱、RGB、十六進制數(shù)來指定顏色。
5.2.2?opacity
opacity用來設(shè)置透明度，默認(rèn)值為1，1為不透明，0為完全透明。
p{ opacity: 0;} 隱藏一個元素 ，完全不顯示，但是會占空間，只是看不到。
5.2.3?font字體設(shè)置
<style>
????.title {
????????/* 設(shè)置字體名字?*/
????????font-family: "宋體", "微軟雅黑", Arial;
????????/* 設(shè)置字體大小?*/
????????font-size: 2em;
????????/* 設(shè)置字體粗細?*/
????????font-weight: 900;
????????/* 設(shè)置字體風(fēng)格?*/
????????font-style: italic;
????}
</style>
5.2.4?text-align
文本對齊屬性text-align 屬性規(guī)定元素中的文本的水平對齊方式，只能設(shè)置塊級元素內(nèi)文本的水平對齊方式。
<style>
????a {
????????text-decoration: none;
????}
</style>
5.2.6?letter-spacing
設(shè)置字與字之間的間距。
<style>
????.title {
????????letter-spacing: 10px;
????}
</style>
5.2.7?line-height行高
line-height 屬性設(shè)置行間的距離（行高），屬性值可以為數(shù)值也可以為百分比。
line-height妙用：設(shè)置文字居上下中展示
<style>
????.title {
????????line-height: 80px;
????????text-align: center;
????}
</style>
5.2.8?overflow 屬性
描述? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?描述說明
visible? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
hidden? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。
scroll? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 內(nèi)容被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
auto? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
overflow? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。
5.2.9?擴展
實現(xiàn)溢出文本eclipsis的解決，讓溢出的文字以省略號顯示。
<style>
????.title {
????????width: 5em;
????????height: 1.4em;
????????/*設(shè)置文本不能換行*/
????????white-space:nowrap;
????????/*設(shè)置文本超出文本框時隱藏文本*/
????????overflow:hidden;
????????/*用略符號來代表被修剪的文本*/
????????text-overflow:ellipsis;
????}
</style>
5.3?復(fù)合樣式
<style>
????div{
border:1px solid red;??/*盒子的邊框*/
?border-radius：/*邊角的弧度，取值單位px、%*/
}
</style>
5.4?列表屬性
列表屬性主要針對的是ul和ol類型的列表。
5.4.1?3.1 list-style-type
list-style-type
列表樣式，類型屬性值可以為：
disc (缺省值，黑圓點)
circle (空心圓點)
square (小黑方塊)
decimal (數(shù)字排序)
lower-roman upper-roman 羅馬數(shù)字
lower-alpha upper-alpha 英文字母
none (無列表項標(biāo)記，針對無序列表)
<style>
????ul{ list-style-type:circle;}
</style>
6.?元素的分類
元素主要分為：塊級元素、內(nèi)聯(lián)元素（行級元素）和內(nèi)聯(lián)塊級元素。
6.1?塊級元素
塊級元素排斥其他元素與其位于同一行，可以設(shè)定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內(nèi)元素?？稍O(shè)置四個方向的padding和margin值。
常見的塊級元素有：body, div，p，h1~h6，ul，ol，li，pre等。
塊級元素具有以下特點：
1.?總是在新行上開始，占據(jù)一整行；
2.?高度屬性（height）和寬度屬性（width）可以設(shè)置，并且外邊距和內(nèi)邊距都可控制；
3.?寬始終是與父元素寬度一樣，與內(nèi)容無關(guān)；
4.?它可以容納行內(nèi)元素和其它塊級元素。
設(shè)置display:block可以將元素顯示為塊級元素
如下的代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)成塊級元素，從而使a元素具有塊元素的特點。
<style>
????a { display: block }
</style>
6.2?內(nèi)聯(lián)元素（行內(nèi)元素）
內(nèi)聯(lián)元素又稱為行內(nèi)元素，內(nèi)聯(lián)元素不可以設(shè)置寬（width）和高（height），但可以與其他行內(nèi)元素位于同一行，行內(nèi)元素內(nèi)盡量不要包含塊級元素。行內(nèi)元素的高度一般由元素內(nèi)部的字體大小決定，寬度由內(nèi)容的長度控制。只能設(shè)置左右方向的padding和margin值，上下無法設(shè)置。
常見的行內(nèi)元素有：a，em，strong，span, i, u, del等。
行內(nèi)元素的特點：
1.?可以和別的行內(nèi)元素和行內(nèi)塊級元素共享一行；
2.?不能設(shè)置高度屬性（height）和寬度屬性（width），另外內(nèi)邊距和外邊距部分可控制；
3.?行內(nèi)標(biāo)簽的寬度只與內(nèi)容有關(guān)；
4.?行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
設(shè)置display:inline可以將元素顯示為內(nèi)聯(lián)元素
如下的代碼就是將塊級元素div轉(zhuǎn)成內(nèi)聯(lián)元素，從而使div元素具有內(nèi)聯(lián)元素的特點。
<style>
????div{ display:inline; }
</style>
6.3?行內(nèi)塊級元素（內(nèi)聯(lián)塊級元素）
行內(nèi)塊級元既有塊級元素的特點，又有內(nèi)聯(lián)元素的特點。可以與其他行內(nèi)元素位于同一行，寬度由內(nèi)容的長度控制，但可以設(shè)置寬（width）和高（height），也可以設(shè)置四個方向的padding(內(nèi)邊距)和margin(外邊距)值。
常見的行內(nèi)塊級元素有img和input。
行內(nèi)塊級元素的特點：
1.?行內(nèi)塊級元素可以設(shè)置寬度（width）和高度（hright）屬性；
2.?行內(nèi)元素可以和別的行內(nèi)元素和行內(nèi)塊級元素共享一行。
設(shè)置display:inline-block可以將元素設(shè)置為內(nèi)聯(lián)塊級元素
如下的代碼就是將塊級元素div轉(zhuǎn)成內(nèi)聯(lián)塊級元素，從而使div元素具有內(nèi)聯(lián)塊級元素的特點。
6.4?display屬性補充
根據(jù)CSS規(guī)范的規(guī)定，每一個網(wǎng)頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認(rèn)的display屬性值，比如div元素，它的默認(rèn)display屬性值為“block”，稱為塊元素，而span元素的默認(rèn)display屬性值為“inline”，稱為“行內(nèi)”元素。
屬性值? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??描述說明
none? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 此元素不會被顯示，不保留物理空間。
block? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?此元素會被顯示為行內(nèi)元素，元素前后沒有換行符。
inline-block? ? ? ? ? ? ? ? ? ? ? ? ? ? 行內(nèi)塊元素。
visibility和display的區(qū)別
visibility屬性用來確定元素是顯示還是隱藏的，這用visibility="visible|hidden"來表示（visible表示顯示，hidden表示隱藏）。
當(dāng)visibility被設(shè)置為"hidden"的時候，元素雖然被隱藏了，但它仍然占據(jù)它原來所在的位置。
當(dāng)display被設(shè)置為"none"的時候，這時元素實際上就從頁面中被移走，它下面所在的元素就會被自動跟上填。
總結(jié)：應(yīng)用display: none;的元素相當(dāng)于消失，而visibility: hidden;則只表示隱藏，位置還在。
7.?CSS定位屬性
網(wǎng)頁中大部分對象默認(rèn)是占用文檔流，也有一些對象是不占文檔流的，比如表單中隱藏域。當(dāng)然我們也可以讓占用文檔流的元素轉(zhuǎn)換成不占文檔流，這就要用到CSS中屬性position、float、display來控制。
默認(rèn)情況下，所有元素都處在文檔流中，四種情況將使得元素離開文檔流：浮動float、絕對定位absolute、相對定位fixed、元素不顯示display:none，這種情況不占文檔流的空間，而普通元素的位置基于文檔流。
文檔流：自窗體自上而下分成一行一行，并在每行中按從左到右的順序排放元素。
7.1?position定位
position定位：規(guī)定元素的定位類型。即元素脫離文檔流的布局，在頁面的任意位置顯示。
定位類型：絕對定位（absolute）、相對定位（relative）、固定定位（fixed）和默認(rèn)的文檔流布局方式（static）。
輔助屬性：
position屬性只是使元素脫離文檔流，要想此元素能按照希望的位置顯示，就需要使用下面的屬性：
left ： 表示向元素的左邊插入多少像素，使元素向右移動多少像素。
right ：表示向元素的右邊插入多少像素，使元素向左移動多少像素。
top ：表示向元素的上方插入多少像素，使元素向下移動多少像素。
bottom ：表示向元素的下方插入多少像素，使元素向上移動多少像素。
注意：上面屬性的值可以為負。
7.1.1?relative相對定位
相對定位：不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。定位的起始位置為此元素原先在文檔流的位置。（相對定位后，元素位置移動了，但是原來的位置還占據(jù)著。）
?
7.1.2?absolute絕對定位
絕對定位：脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為body文檔本身。
7.1.3?fixed固定定位
固定定位：fixed是特殊的absolute，按照瀏覽器的窗口進行定位。
7.2?z-index屬性
z-index屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。z-index取值為整數(shù)類型，可以是負值，z-index 僅能在定位元素上奏效，如position:absolute。
設(shè)置文字在圖片上面顯示
<!DOCTYPE html>
<html lang="en">
<head>
????<meta charset="UTF-8">
????<title>z-index</title>
????<style>
????????img {
????????????position: absolute;
????????????top: 0;
????????????z-index: -1;
????????}
????</style>
</head>
<body>
????<h1>這是一個鼠標(biāo)</h1>
????<img src="img/mouse.jpg" alt="">
</body>
</html>
8.?CSS隨堂練習(xí)
8.1?實現(xiàn)表格界面
?
8.2?實現(xiàn)圖書列表界面
?
更多干貨我們下期再說！
下期會分享
第四章節(jié)
HTML_CSS_JavaScript
第二章節(jié)
相關(guān)知識~
下期見！?
