<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/mynote.ico" />
<title>盒子模型</title>
<style type="text/css">
#div1 {
width: 300px;
/*vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
具体描述如下:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值*/
height: 50vh;
background: gold;
margin: 100px;
padding: 100px;
/*边框的宽度,样式,颜色*/
border: 100px solid black;
/*边框样式分为:
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。*/
}
</style>
</head>
<body>
<div id="div1">
盒子模型分为外边框,边框,内边框
</div>
</body>
</html>