<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素分类</title>
<!--
元素分类:
行级元素: a font strong b i ...
特性:
1.默认同行可以继续显示同类型标签
2.不支持宽高,内容决定宽度
3.不支持margin
块级元素: p div h1~h6 列表...
特性:
1.默认独占一行
2.支持限定宽高,没有宽度时默认占父元素的100%
3.支持所有css命令
内联块元素:img
特性:
1.同类型元素同行显示
2.支持宽度高度
display属性:
作用: ①控制元素的显示和隐藏
②块级元素与行级元素的转变
-->
<style>
#span1{
color: palegoldenrod;
}
#div1{
/*display: none;*/ /*隐藏元素的显示*/
display: inline-block; /*块级元素转换为行级元素*/
}
</style>
</head>
<body>
<a id="a1" href="">行级元素</a>
<font>font</font>
<span id="span1">span内容</span><br />
<img src="img/01.jpg" />
<span>图片后边的标记</span><br />
<div id="div1">display样式的应用</div>
<span>11111</span><br />
</body>
</html>
练习
demo05ex1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>参考文献</title>
<style>
.spanclass{
color: red;
}
* {
margin: 0px;
padding: 0px;
}
#con div{
margin-bottom: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="con">
<div>
<h4>参考文献</h4>
</div>
<div>
[1]<span class="spanclass">生无可我爸说我哭得我百度edge别的都恨不得独而不得U盾</span>
</div>
<div>
[1]<span class="spanclass">生无可我爸说我哭得我百度edge别的都恨不得独而不得U盾</span>
</div>
<div>
[1]<span class="spanclass">生无可我爸说我哭得我百度edge别的都恨不得独而不得U盾</span>
</div>
</div>
</body>
</html>