Web front-end development, self-study notes
element type
1. Element Type
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素类型</title>
<style type="text/css">
p {
width: 100px;
height: 30px;
background: lightblue;
}
span {
width: 100px;
height: 30px;
background: lightcoral;
}
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!--
块状元素、行内元素、行内块元素、可变元素
-->
<!--1.块状元素
独占一行
可以设置宽度、高度
-->
<p>- 段落</p>
<p>- 段落</p>
<p>- 段落</p>
<div>- div标签</div>
<div>- div标签</div>
<br />
<!--2.行内元素/内联元素
行内逐个显示
不能设置宽度、高度
-->
<span>2018-</span>
<span>04-</span>
<span>21</span>
<br />
<br />
<br />
<!--3.行内块元素
行内逐个显示
可以设置宽度、高度
-->
<img src="../04-卧龙控股/img/bg.png"/>
<img src="../04-卧龙控股/img/bg.png"/>
<img src="../04-卧龙控股/img/bg.png"/>
</body>
</html>
2. Element type conversion-1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素类型转换</title>
<style type="text/css">
/*元素类型：inline*/
span {
width: 50px;
height: 50px;
background: blue;
color: white;
font-size: 30px;
text-align: center;
line-height: 50px;
/*改变元素类型*/
display: inline-block;
}
b {
font-size: 30px;
}
</style>
</head>
<body>
<!--
块状元素block、行内元素inline、行内块元素inline-block、可变元素
-->
<span>16</span>
<b>:</b>
<span>08</span>
</body>
</html>3. Element Type Conversion-2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素类型转换</title>
<style type="text/css">
.view1 {
width: 100px;
height: 100px;
background: lightblue;
/*display: block;*/
/*display: inline-block;*/
/*相当于给元素添加了display:block;*/
float: left;
}
.view2 {
width: 100px;
height: 100px;
background: lightgreen;
/*display: inline-block;*/
float: left;
}
i {
width: 30px;
height: 30px;
background: yellow;
}
</style>
</head>
<body>
<!--
块状元素：div、dl、dt、dd、ol、ul、h1-h6、form、hr、table、tr、td...
行内元素：a、span、i、b、strong、em、del...
行内块元素: img、input...
-->
<span class="view1">view1</span>
<span class="view2">view2</span>
<i>1</i>
<i>2</i>
</body>
</html>