|
|
@@ -0,0 +1,57 @@
|
|
|
+<!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>
|
|
|
+ /* 标准盒模型 box-sizing: content-box*/
|
|
|
+ /* 元素大小 = 内容大小（width,height） + 内边距(padding) + 边框(border) */
|
|
|
+ /* 怪异盒模型 box-sizing: border-box*/
|
|
|
+ /* 元素大小 = width,height */
|
|
|
+ .box{
|
|
|
+ background-color: red;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border:5px solid black;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 50px;
|
|
|
+ /* 盒子模型 */
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box2{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: red;
|
|
|
+ /* margin 两个值 第一个上下 第二个左右 */
|
|
|
+ /* margin 三个值 第一个上 第二个左右 第三个下 */
|
|
|
+ /* margin 4个值 第一个上 第二个右 第三个下 第四个左 */
|
|
|
+ /* margin:0 auto 0 auto; */
|
|
|
+ margin-left:auto;
|
|
|
+ margin-right: auto;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ /* border:5px solid black; */
|
|
|
+ /* border-top: 5px solid black;
|
|
|
+ border-bottom: 5px solid red;
|
|
|
+ border-left: 5px solid green;
|
|
|
+ border-right: 5px solid yellow; */
|
|
|
+
|
|
|
+ border-width: 5px;
|
|
|
+ border-style: solid;
|
|
|
+ /* border-color: black; */
|
|
|
+ border-color: green red blue yellow;
|
|
|
+ /* 圆角 */
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- <div class="box">hello</div> -->
|
|
|
+
|
|
|
+
|
|
|
+ <div class="box2"></div>
|
|
|
+</body>
|
|
|
+</html>
|
