95 lines
1.7 KiB
HTML
95 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width-device-width,initial-scale=1.0">
|
||
<title>display</title>
|
||
|
||
<style>
|
||
|
||
body {
|
||
|
||
}
|
||
|
||
div {
|
||
background-color: lightblue;
|
||
width: 100px;
|
||
height: 100px;
|
||
|
||
|
||
/* 块标签->行内标签 */
|
||
display: inline;
|
||
|
||
/* 块-> 行内块标签*/
|
||
display: inline-block;
|
||
|
||
vertical-align: middle;
|
||
/* 中线对齐 */
|
||
|
||
|
||
}
|
||
|
||
span {
|
||
background-color: salmon;
|
||
width: 100px;
|
||
height: 100px;
|
||
|
||
/* 行内标签->块 */
|
||
display: block;
|
||
|
||
}
|
||
|
||
|
||
img {
|
||
width: 300px;
|
||
vertical-align: middle;
|
||
/* 中线对齐 */
|
||
|
||
cursor:pointer ;
|
||
/* 鼠标悬停样式 */
|
||
|
||
display: none;
|
||
/* 关闭盒子 */
|
||
}
|
||
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div>
|
||
我是div
|
||
</div>
|
||
<div>
|
||
我是div
|
||
</div>
|
||
<span>
|
||
我是span
|
||
</span>
|
||
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.43Hx8xXHGxUiVTllqgR0XQHaKK?w=182&h=250&c=7&r=0&o=5&dpr=1.25&pid=1.7">
|
||
|
||
|
||
</body>
|
||
|
||
</html>
|
||
|
||
<!--
|
||
块标签
|
||
1.独占一行
|
||
2.他的宽度为父盒子内容宽度
|
||
|
||
行内标签
|
||
1.内容有空间就横着排，没有控件就换行 (可被文本样式更改)
|
||
2.宽高有内容决定，设置宽高无效
|
||
|
||
行内快标签（img）
|
||
1.宽高默认由内容决定，可以自定以宽高
|
||
2.他有行内的性质
|
||
|
||
|
||
|
||
--> |