问题背景
- 当某些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)
css
原文:http://kongxiaofa.blog.51cto.com/11365278/1981053
来源: http://www.bubuko.com/infodetail-2392407.html