CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
'''
selector {
property: value;
property: value;
... property: value
}
'''
例如：
h1 {color:red; font-size:14px;}
css的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3 鏈接式
將一個.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
注意：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
css選擇器
基本選擇器
組合選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 :div,p { color:#f00; }
E F 后代元素選擇器，匹配所有屬於E元素后代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝
E > F 子元素選擇器，匹配所有E元素的子元素F :div > p { color:#f00; }
E + F 毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F :div + p { color:#f00; }
E ~ F 普通兄弟選擇器（以破折號分隔） :.div1 ~ p{font-size: 30px; }
注意，關於標簽嵌套：
一般，塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。需要注意的是，p標簽不能包含塊級標簽。
屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
偽類
anchor偽類：專用於控制鏈接的顯示效果
''' a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。 a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。 a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。 a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。 偽類選擇器 : 偽類指的是標簽的不同狀態: a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態 a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; } '''
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ background-color: rebeccapurple; width: 100px; height: 100px; } .bottom{ background-color: green; width: 100px; height: 100px; } .outer:hover .bottom{ background-color: yellow; } 注意:一定是outer:hover 控制outer里某一個標簽,否則無效 .top:hover .bottom{ background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
before after偽類
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之后插入內容 例：p:before{content:"hello";color:red;display: block;}
選擇器的優先級
css的繼承
繼承是CSS的一個主要特征，它是依賴於祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;} <p>helloyuan</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
div{ border:1px solid #222 } <div>hello <p>yuan</p> </div>
css的優先級
所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就得到最終的權重，然后在比較取舍時按照從左到右的順序逐位比較。
1、文內的樣式優先級為1,0,0,0，所以始終高於外部定義。 2、有!important聲明的規則高於一切。 3、如果!important聲明沖突，則比較優先權。 4、如果優先權一樣，則按照在源碼中出現的順序決定，后來者居上。 5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)。
css屬性操作
css text
文本顏色：color
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
- 十六進制值 - 如: ＃FF0000
- 一個RGB值 - 如: RGB(255,0,0)
- 顏色的名稱 - 如: red
p { color: rebeccapurple; }
水平對齊方式
text-align 屬性規定元素中的文本的水平對齊方式。
- left 把文本排列到左邊。默認值：由瀏覽器決定。
- right 把文本排列到右邊。
- center 把文本排列到中間。
- justify 實現兩端對齊文本效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css</title> <style> h2 {text-align:center;} p.publish_time {text-align:right;} p.content {text-align:justify;} </style> </head> <body> <h1>CSS text-align 水平居中</h1> <p class="publish_time">2017 年 5 月 17 號</p> <p class="content"> 有個落拓不得志的中年人每隔三兩天就到教堂祈禱，而且他的禱告詞幾乎每次都相同。第一次他到教堂時， 跪在聖壇前，虔誠地低語：“上帝啊，請念在我多年來敬畏您的份上。讓我中一次彩票吧！阿門。” 幾天后，他又垂頭喪氣回到教堂，同樣跪着祈禱：“上帝啊，為何不讓我中彩票？我願意更謙卑地來 服侍你，求您讓我中一次彩票吧！阿門。”又過了幾天，他再次出現在教堂，同樣重復他的祈禱。如此周而 復始，不間斷地祈求着。到了最后一次，他跪着：“我的上帝，為何您不垂聽我的祈求？讓我中一次彩票吧！ 只要一次，讓我解決所有困難，我願終身奉獻，專心侍奉您……”就在這時，聖壇上發出一陣宏偉庄嚴的聲 音：“我一直垂聽你的禱告。可是最起碼？你也該先去買一張彩票吧!”</p> <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p> </body> </html>
文本其它屬性
/*
font-size: 10px; line-height: 200px; 文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比 vertical-align:－4px 設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效 text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下划線 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行縮進150px letter-spacing: 10px; 字母間距 word-spacing: 20px; 單詞間距 text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫 */
背景屬性
屬性介紹
- background-color
- background-image
- background-repeat
- background-position
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;
簡寫
background:#ffffff url('1.png') no-repeat right top;
邊框屬性
屬性介紹
- border-width
- border-style (required)
- border-color
border-style: solid; border-color: chartreuse; border-width: 20px;
簡寫
簡寫：border: 30px rebeccapurple solid;
邊框-單獨設置各邊
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
列表屬性
list-style-type 設置列表項標志的類型。 list-style-image 將圖象設置為列表項標志。 list-style-position 設置列表中列表項標志的位置。 list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中
ist-style-type屬性指定列表項標記的類型：
ul { list-style-type: square; }
使用圖像來替換列表項的標記:
ul {
list-style-image: url('');
}
dispaly屬性
noneblockinline- inline-block
none(隱藏某標簽)
p{display:none;}
注意與visibility:hidden的區別：
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
block(內聯標簽設置為塊級標簽)
span {display:block;}
注意：一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素。
inline(塊級標簽設置為內聯標簽)
li {display:inline;}
inline-block
display:inline-block可做列表布局，其中的類似於圖片間的間隙小bug可以通過如下設置解決：
#outer{
border: 3px dashed;
word-spacing: -5px;
}
外邊距(margine)和內邊距(padding)
盒子模型
- margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離；
- Border(邊框): 圍繞在內邊距和內容外的邊框。
- Content(內容): 盒子的內容，顯示文本和圖像。
margine(外邊距)
單邊外邊距屬性：
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
簡寫屬性
margin:10px 20px 20px 10px；
上邊距為10px
右邊距為20px
下邊距為20px
左邊距為10px
margin:10px 20px 10px;
上邊距為10px
左右邊距為20px
下邊距為10px
margin:10px 20px;
上下邊距為10px
左右邊距為20px
margin:25px;
所有的4個邊距都是25px
居中應用
margin: 0 auto;
padding(內邊距)
單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。
設置同margine；
頁碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
margin: 0 auto;
width: 80%;
}
.content{
background-color: darkgrey;
height: 500px;
}
a{
text-decoration: none;
}
.page-area{
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
background-color: #f0ad4e;
}
.page-area ul li{
display: inline-block;
}
.page-area ul li a ,.page-area ul li span{
display: inline-block;
color: #369;
height: 25px;
width: 25px;
text-align: center;
line-height: 25px;
padding: 8px;
margin-left: 8px;
border: 1px solid #e1e1e1;
border-radius: 15%;
}
.page-area ul li .page-next{
width: 70px;
border-radius:0
}
.page-area ul li span.current_page{
border: none;
color: black;
font-weight:900;
}
.page-area ul li a:hover{
color: #fff;
background-color: #2459a2;
}
</style>
</head>
<body>
<div class="outer">
<div class="content"></div>
<div class="page-area">
<ul>
<li><span class="current_page">1</span></li>
<li><a href="#" class="page-a">2</a></li>
<li><a href="#" class="page-a">3</a></li>
<li><a href="#" class="page-a">4</a></li>
<li><a href="#" class="page-a">5</a></li>
<li><a href="#" class="page-a">6</a></li>
<li><a href="#" class="page-a">7</a></li>
<li><a href="#" class="page-a">8</a></li>
<li><a href="#" class="page-a">9</a></li>
<li><a href="#" class="page-a">10</a></li>
<li><a href="#" class="page-a page-next">下一頁</a></li>
</ul>
</div>
</div>
</body>
</html>
思考1:body的外邊距
邊框在默認情況下會定位於瀏覽器窗口的左上角，但是並沒有緊貼着瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，為了驗證這一點，加上：
body{
border: 1px solid;
background-color: cadetblue;
}
>>>>解決方法：
body{
margin: 0;
}
思考2：margin collapse（邊界塌陷或者說邊界重疊）
1、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值
2、父子div：
if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然后按此div 進行margin；
<!DOCTYPE html> <html lang="en" style="padding: 0px"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0px; } .div1{ background-color: rebeccapurple; width: 300px; height: 300px; overflow: hidden; } .div2{ background-color: green; width: 100px; height: 100px; margin-bottom: 40px; margin-top: 20px; } .div3{ background-color:teal; width: 100px; height: 100px; margin-top: 20px; } </style> </head> <body> <div style="background-color: bisque;width: 300px;height: 300px"></div> <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
>>>> 解決方法：
overflow: hidden;
float屬性
基本浮動規則
先來了解一下block元素和inline元素在文檔流中的排列方式。
block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效
- 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標准流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; /*float: left;*/ } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>
非完全脫離文檔流
左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會造成覆蓋現象，只有DIV形成覆蓋現象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 100px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <div class="r1"></div> <div class="r2">region2</div> </body> </html>
>>>>解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。
父級坍塌現象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin:0;padding:0; } .container{ border:1px solid red;width:300px; } #box1{ background-color:green;float:left;width:100px;height:100px; } #box2{ background-color:deeppink; float:right;width:100px;height:100px; } #box3{ background-color:pink;height:40px; } </style> </head> <body> <div class="container"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> </div> <div id="box3">box3</div> </body> </body> </html>
例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。
>>>>解決方法：
1、固定高度
給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。
或者給.container加一個固定高度的子div：
<div class="container"> <div id="box1">box1 向左浮動</div> <div id="box2">box2 向右浮動</div> <div id="empty" style="height: 100px"></div> </div> <div id="box3">box3</div>
但是這樣限定固定高度會使頁面操作不靈活，不推薦！
2、清除浮動(推薦)。
clear語法：
clear : none | left | right | both
取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: left; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>
把握住兩點：1、元素是從上到下、從左到右依次加載的。
2、clear: left;對自身起作用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。
思考：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .r1{ width: 300px; height: 100px; background-color: #7A77C8; float: left; } .r2{ width: 200px; height: 200px; background-color: wheat; float: left; clear: both; } .r3{ width: 100px; height: 200px; background-color: darkgreen; float: left; } </style> </head> <body> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> </body> </html>
解決父級塌陷：
''' .clearfix:after { <----在類名為“clearfix”的元素內最后面加入內容； content: "."; <----內容為“.”就是一個英文的句號而已。也可以不寫。 display: block; <----加入的這個元素轉換為塊級元素。 clear: both; <----清除左右兩邊浮動。 visibility: hidden; <----可見度設為隱藏。注意它和display:none;是有區別的。 visibility:hidden;仍然占據空間，只是看不到而已； line-height: 0; <----行高為0； height: 0; <----高度為0； font-size:0; <----字體大小為0； } .clearfix { *zoom:1;} <----這是針對於IE6的，因為IE6不支持:after偽類，這個神 奇的zoom:1讓IE6的元素可以清除浮動來包裹內部元素。 整段代碼就相當於在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。 之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。 <div class="head clearfix"></div> '''
3、overflow:hidden
overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。
position(定位)
1 static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
2 position: relative／absolute
relative: 相對定位。
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute: 絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .outet{ /*position: relative;*/ } .item{ width: 200px; height:200px ; } .r1{ background-color: #7A77C8; } .r2{ background-color: wheat; /*position: relative;*/ position: absolute; top: 200px; left: 200px; } .r3{ background-color: darkgreen; } </style> </head> <body> <div class="item r1"></div> <div class="outet"> <div class="item r2"></div> <div class="item r3"></div> </div> </body> </html>
總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
3 position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .back{ background-color: wheat; width: 100%; height: 1200px; } span{ display: inline-block; width: 80px; height: 50px; position: fixed; bottom: 20px; right: 20px; background-color: rebeccapurple; color: white; text-align: center; line-height: 50px; } </style> </head> <body> <div class="back"> <span>返回頂部</span> </div> </body> </html>
Caution！
1、默認的高度和寬度問題
（1）父子都是塊級元素
<!DOCTYPE html> <html> <head> <title>fortest</title> <style> div.parent{ width: 500px; height: 300px; background: #ccc; } div.son{ width: 100%; height: 200px; background: green; } </style> </head> <body> <div class="parent"> <div class="son"></div> </div> </body> </html>
這時，子元素設置為了父元素width的100%，那么子元素的寬度也是500px；
但是如果我們把子元素的width去掉之后，就會發現子元素還是等於父元素的width。也就是說，對於塊級元素，子元素的寬度默認為父元素的100%。
當我們給子元素添加padding和margin時，可以發現寬度width是父元素的寬度減去子元素的margin值和padding值。
毫無疑問，如果去掉子元素的height，就會發先子元素的高度為0，故height是不會為100%的，一般我們都是通過添加內容（子元素）將父元素撐起來。
（2）父：塊級元素 子：內聯元素
如果內聯元素是不可替換元素（除img，input以外的一般元素），元素是沒有辦法設置寬度的，也就談不上100%的問題了。 即內聯元素必須依靠其內部的內容才能撐開。
如果內聯元素是可替換元素（img，input，本身可以設置長和寬），不管怎么設置父元素的寬度和高度，而不設置img的寬和高時，img總是表現為其原始的寬和高。
<!DOCTYPE html> <html> <head> <title>...</title> <style> div.parent{ width: 500px; height: 300px; background: #ccc; } img{ height: 100px; background: green; } </style> </head> <body> <div class="parent"> <img class="son" src="s1.jpg"></img> </div> </body> </html>
由此我們可以發現，雖然沒有設置寬度，但是表現在瀏覽器上為160px，它並沒有繼承父元素的100%得到500px，而是根據既定的高度來等比例縮小寬度。 同樣， 如果只設置width，那么height也會等比例改變。 如果我們把img的width設置為100%，就可以發現其寬度這時就和父元素的寬度一致了。而我們一般的做法時，首先確定img的父元素的寬度和高度，然后再將img的寬度和高度設置位100%，這樣，圖片就能鋪滿父元素了。
后台管理布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; width: 100%; background-color: #2459a2; position: fixed; top:0; left: 0; } .left{ position:absolute; left:0; top:48px; bottom:0; width:200px; background-color: #ededed; } .right{ position:absolute; right:0; left:200px; top:48px; bottom:0; overflow:auto; } .content{ height: 2000px; width: 100%; } </style> </head> <body> <div class="pg-header"></div> <div> <div class="left"> </div> <div class="right"> <div class="content"></div> </div> </div> </body> </html>
css響應式布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*======================================初始化=====================*/ *{ margin: 0; padding: 0; } body{ font-size: 12px; } a{ text-decoration: none; } /*======================================header區域設置=====================*/ .header{ height: 44px; width: 100%; background-color: #2459a2; position: fixed; top:0; left: 0; } .header_content{ width: 80%; height: 44px; background-color: #2459a2; margin: 0 auto; line-height: 44px; position: relative; } /*======header區part1:logo ===========*/ .logo{ float: left; width: 121px; height: 23px; margin-top: 9px; } /*======header區part2:action-menu =====*/ .action-menu{ float: left; margin-left: 30px; } .action-menu a.tb{ color: #c0cddf; padding: 0 10px; text-align: center; margin-left: -3px; display: inline-block; } .action-menu a.tb:hover { color: #fff; background-color: lightslategrey; } .action-menu a.active, .action-menu a.active:hover { color: #fff; background-color:#204982;; } /*======header區part3:key-search =====*/ .key-search{ margin-top: 5px; float: right; } .key-search a.search-icon-box, .search-txt { float: left; } .search-txt { color: #333; line-height: 25px; padding: 2px 2px 2px 5px; height: 25px; width: 91px; } .key-search a.search-icon-box { border: 1px solid #e0e0e0; background-color: #f4f4f4; width: 30px; height: 31px; border-left: 0; } .key-search a.search-icon-box span.search-icon{ background: url("images/icon.png") no-repeat 0 -197px; float: left; height: 12px; width: 11px; margin-left: 10px; margin-top: 9px; } /*======header區part4:action-nav =====*/ .action-nav { float: right; margin-right: 10px; } .action-nav a { color: white; padding: 14px 18px; } .action-nav a:hover{ background-color: lightslategrey; color: white; } /*======================================content區域設置=====================*/ .content-box { background-color: #ededed; padding-top: 44px; height: 100%; } .content { width: 960px; margin: 0 auto; height: auto!important; overflow: hidden; min-height: 713px; padding: 6px 28px; background-color: #fff; /*overflow: hidden;取消后看看效果*/ } /*===============================響應式布局=====================*/ @media(max-width:1050px) { .action-menu a.item{ display: none; background-color: gold; border: dashed 1px rebeccapurple; color: black; } .action-menu a.active{ padding: 0 25px; } .action-nav{ float: left; margin-left: 80px; } .key-search{ float: right; margin-right: 100px; } .action-menu:hover a.item{ display: block; } } @media(max-width:810px) { .key-search{ display: none; } .action-nav{ display: none; } } </style> </head> <body> <!--header結構--> <div class="header"> <div class="header_content"> <div class="logo"> <a href="/"><img src="images/logo.png" alt=""></a> </div> <div class="action-menu"> <a href="#" class="tb active">全部</a> <a href="#" class="tb item">42區</a> <a href="#" class="tb item">段子</a> <a href="#" class="tb item">圖片</a> <a href="#" class="tb item">挨踢1024</a> <a href="#" class="tb item">你問我答</a> </div> <div class="key-search"> <form action="/" method="post"> <input type="text" class="search-txt"> <a href="#" class="search-icon-box" > <span class="search-icon"></span> </a> </form> </div> <div class="action-nav"> <a href="#" class="register-btn">注冊</a> <a href="#" class="login-btn">登錄</a> </div> </div> </div> <!--content結構--> <div class="content-box"> <div class="content"> </div> </div> </body> </html>
課下作業
1、實現一個登陸頁面，樣式如下：
2、實現一個注冊頁面，樣式如下：
