【css】HTML標簽主要類型：塊狀元素(block)、行間元素(inline)
阿新 • • 發佈：2017-11-12
css
問題背景
當某些HTML標簽使用盒模型屬性時，部分屬性失效？
塊狀元素
獨占一行(是否添加width),該元素前後其他內容都要換行
直接適用盒模型的所有css屬性
行間元素
不獨占一行,多個行間元素可以在一行中呈現
部分適用css盒模型屬性：
·寬度、高度設置無效
·邊距設置：左右有效，上下無效常見塊狀元素
標簽 說明 <div> 盒子 <header><section><footer><aside><nav> 頁面布局類標簽 <h1>...<h6> 標題 <p> 段落 <ul><ol><dl><li> 列表類標簽 <form> 表單類標簽
常見行間標簽
標簽 說明 <span> 小組合(小盒子) <a> 超級鏈接 <strong> 重點強調 <em> 一般強調
塊狀元素 VS 行間元素
·塊狀元素可以嵌套塊狀元素，也可以嵌套行間元素 ·行間元素不能嵌套塊狀元素，只能嵌套行間元素 ·塊狀元素本身即是盒子，行間元素需要裝換後變為盒子
元素狀態轉變：
display+ block 塊狀元素 inline 行間元素 inline-block 本身是行間元素，但是具有盒模型屬性；適用於一行元素，需要設置為盒模型的場景 none 無;不保留物理空間
例子(display使用)：
1)創建一個按鈕模式的超級鏈接
知識點:a {display:block;}使a標簽具有盒模型屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>block</title>
<style>
#add-to-cart {width:180px;
height:40px;
background:#F30;
color:white;
display:block; /*將a標簽默認行間元素設置為塊狀元素*/
text-align:center;
line-height:40px;
font-family:‘微軟雅黑‘;
font-weight:bold;
text-decoration:none;
}
#add-to-cart:hover {background:#0C0;} /*翻轉色*/
</style>
</head>
<body>
<a href="#" id="add-to-cart">加入購物車</a>
</body>
</html>
2)導航條(使用inline-block)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>創建多個超級鏈接導航條</title>
<style>
div {width:600px;border:1px #999 solid;}
div a { width:98px;
height:38px;
display:inline-block;
background:#09F;
margin-right:1px;
color:#FFF;
text-align:center;
line-height:38px;
font-family:‘微軟雅黑‘;
font-size:14px;
border:0.5px #3F0 solid;
}
div a:hover{background:#FC3;} /*翻轉色*/
</style>
</head>
<div>
<a href="#">推薦網站</a><a href="#">新聞頭條</a><a href="#">電視劇</a><a href="#">最新電影</a><a href="#">小遊戲</a><a href="#">旅遊度假</a>
</div>
<body>
</body>
</html>
3)默認只有標題，鼠標移上去才有內容(使用display：none;)：顯式隱藏，不保留物理空間
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標交互時,顯示內容</title>
<style>
div {width:240px;border:1px #0F9 solid;padding:3px;}
div h3{font-size:14px;font-weight:normal;font-family:"微軟雅黑";
line-height:30px;
border-bottom:1px #0F6 solid;
}
div img{width:240px;}
div p {display:none;}
div:hover p {display:block;}
</style>
</head>
<div>
<h3>鼠標點上去才會出現內容</h3>
<p><img src="4.jpg" width=‘400px‘ /></p>
</div>
<body>
</body>
</html>
本文出自 “孔小發愛吃魚” 博客，謝絕轉載！
【css】HTML標簽主要類型：塊狀元素(block)、行間元素(inline)