目錄：
HTML+CSS3（一）——認識瀏覽器
HTML+CSS3（二）——HTML 初識
HTML+CSS3（三）——HTML基本標籤
HTML+CSS3（四）——表單pattern正則屬性
HTML+CSS3（五）——CSS基礎
HTML+CSS3（六）——行內元素和塊級元素
HTML+CSS3（七）——display屬性（前面文章已講過，這裏轉載一篇）
HTML+CSS3（八）——CSS權重
HTML+CSS3（九）——CSS高級技巧
HTML+CSS3（十）——CSS3新特性之過渡
HTML+CSS3（十）——CSS3新特性之2D變形和3D變形
HTML+CSS3（十）——CSS3新特性之動畫
HTML+CSS3（十 一）——案例
HTML+CSS3（十二）——CSS常見問題
標籤分爲兩種等級：
1，行內元素。2，塊級元素。
行內元素和塊級元素的區別：
行內元素：
- 與其他行內元素並排
- 不能設置寬高，默認的寬度就是文字的寬度
塊級元素：
- 霸佔一行，不能與其他任何元素並列。
- 能接受寬高，如果不設置寬度，那麼寬度將默認變爲父級的100%。
塊級元素和行內元素的分類：
在HTML的角度來講，標籤分爲：
文本級標籤：p , span , a , b , i , u , em
容器級標籤：div , h系列 , li , dt ,dd
p：裏面只能放文字和圖片和表單元素，p裏面不能放h和ul，也不能放p。
從CSS的角度講，CSS的分類和上面的很像，就p不一樣：
行內元素：除了p之外，所有的文本級標籤，都是行內元素。p是個文本級標籤，但是是個塊級元素。
塊級元素：所有的容器級標籤，都是塊級元素，以及p標籤。
塊級元素和行內元素的相互轉換：
我們可以通過display屬性將塊級元素(比如div)和行內元素進行相互轉換。
display：inline;
那麼這個標籤將變爲行內元素，即：
1，此時這個div將不能設置寬度和高度了。
2，此時這個div可以和其他行內元素並排了。
同樣的到了我們也可以用display將行內元素(比如span)轉行成塊級元素。
display：block；
那麼這個span標籤將變爲塊級標籤，即：
1，此時這個span能夠設置寬度，高度。
2，此時這個span必須獨佔一行，其他元素無法與之並排。
3，如果不設置寬度，將佔滿父級。
標準流裏面的限制非常多，導致很多頁面效果無法實現，如果我們現在就要並排，並且就要設置寬度，就hi有：脫離標準流。
CSS一共有三種手段，是一個元素脫離標準流文檔：
-
浮動
-
絕對定位
-
固定定位
浮動：
浮動是CSS裏面佈局最多的一個屬性。
float：表示浮動的意思。
屬性：
- none：表示不浮動，默認。
- left：表示左浮動。
- rigth：表示右浮動。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ /*margin: 0;*/ } .box1{ width: 300px; height: 300px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: green; float: right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <span>路飛</span> </body> </html>
我們會發現，三個元素並排顯示，.box1和span因爲是左浮動，所有緊挨在一起，這種現象是貼邊現象。
.box2盒子因爲是右浮動，所以緊靠着右邊。
浮動的四大特性：
1，浮動的的元素脫標，
2，浮動的元素互相貼靠。
3，浮動的元素由"子圍"效果。
4，收縮的效果。
浮動元素的脫標：
脫標：就是脫離了標準文檔流。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ float: left; width: 300px; height: 50px; background-color: green; } </style> </head> <body> <div class="box1">小紅</div> <div class="box2">小黃</div> <span>顧清秋</span> <span>顧清秋</span> </body> </html>
效果：紅色的盒子蓋住了黃色的盒子，一個行內的span標籤，竟然能夠設置寬高了。
原因1：小紅設置了浮動，而小黃並沒有設置浮動，小紅脫離了標準文檔流，其實就是他不在頁面中佔據位置了，此時瀏覽器認爲小黃是標準文檔流的第一個盒子，所以就渲染到了頁面中的第一個位置上，這種現象，也有一種叫法：浮動元素"飄起來了"。
原因2：所有的標籤一旦設置浮動，就能夠並排且不區分塊元素或行內元素，換言之，能夠設置寬高了。
浮動元素互相貼靠：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 100px; height: 400px; background-color: red; float: left; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } </style> </head> <body> <div class="box1">小紅</div> <div class="box2">小黃</div> <div class="box3">小綠</div> </body> </html>
效果發現：如果父元素有足夠的空間，那麼小綠就會緊靠小黃，小黃緊靠小紅，小紅靠着邊。
如果沒有足夠的空間，小綠那麼就會靠着小紅，若沒有足夠的空間靠着小紅，就會自己靠邊。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 300px; border:1px solid black; } .box1{ width: 100px; height: 400px; background-color: red; float: left; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 80px; height: 300px; float: left; background-color: green; } </style> </head> <body> <div class="box"> <div class="box1">小紅</div> <div class="box2">小黃</div> <div class="box3">小綠</div> </div> </body> </html>
浮動元素字圍效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:0; } div{ float: left; } p{ background-color: # 666; } </style> </head> <body> <div class="d1"><img src=" ../../images/1.jpg" alt="圖片"></div> <p style="font-size:34px" >顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋</p> </body> </html>
效果發現：所謂的字圍效果，當div浮動，p不浮動，div遮蓋了p,div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。
浮動元素緊湊效果：
收縮：一個浮動元素，如果沒有設置width，那麼就自動收縮爲文字的寬度。（和行內元素很像）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>緊湊效果</title> <style> div{ float: left; background-color: red; } </style> </head> <body> <div>顧清秋</div> </body> </html>
謹記：關於浮動，一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清楚浮動。
爲什麼要清楚浮動：
在頁面佈局的時候，每個結構中的父元素的高度，我們一般不會設置。
大家想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，老闆說頁面某一塊的區域，我要加點內容，或者我覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那麼此時作爲一個前端小白，肯定是去每個地方加內容，改圖片，然後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮動，父級一般不設置高度*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; height: 100px; float: left; background-color: blue; } .father{ width: 1126px; height: 600px; background-color: purple; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> </body> </html>
效果發現：如果不給.father一個高度，那麼浮動子元素是不會填充父盒子的高度，那麼.father2的盒子就會佔據第一個位置，影響頁面佈局。
那麼我們知道，浮動元素確實能實現我們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面佈局極大的錯亂！！！所以我們要清除浮動！
清除浮動的方法：
1，給父盒子設置高度。
2，clear：both;
3，僞元素清除法
4，overflow：hidden；
給父盒子設置高度：
使用不靈活，會固定父盒子的高度。
clear：both；
clear：意思就是清楚的意思。
有三個值：
left：當前元素左邊不允許有浮動元素，
rigtht：當前元素右邊不允許有浮動元素。
both：當前元素的左右兩邊都不允許有浮動元素。
給浮動元素後面加一個空的div，並且該元素不浮動，然後設置clear：both。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li{ float: left; width: 100px; height: 40px; background-color:red; } .clear{ width: 200px; height: 200px; background-color: yellow; clear:both; } </style> </head> <body> <div> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="clear"></div> </body> </html>
僞元素清除法(常用)：
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然後設置：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li{ float: left; width: 100px; height: 40px; background-color:red; } .clear{ width: 200px; height: 200px; background-color: yellow; /*clear:both;*/ } .clearfix:after{ content: '.'; height: 0; clear:both; display: block; visibility: hidden; } </style> </head> <body> <div class="clearfix"> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="clear"></div> </body> </html>
overflow:hidden(常用)：
overflow屬性規定當內容溢出元素框時，發生的事情。
屬性值：
visible：默認值，內容不會被修剪，會呈現在元素框之外。
hidden：內容會被修剪，並且其餘內容是不可見的。
scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto：如果內容被修剪，則瀏覽器會顯示滾動條以便利查看其餘內容。
inherit：規定應該從父元素繼承overflow屬性的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ overflow: scroll; } div{ width: 100px; height: 100px; overflow: inherit; } </style>
</head>
<body>
<div>顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋</div>
</body>
</html>
