问题背景
当某些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>
时间： 2024-09-28 18:42:25