| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- <!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>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- list-style: none;
- text-decoration: none;
- }
- .content {
- width: 200px;
- height: 200px;
- background: #00f;
- color: #fff;
- border: 2px solid #ff0;
- /* 内边距 复合属性
- padding:
- 1个值 上下左右
- 2个值 上下 左右
- 3个值 上 左右 下
- 4个值 上 右 下 左
- padding-top
- padding-bottom
- padding-left
- padding-right
- 外边距 复合属性
- margin:
- 1个值 上下左右
- 2个值 上下 左右
- 3个值 上 左右 下
- 4个值 上 右 下 左
- margin-top
- margin-bottom
- margin-left
- margin-right
- */
- padding: 20px 10px 30px 40px;
- padding-top: 40px;
- /* margin: 10px; */
- }
- .main {
- width: 100px;
- height: 100px;
- background: #f00;
- margin: 30px;
- }
- </style>
- </head>
- <body>
- <!--
- 盒模型
- 标准盒模型(IE盒模型) box-sizing:content-box;
- width=content(内容) + padding +border
- 怪异盒模型：box-sizing:border-box;
- width = content(width + padding + border)
- -->
- <div class="content">
- <div class="main"></div>
- </div>
- </body>
- </html>
|
