css基礎知識的復習總結（三）
阿新 • • 發佈：2017-07-02
網頁 元素 ati 塊元素 isp 方式 一半 浮動 .cn
1.定位的盒子居中顯示
案例一：（定位的盒子居中顯示）
預期效果
實現步驟：
設置父盒子為相對定位
設置子盒子left值為父盒子寬度一半
設置子盒子左邊距為自己寬度一半
總結：margin:0 auto 只能讓在標準流的盒子居中
案例二：（標準流的盒子居中顯示）
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> body,ul,li{ margin:0; padding: 0; } li{ list-style: none; } img{ border:0; } a{ text-decoration: none; } .banner{ width: 600px; margin:0 auto; } .nav{ height: 30px; background: url(1.jpg); line-height: 30px; } .nav ul li{ float: left; } .nav ul li a{ display: inline-block; width: 75px; height: 30px; font-size: 10px; font-family: 微軟雅黑; text-align: center; background: pink; } .nav ul li a:hover{ background: lightblue; } </style> </head> <body> <div class=‘banner‘> <img src="2.jpg"> <div class="nav"> <ul> <li><a href="">茂陵多病後</a></li> <li><a href="">尚愛卓文君</a></li> <li><a href="">酒肆人間世</a></li> <li><a href="">琴臺日暮雲</a></li> <li><a href="">野花留寶靨</a></li> <li><a href="">蔓草見羅裙</a></li> <li><a href="">歸鳳求凰意</a></li> <li><a href="">寥寥不復聞</a></li> </ul> </div> </div> </body> </html>
2.css標簽包含規範
◆div可以包含所有的標簽。
◆p標簽不能包含div h1等標簽。
◆h1可以包含p，div等標簽。
◆行內元素盡量包含行內元素，行內元素不要包含塊元素。
3.避免脫標流
a）由於浮動，定位都脫離了標準流，會對網頁布局造成一定的影響，在以後的網頁布局中優先考慮：標準流，浮動，定位。盡量使用標準流。標準流解決不了的使用浮動。浮動解決不了的使用定位。
b）案例
/*設置盒子左外邊距為auto，將盒子沖到右邊*/
margin-left:auto; 讓盒子左側充滿
使用上述方式避免脫標
4.避免脫標流之圖片和文字居中顯示
/*圖片和文字垂直居中對齊*/
vertical-align:middle;
5.css可見性
6.css內容移除（網頁優化，常用於logo優化）
7.精靈圖，滑動門
昨天熬夜了現在還是渾渾噩噩，早睡早起！
css基礎知識的復習總結（三）