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.他有行内的性质
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
-->
|