/*HTML標(biāo)簽類型
* 1.塊級標(biāo)簽:
* 1.1 獨占一行的標(biāo)簽
* 1.2 能隨時設(shè)置高度和寬度(如div p h1 h2 ul li)
*
*
*
*
* 2.行內(nèi)標(biāo)簽(內(nèi)聯(lián)標(biāo)簽)
* 2.1 多個標(biāo)簽?zāi)芡瑫r顯示在一行
* 2.2 寬度和高度取決于內(nèi)容的尺寸(如span a label)
*
*
* 3.行內(nèi)-塊級標(biāo)簽(內(nèi)聯(lián)-塊級標(biāo)簽)
* 3.1 多個行內(nèi)-塊級標(biāo)簽可以顯示在同一行
* 3.2 能隨時改變寬度和高度(如 input button)
* */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html</title>
<style>
/*HTML標(biāo)簽類型
*
1.塊級標(biāo)簽:
*
1.1 獨占一行的標(biāo)簽
*
1.2 能隨時設(shè)置高度和寬度(如div p h1 h2 ul li)
*
*
*
*
*
2.行內(nèi)標(biāo)簽(內(nèi)聯(lián)標(biāo)簽)
*
2.1 多個標(biāo)簽?zāi)芡瑫r顯示在一行
*
2.2 寬度和高度取決于內(nèi)容的尺寸(如span a label)
*
* *
3.行內(nèi)-塊級標(biāo)簽(內(nèi)聯(lián)-塊級標(biāo)簽)
*
3.1 多個行內(nèi)-塊級標(biāo)簽可以顯示在同一行
*
3.2 能隨時改變寬度和高度(如 input button)
*
*
*
*
*
*
4.修改標(biāo)簽的顯示類型
*
4.1 CSS中有個display屬性审胸,能修改標(biāo)簽的顯示類型
*
4.1.1 none: 隱藏標(biāo)簽
*
4.1.2 block: 讓標(biāo)簽變?yōu)閴K級標(biāo)簽 *
4.1.3 inline:讓標(biāo)簽變成行內(nèi)標(biāo)簽
*
4.1.4 inline-block:讓標(biāo)簽變成行內(nèi)-塊級標(biāo)簽
*
*
*
* /
/塊級/
div{
background-color: coral;
width: 150px;
height: 20px;
/隱藏這個div標(biāo)簽/
/display: none;/
/變?yōu)樾袃?nèi)標(biāo)簽/
display: inline;
}
/行內(nèi)/
span{
background: blue;
/設(shè)置無效/
width: 150px;
height: 20px;
/變?yōu)閴K級標(biāo)簽/
/display: block;/
display: inline-block;
}
/行內(nèi)-塊級*/
button{
background-color: pink;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>塊級標(biāo)簽</div>
<br />
<span>行內(nèi)標(biāo)簽</span>
<span>變成行內(nèi)-塊級標(biāo)簽</span>
<br />
<br />
<br />
<input />
<button></button>
<br />
<br />
</body>
</html>