| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- <!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: 200px;
- height: 200px;
- color: #f00;
- background: #ff0;
- padding: 10px;
- margin:150px auto;
- border: 2px solid #000;
- box-sizing: border-box;
- /*
- 内边距：内容到盒子的距离
- padding 复合属性
- 上边距 padding-top
- 左边距 padding-left
- 下边距 padding-bottom
- 右边距 padding-right
- 一个值：上下左右
- 两个值：上下 左右
- 三个值：上 左右 下
- 四个值：上 右 下 左
- 外边距:盒子外部距离
- margin:复合属性
- 一个值：上下左右
- 两个值：上下 左右
- 三个值：上 左右 下
- 四个值：上 右 下 左
- 上边距 margin-top
- 左边距 margin-left
- 下边距 margin-bottom
- 右边距 margin-right
- */
- }
- </style>
- </head>
- <body>
- <div>
- 你好
- </div>
- </body>
- </html>
|
