一、盒模型常用属性
每个盒子都由四个部分组成:
| 组成部分 | 描述 |
|---|---|
| 内容区域（content） | 包含元素的主要内容 可以是文本 图片等 |
| 内边距区域（padding） | 填充的是内容与边框的边距 可以用于延伸内容区的背景 |
| 边框区域（border） | 用于显示边框 |
| 外边距区域（margin） | 可以用于分开相邻元素 |
常用的属性及标签：
| 属性 | |
|---|---|
| width, min-width, max-width | 用于设置内容区域或者带边框区域的宽度 |
| height ,min-height, max-height | 用于设置内容区域或者带边框区域的高度 |
| padding | 用于设置内边距的宽度和高度 |
| border | 用于设置边框的宽度和高度 |
| margin | 用于设置外边距的宽度和高度 |
- position: relative;
一旦一个元素被添加了postion，且值非static，那么它就是定位元素; - position: absolute;
绝对定位：相对于它的定位父级进行定位 - position: fixed
固定定位：忽略你的定位父级，总是相对于<body>定位
二、元素大小计算
box-sizing重新计算盒大小的用法代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户自定义元素大小的计算方式</title><style>.box1 {width: 200px;height: 200px;background-color: red;margin: 20px;padding: 20px;border: 2px solid green;box-sizing: content-box;background-clip: content-box;}.box2 {width: 200px;height: 200px;background-color: blue;margin: 20px;padding: 20px;border: 2px solid green;background-clip: content-box;box-sizing: border-box;}</style></head><body><div class="box1"></div><div class="box2"></div></body></html>
设置了box-sizing: content-box;属性元素的宽度就会超过自己所设置的宽度大小
三、水平垂直居中
使用margin: auto来实现水平垂直居中:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>块元素的垂直居中margin:auto</title><style>.container {width: 300px;height: 300px;background-color: lightseagreen;position: relative;}.container .item {width: 100px;height: 100px;background-color: lightsalmon;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style></head><body><div class="container"><div class="item"></div></div></body></html>
总结
position：relative; 相对定位：以自己本身原来的位置为参照物进行偏移
position: absolute; 绝对定位：相对于最近的且不是static定位的父元素来定位
position：fixed;固定定位:相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
水平居中：marin:0 auto;/marin-left:auto;margin-right:auto;
垂直居中: 设置父元素的定位为绝对定位，然后设置元素充满，top=0;right:0;bottom=0;left=0;再设置上下居中，margin:auto;/margin-top:auto;margin-bottom:auto;