- 使用 display:block 将内联元素转换为块级元素
- 使用 display:inline 将块状元素转换为内联元素
- 使用 display:inline-block 转为内联块元素
- 使用 display:none 使其作用的对象隐身
<!DOCTYPE html>
<!-- 盒模型 -->
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
/* 使用 display:block 将内联元素 a 转换为块级元素 */
a{
display: block;
background-color: green;
}
/* 使用 display:inline 将块状元素转换为内联元素 */
div,span{
display: inline;
background-color: pink;
}
/* 使用 display:inline-block 转为内联块元素 */
box1{
display: inline-block;
width: 80px;
/*在默认情况下宽度不起作用*/
height: 100%;
/*在默认情况下高度不起作用*/
background: rgb(245, 220, 151);
/*设置背景颜色为粉色*/
text-align: center;
/*设置文本居中显示*/
}
/* 使用 display:none 使其作用的对象隐身 */
box2{
display:none;
}
</style>
</head>
<body>
<p>
<a>块级元素特点:</a>
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
</p>
<hr>
内联元素特点:
<div>1、和其他元素都在一行上;</div>
<span>2、元素的高度、宽度及顶部和底部边距不可设置;</span>
<span>3、元素的宽度就是它包含的文字或图片的宽度,不可改变。</span>
<hr>
内联块状元素(inline-block):<br>
就是同时具备内联元素、块状元素的特点,代码 display:inline-block 就是将元素设置为内联块状元素。<br>(css2.1新增),img、input标签就是这种内联块状标签。
<br>
<box1>inline-block 元素特点:</box1>
<box1>1、和其他元素都在一行上;</box1>
<box1>2、元素的高度、宽度、行高以及顶和底边距都可设置。</box1>
<hr>
这里有一行隐身了:<br>
<box2>显示吗</box2>
<hr>
</body>
</html>
效果:
来自:html5+css3:https://www.imooc.com/learn/9