“行内元素和块级元素”的版本间的差异
来自CloudWiki
（创建页面，内容为“==盒子布局的元素== *只有块级元素才可以进行盒子布局 *'''Tips:块级元素与行内元素''' *500px *最常用的块级元…”） |
|||
| 第4行： | 第4行： | ||
*[[文件:w2-13.png|500px]] | *[[文件:w2-13.png|500px]] | ||
*最常用的块级元素是可以作为容器的'''层（div)''' | *最常用的块级元素是可以作为容器的'''层（div)''' | ||
| + | |||
| + | ==相互转化== | ||
| + | *块级 -> 行内元素 ：添加display:inline属性; | ||
| + | *行内 -> 块级元素 ：添加display:block属性 或float:left属性；display:block转化为普通块级元素，float:left:转化为浮动的块级元素。 | ||
| + | |||
== 元素的display属性（块级/行内）== | == 元素的display属性（块级/行内）== | ||
2019年11月15日 (五) 02:37的版本
盒子布局的元素
- 只有块级元素才可以进行盒子布局
- Tips:块级元素与行内元素
- 最常用的块级元素是可以作为容器的层（div)
相互转化
- 块级 -> 行内元素 ：添加display:inline属性;
- 行内 -> 块级元素 ：添加display:block属性 或float:left属性；display:block转化为普通块级元素，float:left:转化为浮动的块级元素。
元素的display属性（块级/行内）
- display:显示方式;
- display属性可指定元素的类型以决定元素的显示方式，比如说：
inline 行内元素，在当前区域块内显示不换行（行内元素默认） block 作为块级元素显示一个新段落（块级元素默认） none 隐藏元素不显示，也不再占用页面空间，相当于该元素已不存在 list-itme 添加列表项的项目编号 inline-block 生成为行内块元素
- 行内元素除了通过display:block可转换成块级元素外，也可通过float:left浮动后将其设置为块级元素。
- 通过CSS“:hover”伪类或用JavaScript代码设置元素的display属性可实现动态隐藏元素为不可见或由不可见恢复为可见。
并另起一行显示在下一行—块级元素
- 试一试：W3C实例
- 代码：
<html>
<head>
<style type="text/css">
p {display: inline}
div a{display:block;}
#hidden {display: none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为行内元素。</p>
<p>而 div 元素不会显示出来！</p>
<div><a> 把a元素转化为块级元素</a>
<a> 把a元素转化为块级元素</a>
<a> 把a元素转化为块级元素</a>
<a> 把a元素转化为块级元素</a>
<a> 把a元素转化为块级元素</a>
</div>
<div id="hidden">div 元素的内容不会显示出来！</div>
</body>
</html>
