|
|
@@ -0,0 +1,44 @@
|
|
|
+<!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>Document</title>
|
|
|
+ <style>
|
|
|
+ #div1{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: #f00;
|
|
|
+ /* 内边距 内容和边框之间的距离 */
|
|
|
+ padding:20px;
|
|
|
+ /* 上 右 下 左 */
|
|
|
+ /* padding: 10px 20px 30px ; */
|
|
|
+ /* 边框：宽度 实线solid|虚线dashed */
|
|
|
+ border: 5px solid black;
|
|
|
+ /* 外边距 */
|
|
|
+ margin:50px;
|
|
|
+ /* border-box 怪异盒模型 |content-box标准盒模型 默认是标准盒模型 */
|
|
|
+ box-sizing:content-box ;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<!--
|
|
|
+ 框模型：内容+padding+border+margin
|
|
|
+
|
|
|
+ 标准盒模型：
|
|
|
+ 元素所占的宽高：内容200+padding+border
|
|
|
+
|
|
|
+ 怪异盒模型：
|
|
|
+ 元素所占的宽：内容+padding+border = width属性（200）
|
|
|
+
|
|
|
+ -->
|
|
|
+ <div id="div1">
|
|
|
+ 111111
|
|
|
+ </div>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
dongxiuling