前端：CSS
CSS是Cascading Style Sheets的簡稱，中文稱爲層疊樣式表，用來控制網頁數據的表現，可使網頁的表現與數據內容分離。css
1、CSS的四種引入方式
一、行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。html
示例：api
<p style="background-color: aquamarine;color:sandybrown">pppppppppp</p>
二、嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。瀏覽器
<head> <style type="text/css"> 此處寫CSS樣式 </style> </head>
示例：佈局
<head> <meta charset="UTF-8"> <title>css的引入方式2</title> <style> p{ background-color: blue; color: sandybrown; } </style> </head> <body> <p>ppppppppppppp</p> <div>ddddddddddd</div> </body>
三、導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下：學習
<style type="text/css"> @import"mystyle.css"; 此處要注意.css文件的路徑 </style>
示例：字體
首先建立一個stylesheet，也就是.css文件，命名：style.css網站
<head> <meta charset="UTF-8"> <title>css的引入方式3</title> <style> @import "style.css"; </style> </head> <body> <p>ppppppppppp</p> <p id="www">iiiiiiiiiiiiipppppppppp</p> </body>
經過id來設置屬性，url
style.css：spa
#www{
background-color: aliceblue;
color: aqua;
}
效果演示圖：
四、連接式
也是將一個.css文件引入到HTML文件中：<link href="style.css" rel="stylesheet" type="text/css"/>
注意：
導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。
示例：
<head> <meta charset="UTF-8"> <title>css的引入方式4</title> <link href="style.css" rel="stylesheet"> </head> <body> <p class="hhh">pppppppppp</p> <p id="www">aaaaaaaaaa</p> </body>
style.css：
#www{
background-color: aliceblue;
color: aqua;
}
.hhh{
color: rebeccapurple;
font-size: 30px;
font-weight: bold;/*加粗樣式*/
}
效果演示圖：
2、CSS的選擇器（selector）
一、基礎選擇器
通用元素選擇器，匹配任何元素：*
*{
color: #84a42b;
margin: 0;
padding: 0;
}
標籤選擇器，匹配全部使用該標籤的元素:
<style> a{ background-color: aliceblue; font-size: 60px; } </style> <body> <a>abc</a> </body>
class選擇器，匹配全部class屬性中包含某制定的元素：
<style> .qq{ font-size: 30px; } div.qq{ font-size: 40px; background-color: sandybrown; } </style> <body> <p class="qq">pppppppppppppppp</p> <div class="qq">dddddddddddddddd</div> </body>
id選擇器，匹配全部id屬性等於某制定的元素：
<style> #ssww{ background-color: sandybrown; color: crimson; font-size: 20px; } </style> <body> <p id="ssww">sssssssssssssss</p> </body>
二、組合選擇器
多元素選擇器，同時匹配全部制定元素，元素之間用逗號分隔：
<style> div,p{ font-size: 30px; color: burlywood; } </style> <body> <p>pppppppppppppp</p> <div class="aa">hello1 <div>hello2 <p>hello4 <div>hello5</div> </p> </div> <div>hello3</div> </div> <p>iiiiiiiiip</p> </body>
效果演示圖：
後代元素選擇器，匹配全部屬於該元素後代的制定元素，父代和後代之間用空格分隔：
<style> .aa p{ font-size: 30px; color: aqua; } .aa div{ font-size: 30px; color: sandybrown; } </style> <body> <p>pppppppppppppp</p> <div class="aa">hello1 <div>hello2 <p>hello4 <div>hello5</div> </p> </div> <div>hello3</div> </div> <p>iiiiiiiiip</p> </body>
效果演示圖：
子元素選擇器，匹配全部父元素的子元素：
<style> div>p{ color: cornflowerblue; font-size: 30px; } </style> <body> <p>pppppppppppppp</p> <div class="aa">hello1 <div>hello2 <p>hello4 <div>hello5</div> </p> </div> <div>hello3</div> </div> <p>iiiiiiiiip</p> </body>
效果演示圖：
毗鄰元素選擇器，匹配全部緊隨某元素 以後 的同級元素：
<style> p+div{ font-size: 60px; color: cornflowerblue; } </style> <body> <div>ddddddddddd</div> <p>pppppppppppppp</p> <div class="aa">hello1</div> <p>iiiiiiiiip</p> </body>
效果演示圖：
注意嵌套規則：
- 塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
- 塊級元素不能放在p裏面。
- 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
- li內能夠包含div
- 塊級元素與塊級元素並列、內聯元素與內聯元素並列。（錯誤的：<div><h2></h2><span></span></div>）
三、屬性選擇器
匹配全部具備某屬性的元素，不考慮它的值。注：元素能夠省略。
例子中省略了div和p元素。如下同。
<style> [asd]{ font-size: 40px; color: chocolate; } </style> <body> <div asd="boy">alex</div> <div asd="girl">seven</div> <p asd="girl">rain</p> </body>
效果演示圖：
匹配全部屬性等於某值的元素：
<style> [asd="girl"]{ font-size: 30px; color: blueviolet; } </style> <body> <div asd="boy">alex</div> <div asd="girl">seven</div> <p asd="girl">rain</p> </body>
效果演示圖：
匹配全部某屬性具備多個空格分隔的值、其中一個值等於該值的元素便可：
<style> /*找只要符合某一個值*/ div[asd~="girl"]{ font-size: 20px; color: blue; } </style> <body> <div asd="boy girl">alex</div> <div asd="man girl">rain</div> <div asd="boy-girl">alex</div> </body>
效果演示圖：
匹配全部某屬性具備多個連字號分隔的值，其中以"xxx"開頭的某元素，主要用於lang屬性，好比「en」、「en-us」、「en-gb」等等。
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>屬性選擇器</title> <style> /*找boy開頭*/ [asd|="boy"]{ font-size: 20px; color:red; } [lang|="en"]{ font-size: 30px; color: darkgreen; background-color: blueviolet; } </style> </head> <body> <div asd="boy-girl">alex</div> <div lang="en-us">seven</div> </body> </html>
效果演示圖：
匹配屬性值以指定值開頭的每一個元素：E[attr^=val] div[class^="test"]{background:#ffff00;}
匹配屬性值以指定值結尾的每一個元素：E[attr$=val] div[class$="test"]{background:#ffff00;}
匹配屬性值中包含指定值的每一個元素：E[attr*=val] div[class*="test"]{background:#ffff00;}
在每一個指定元素的內容以前插入內容：
在每一個指定元素的內容以後插入內容：
<style> p:before{ content: "before";color: #84a42b;font-size: 30px; } p:after{ content: "after";color: brown;font-size: 40px; } </style> </head> <body> <div>alex</div> <p>seven</p> </body>
效果演示圖：
四、僞類選擇器
僞類選擇器：用於控制鏈接的顯示效果
a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。
a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>僞類選擇器</title> <style type="text/css"> a:link{ color: red;/*未訪問的連接*/ } a:visited{ color:green;/*已訪問的連接*/ } a:hover{ color: blueviolet;/*鼠標移動到連接上*/ } a:active{ color: fuchsia;/*選定的連接*/ } </style> </head> <body> <a href="http://baidu.com">百度</a> </body> </html>
3、CSS的經常使用屬性
一、顏色屬性：
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
注：
rgb是值全部顏色由紅、綠、藍三種顏色組成，每種顏色能夠在0-255之間進行選擇組合顏色。
rgba，其中的 a 是指顏色透明度。取值爲0-1之間。
二、字體屬性：
字體大小：font-size: 20px/50%/larger
字體樣式：font-family:'Lucida Bright'
字體粗度：font-weight: lighter/bold/border/
字體傾斜：<h1 style="font-style: oblique">XXX</h1>
示例：
<style> p{ font-size: 60px; font-family: 微軟雅黑; font-weight: bold; font-style: oblique; } </style> <body> <p>alex</p> </body>
效果演示圖：
三、背景屬性：
background-image:red
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)
簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
示例：
<style> div{ width: 400px; height: 400px; background-color: darksalmon; background-image: url("200.jpg"); background-repeat: no-repeat; background-position: center; } </style> <body> <div>ddddddddd</div> </body>
效果演示圖：
補充：
好比，網頁上那些點贊、收藏、評論之類的小圖標，其實都是一張圖片的某一部分。咱們想用的時候就須要設置background-position。通俗點就是摳圖！
.h-foot1{
background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13") no-repeat 0 0;
width: 18px;
height: 18px;
background-position: 0 -40px;
padding-left: 8px;
padding-right: 12px;
margin: 5px;
}
上面這是截取抽屜新熱榜網站一個點讚的圖標。具體的能夠本身試一下。
四、文本屬性：
font-size: 10px;
text-align: center;橫向排列
line-height: 200px;文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比
p{ width: 200px;
height: 200px;
text-align: center;
line-height: 200px; }
text-indent: 150px; 首行縮進，50%：基於父元素（weight）的百分比
letter-spacing: 10px;
word-spacing: 20px;
direction: rtl;
text-transform: capitalize;（文本單詞首字母大寫）
示例：
<style> div{ height: 300px; background-color: aquamarine; background-image: url("200.jpg"); background-repeat: no-repeat; background-position: center center; /*background: aquamarine url("200.jpg") no-repeat center;*//*簡寫*/ } </style> <body> <div></div> </body>
效果演示圖：
五、邊框屬性：
border-style: solid;（邊框樣式）
border-color: chartreuse;
border-width: 20px;
簡寫：border: 20px chartreuse solid;
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>邊框屬性</title> <style> div{ background-color: coral; height: 300px; width: 300px; border-style: solid; border-color: greenyellow; border-width: 5px; /*border: solid 5px greenyellow;*//*簡寫*/ } </style> </head> <body> <div></div> </body> </html>
效果演示圖：
六、列表屬性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表屬性</title> <style> ul{ list-style: none;/*去掉列表原點*/ } </style> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
效果演示圖：
七、display屬性：
- none：隱藏而且不佔高度
- block：內聯標籤變塊級標籤
- inline：塊級標籤變內聯標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display屬性</title> <style> p{ background-color: coral; display: inline;/*!*塊標籤變內聯標籤*!*/ } span{ background-color: aqua; display: block;/*內聯標籤變塊標籤*/ } div{ display: none;/*隱藏*/ } a{/*對內聯標籤設置高寬是無做用的*/ background-color: aqua; width: 200px; height: 200px; } </style> </head> <body> <p>alex</p> <span>sssss</span> <div>ddddd</div> <a>aaaaa</a> </body> </html>
效果演示圖：
補充：
inline-block：塊級標籤變內聯標籤後能夠設置高度和寬度：
示例：p標籤是塊級標籤。
<style> p{ display: inline-block; width: 60px; height: 60px; background-color: rebeccapurple; } </style> <body> <p>alex</p> </body>
效果演示圖：
八、盒子屬性：
padding:用於控制內容與邊框之間的距離。
margin: 用於控制元素與元素之間的距離。
margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
內邊距會影響盒子的大小，外邊距不會影響盒子的大小,須要設置練習： 300px*300px的盒子裝着100px*100px的盒子，分別經過margin和padding設置將小盒子移到大盒子的中間
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .outer{ width: 300px; height: 300px; background-color: coral; border: 1px solid transparent; } .inner{ width: 100px; height: 100px; background-color: darkgoldenrod; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
設置大盒子爲300px*300px裏面小盒子爲100px*100px的效果圖：
下面將小盒子放在大盒子中間，就須要設置margin相關位置：
margin-top、margin-left
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .outer{ width: 300px; height: 300px; background-color: coral; border: 1px solid transparent; } .inner{ width: 100px; height: 100px; background-color: darkgoldenrod; margin-top: 100px; margin-left: 100px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
效果演示圖：
咱們發現大盒子沒有改變自己300px*300px的大小就能夠把小盒子移動到中間。
接下來咱們運用一下padding。
若是仍是300px*300px的大盒子裏面裝100px*100px的小盒子，經過設置padding來將小盒子放在大盒子中間，就會改變大盒子的大小！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .outer{ width: 300px; height: 300px; background-color: coral; padding-top: 200px; padding-left: 200px; } .inner{ width: 100px; height: 100px; background-color: darkgoldenrod; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <!--<div class="inner"></div>--> </div> </body> </html>
效果演示圖：
發現大盒子變大了一些。>>>若是想要大盒子大小不改變，那麼大盒子的margin和padding的大小都須要改動一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .outer{ width: 200px; height: 200px; background-color: coral; padding-top: 100px; padding-left: 100px; } .inner{ width: 100px; height: 100px; background-color: darkgoldenrod; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <!--<div class="inner"></div>--> </div> </body> </html>
效果演示圖：
注意1：
邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下，body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了，爲了驗證這一點，在上面的例子的基礎上加上：
<style> body{ border: 1px solid; background-color: darkgreen; } </style>
這裏不方便展現效果圖，能夠本身看一下效果。
上述問題>>>>>>>>>>解決辦法：
<style> body{ margin: 0; } </style>
效果展現圖：
ps：邊界已經沒有上面例子中的白色小縫隙了，例子中不是很明顯，試一試你就會恍然大悟。
注意2：margin collapse（邊界塌陷也稱邊界重疊）
外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。
設想，當咱們上下排列一系列規則的塊級元素（如段落P）時，那麼塊元素之間由於外邊距重疊的存在，段落之間就不會產生雙倍的距離。又好比停車場
一、兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值
二、父子div：若是父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，而後按此div進行margin。
示例：
<style> .outer{ width: 300px; height: 300px; background-color: coral; } .inner{ width: 100px; height: 100px; background-color: darkgoldenrod; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> </div> </body>
效果演示圖：
>>>解決辦法：
1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> .outer{ width: 300px; height: 300px; background-color: coral; padding: 1px; border: 1px solid mediumvioletred; } .inner{ width: 100px; height: 100px; background-color: darkgoldenrod; margin: 20px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> </div> </body> </html>
效果演示圖：
補充：
width:980px;
margin:0 auto;
設置div寬度爲980px，而後居中。
九、float：
首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。
示例：設置4個div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> .div1{ background-color: aqua; width: 200px; height: 100px; } .div2{ background-color: blueviolet; width: 400px; height: 120px; } .div3{ background-color: brown; width: 250px; height: 150px; } .div4{ background-color: darkgreen; width: 450px; height: 140px; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div> </body> </html>
效果演示圖：
能夠看出，即便div1的寬度很小，頁面中一行能夠容下div1和div2，div2也不會排在div1後邊，由於div元素是獨佔一行的。注意，以上這些理論，是指標準流中的div。
不管多麼複雜的佈局，其基本出發點均是：「如何在一行顯示多個div元素」。
浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不在一層。
例如，假設上圖中的div2浮動，那麼它將脫離標準流，但div一、div三、div4仍然在標準流當中，因此div3會自動向上移動，佔據div2的位置，從新組成一個流。
設置：
.div2{
background-color: blueviolet;
width: 400px;
height: 120px;
float: left; /*div2 脫離標準流*/
}
效果演示圖：
從圖中能夠看出，因爲對div2設置浮動，所以它再也不屬於標準流，div3自動上移頂替div2的位置，div一、div三、div4依次排列，成爲一個新的流。又由於浮動是漂浮在標準流之上的，所以div2擋住了一部分div3，div3看起來變「矮」了
這裏div2用的是左浮動(float:left;)，能夠理解爲漂浮起來後靠左排列，右浮動(float:right;)固然就是靠右排列。這裏的靠左、靠右是說頁面的左、右邊緣。
若是咱們把div2採用右浮動，會是以下效果：
此時div2靠頁面右邊緣排列，再也不遮擋div3，讀者能夠清晰的看到上面所講的div一、div三、div4組成的流。
目前爲止咱們只浮動了一個div元素，多個呢？下面咱們把div2和div3都加上左浮動，效果如圖：
同理，因爲div二、div3浮動，它們再也不屬於標準流，所以div4會自動上移，與div1組成一個「新」標準流，而浮動是漂浮在標準流之上，所以div2又擋住了div4。
咳咳，到重點了，當同時對div二、div3設置浮動以後，div3會跟隨在div2以後，不知道讀者有沒有發現，一直到如今，div2在每一個例子中都是浮動的，但並無跟隨到div1以後。所以，咱們能夠得出一個重要結論：
假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部老是和上一個元素的底部對齊。
div的順序是HTML代碼中div的順序決定的。
靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。
爲了幫助理解，再舉幾個例子。
假如咱們把div二、div三、div4都設置成左浮動，效果以下：
根據上邊的結論，跟着我再理解一遍：先從div4開始分析，它發現上邊的元素div3是浮動的，因此div4會跟隨在div3以後；div3發現上邊的元素div2也是浮動的，因此div3會跟隨在div2以後；而div2發現上邊的元素div1是標準流中的元素，所以div2的相對垂直位置不變，頂部仍然和div1元素的底部對齊。因爲是左浮動，左邊靠近頁面邊緣，因此左邊是前，所以div2在最左邊。
假如把div二、div三、div4都設置成右浮動，效果以下：
道理和左浮動基本同樣，只不過須要注意一下先後對應關係。因爲是右浮動，所以右邊靠近頁面邊緣，因此右邊是前，所以div2在最右邊。
假如咱們把div二、div4左浮動，效果圖以下：
依然是根據結論，div二、div4浮動，脫離了標準流，所以div3將會自動上移，與div1組成標準流。div2發現上一個元素div1是標準流中的元素，所以div2相對垂直位置不變，與div1底部對齊。div4發現上一個元素div3是標準流中的元素，所以div4的頂部和div3的底部對齊，而且老是成立的，由於從圖中能夠看出，div3上移後，div4也跟着上移，div4老是保證本身的頂部和上一個元素div3(標準流中的元素)的底部對齊。
有了上面的基礎，接下來的清除浮動就很好理解了。
通過上邊的學習，能夠看出：元素浮動以前，也就是在標準流中，是豎向排列的，而浮動以後能夠理解爲橫向排列。
清除浮動能夠理解爲打破橫向排列。
清除浮動的關鍵字是clear，官方定義以下：
語法：
clear : none | left | right | both
取值：
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象
定義很是容易理解，可是讀者實際使用時可能會發現不是這麼回事。定義沒有錯，只不過它描述的太模糊，讓咱們不知所措。
根據上邊的基礎，假如頁面中只有兩個元素div一、div2，它們都是左浮動，場景圖以下：
此時div一、div2都浮動，根據規則，div2會跟隨在div1後邊，但咱們仍然但願div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。
這時候就要用到清除浮動（clear），若是單純根據官方定義，讀者可能會嘗試這樣寫：在div1的CSS樣式中添加clear:right;，理解爲不容許div1的右邊有浮動元素，因爲div2是浮動元素，所以會自動下移一行來知足規則。
其實這種理解是不正確的，這樣作沒有任何效果。
對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。
怎麼理解呢？就拿上邊的例子來講，咱們是想讓div2移動，但咱們倒是在div1元素的CSS樣式中使用了清除浮動，試圖經過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，由於這個清除浮動是在div1中調用的，它只能影響div1，不能影響div2。
根據定論，要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，所以只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不容許出現浮動元素，這樣div2就被迫下移一行。
或者在div2的css樣式中使用clear：both。注：這個規則只能影響使用清除的元素自己，不能影響其餘元素。
那麼假如頁面中只有兩個元素div一、div2，它們都是右浮動呢？讀者此時應該已經能本身推測場景，以下：
此時若是要讓div2下移到div1下邊，要如何作呢？
一樣根據定論，咱們但願移動的是div2，就必須在div2的CSS樣式中調用浮動，由於浮動只能影響調用它的元素。
能夠看出div2的右邊有一個浮動元素div1，那麼咱們能夠在div2的CSS樣式中使用clear:right;來指定div2的右邊不容許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。
或者在div2的css樣式中使用clear：both也是能夠的。
10：position：
一、static，默認值 static：無特殊定位，對象遵循正常文檔流。
top，right，bottom，left等屬性不 會被應用。 說到這裏咱們不得不提一下一個定義——文檔流，文檔流其實就是文檔的輸出順序， 也就是咱們一般看到的由左到右、由上而下的輸出形式，在網頁中每一個元素都是按照這個順序進行排序和顯示的，而float和position兩個屬性能夠將元素從文檔流脫離出來顯示。 默認值就是讓元素繼續按照文檔流顯示，不做出任何改變。
二、position:relative
relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position</title> <style> .div1{ background-color: aqua; width: 200px; height: 100px; } .div2{ background-color: blueviolet; width: 400px; height: 120px; position: relative; /*沒有脫離文檔流*/ left: 20px; } .div3{ background-color: brown; width: 250px; height: 150px; } .div4{ background-color: darkgreen; width: 450px; height: 600px; } </style> </head> <body> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <div class="div4">div4</div> </body> </html>
效果演示圖：
爲了實現頁面能夠滾動，div4高度設置比較大，截圖只截了部分。重點是div2設置relative以後沒有脫離文檔流
absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。 若是設定 position:relative，就可使用 top,bottom,left和 right 來相對於元素在文檔中應該出現的位置來移動這個元素。[意思是元素實際上依然佔據文檔 中的原有位置，只是視覺上相對於它在文檔中的原有位置移動了] 當指定 position:absolute 時，元素就脫離了文檔[即在文檔中已經不佔據位置了]，能夠準確的按照設置的 top,bottom,left 和 right 來定位了。 若是一個元素絕對定位後，其參照物是以離自身最近元素是否設置了相對定位，若是有設置將以離本身最近元素定位，若是沒有將往其祖先元素尋找相對定位元素， 一直找到html爲止。
示例：
設置div3{position: absolute}
效果演示圖：div3會脫離文檔流
三、position:fixed
在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
示例：
設置div1{position:fixed}
效果演示圖就不在這裏展現了，能夠去抽屜新熱榜或者百度新聞這種網站看看，無聊頁面往下拉多少，最頂端會有一個導航一直都在固定的位置沒有動。
補充：
z-index：指定層級
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> </head> <body> <div style="position: fixed;left: 0;right: 0px;height: 80px;background-color: red;"></div> <div style="position: fixed;left: 0;right: 0px;height: 80px;background-color: green;"></div> </body> </html>
設置了一個紅色的div，一個綠色的div，此時綠色的div已經覆蓋了紅色的div。
若是不讓綠色覆蓋紅色，那就能夠用上z-index了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> </head> <body> <div style="position: fixed;left: 0;right: 0px;height: 80px;background-color: red;z-index:2"></div> <div style="position: fixed;left: 0;right: 0px;height: 80px;background-color: green;z-index:1"></div> </body> </html>
經過設定z-index的值，就可讓紅色覆蓋綠色。z-index的值最大的就呈如今最上面。
- 1. 前端之CSS
- 2. Web前端-CSS
- 3. 前端css position
- 4. 前端 CSS
- 5. 前端篇---------CSS
- 6. python--前端CSS
- 7. 前端之css
- 8. python前端CSS
- 9. 前端-html、css
- 10. 前端——CSS
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
- 1. 前端之CSS
- 2. Web前端-CSS
- 3. 前端css position
- 4. 前端 CSS
- 5. 前端篇---------CSS
- 6. python--前端CSS
- 7. 前端之css
- 8. python前端CSS
- 9. 前端-html、css
- 10. 前端——CSS