一、行内元素:
span a em strong b i 宽度取决于文字宽度 高度也取决于文字高度 并排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
height: 60px;
width: 200px;
/*转换-->显示模式属性 display:block块级 inline-block行内块 */
}
</style>
</head>
<body>
<span>蹦极</span>
<span>冲浪</span>
<span>篮球</span>
<span>跳伞</span>
</body>
</html>
height改为600px，之后大小没变
块级元素:
div p h系列 form table 不并排 100% 人为设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div>蹦极</div>
<div>冲浪</div>
<div>篮球</div>
<div>跳伞</div>
</body>
</html>
style内加
div{
height: 60px;
width: 200px;
}
行内块:
input image td 不并排、人为可设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<img src="../day03/img/网易云logo.png">
</body>
</html>
style内加上
img{
width: 300px;
height: 300px;
}
