|
|
@@ -0,0 +1,32 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ div{
|
|
|
+ /* 盒子模型 */
|
|
|
+ /* 内容区域 width宽度 height高度 */
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ /* border 边框 */
|
|
|
+ /* border: 边框宽度 边框样式 边框颜色 */
|
|
|
+ border:1px solid red;
|
|
|
+ /* padding 内边距 边框离内部元素的距离 */
|
|
|
+ /* padding:10; 上 右 下 左 全都是10像素 */
|
|
|
+ padding: 10px;
|
|
|
+ /* margin 外边距 边框离外部元素的距离 */
|
|
|
+ /* margin:10px; 上 右 下 左 全都是10像素 */
|
|
|
+ /* margin 不会改变元素尺寸 */
|
|
|
+ margin:10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 默认情况下（标准盒模型）边框和内边距会改变原有元素的宽度和高度 */
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div>你好</div>
|
|
|
+ <div>hello world</div>
|
|
|
+</body>
|
|
|
+</html>
|
