1. 块元素使用CSS中的block定义,它有如下的特点:
- 总是在新行上开始
- 行高以及顶和底边距都可控制
- 如果不设置宽度,默认整个容器100%,设置了其值,将会应用我们所设置的值
- 常用的<p>、<h1>、<form>、<ul>和<li>等都是块元素
2. 通过display:inline语句,可以把元素设置为行内元素,inline元素的特点是
- 和其他元素都在一行上
- 行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度,不可改变
- 常用的<span>、<a>、<label>、<input>、<img>、<strong>和<em>等都是inline元素的例子
行内元素:可以在一行显示,不能设置高度宽度。
块状元素:不能再一行内显示,可以设置高度宽度。
example 1:
块元素
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.big{
width: 800px;
height: 105px;
background-image: url(3.jpg);
}
a{
font-size: 14px;
display: block;
width: 100px;
height: 20px;
line-height: 20px;
background-color: #F4FAFB;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #6666FF;
}
a:hover{
font-size: 14px;
display: block;
width: 100px;
height: 20px;
line-height: 20px;
background-color: #FF99CC;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<div class="big">
<p><a href="#">首页</a><a href="#">最新新闻</a><a href="#">最新产品</a><a href="#">关于我们</a><a href="#">联系我们</a></p>
</div>
</body>
</html>
example 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
.hang{display: inline-block;}
</style>
</head>
<body>
<div>
<a href="#" class="hang">这是a标签</a>
<span class="hang">这是span标签</span>
<strong class="hang">这是strong标签</strong>
</div>
</body>
</html>