html標簽(也叫元素)大概可以統分為三大類，塊元素、行內元素、行內塊元素，
塊元素
1，常用的塊元素：ul、li、div、p、dl、dt、dd、h1~h6，
2，塊元素支持所有的樣式，
3，盒子獨占據一行，即使設定了寬度，
4，如果沒有設定寬度，默認寬度為父元素的100%，
行內元素
1，常用的行內元素：span、a、em、i、b、strong，
2，只支持部分樣式，比如說，不支持寬、高、margin上下、padding上下，
3，盒子并在一行，
4，寬高由內容掙開，
5，如果代碼換行，盒子之間會產生間距，
6，子元素是行內元素的話，可以通過設定這個子元素的父元素的text-align屬性來設定水平對齊方式，
解決第 4 點問題
1，取消代碼間的換行，太麻煩了，不可取，
2，將這個行內元素的父元素的font-size值設為0，行內元素自身再設定font-size，
內斂塊元素
1，支持所有的樣式，
2，盒子并在一行，
3，代碼換行，盒子會產生間距，
4，子元素是行內元素的話，可以通過設定這個子元素的父元素的text-align屬性來設定水平對齊方式，
從某種程度上可以說行內塊元素結合了塊元素和行內元素的優點，雖然現有元素沒有歸于此類別的，但是可以通過display屬性來實作塊元素、行內元素、內斂塊元素的相互轉化，
display屬性
1，none 隱藏元素，且不占位置，
2，block 作為塊元素顯示，
3，inline 作為行內元素顯示，
4，inline-block 作為行內塊元素顯示，
在實際開發中，塊元素使用的較多，所以經常把行內元素轉化為塊元素，少量轉化為行內塊，而要使用行內元素時，直接使用行內元素，而不用塊元素轉化了，還是要視情況而定，
實際練習中遇到的問題：
1，行內元素設定寬、高、margin、padding無效，
2，通過設定行內元素或者行內塊元素的父元素的font-size為0，行內元素或行內塊元素的font-size為字體大小，來解決代碼換行帶來的間距問題，
3，通過設定盒子的行高line-height和盒子高度height為一樣的值，使得盒子內文字垂直居中?，
?4，ul、li、a等標簽都有自己的屬性，要根據需要調整，
練習代碼?：
<!DOCTYPE html> <html lang="ZH-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css練習一</title> <style> .con_page{ height: 40px; width: 600px; border: 1px solid rgb(128, 128, 125); text-align: center; list-style: none; padding: 0px; margin: 0px auto; font-size: 0px; } .con_page li{ margin: 7px 5px; display: inline-block; font-size: 12px; /* height: 26px; */ /* background-color: gold; */ } .con_page li a{ display: inline-block; height: 26px; padding: 0px 10px; line-height: 26px; background-color: gold; text-decoration: none; color: black; font-size: 12px; font-family: "Microsoft YaHei"; } .con_page a:hover{ background-color: red; color: white; } .menu{ list-style: none; margin: 50px auto 0px; height: 40px; width: 958px; border: 1px solid #666; padding: 0px; text-align: center; font-size: 0px; } .menu li{ display: inline-block; font-size: 14px; line-height: 40px; } .menu li a{ display: inline-block; height: 40px; line-height: 40px; font:normal 14px/40px 'Microsoft YaHei'; text-decoration: none; color: #000; } .menu li span{ display: inline-block; height: 40px; font:normal 14px/40px 'Microsoft YaHei'; margin: 0px 20px; } .menu li a:hover{ color: tomato; } .menu2{ list-style: none; margin: 50px auto 0px; height: 40px; width: 960px; border: 1px solid #666; padding: 0px; background-color: #55a8ea; position: relative; } .menu2 li{ width: 100px; height: 40px; /* text-align: center; */ float: left; } .menu2 li a{ display: inline-block; width: 100px; height: 40px; line-height: 40px; text-align: center; font-size: 14px; font-family: 'Microsoft YaHei'; text-decoration: none; color: #fff; } .menu2 li a:hover{ background-color: #00619f; } .menu2 .new{ width: 33px; height: 20px; background: url(./images/new.png) no-repeat; position: absolute; left: 334px; top: -8px; } </style> </head> <body> <ul class="con_page"> <li><a href="">上一頁</a></li> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li ><span>...</span></li> <li><a href="">17</a></li> <li><a href="">18</a></li> <li><a href="">19</a></li> <li><a href="">20</a></li> <li><a href="">下一頁</a></li> </ul> <ul class="menu"> <li><a href="">首頁</a></li> <li><span>|</span></li> <li><a href="">網站建設</a></li> <li><span>|</span></li> <li><a href="">程式開發</a></li> <li><span>|</span></li> <li><a href="">企業VI</a></li> <li><span>|</span></li> <li><a href="">案例展示</a></li> <li><span>|</span></li> <li><a href="">聯系我們</a></li> <li><span>|</span></li> <li><a href="">網路營銷</a></li> </ul> <ul class="menu2"> <li><a href="">首頁</a></li> <li><a href="">網站建設</a></li> <li><a href="">程式開發</a></li> <li><a href="">企業VI</a></li> <li><a href="">案例展示</a></li> <li><a href="">聯系我們</a></li> <li><a href="">網路營銷</a></li> <li class="new"></li> </ul> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63812.html
標籤：Html/Css