CSS的布局与定位----盒子模型
CSS的布局与定位----盒子模型
| 描述 | 格式 |
|---|---|
| 宽 | width |
| 边框 | border |
| 圆角 | border-radius |
| 高 | height |
| 内边距 | padding |
| 外边距 | margin |
为了更够直观的观察到盒子模型的属性值，我们画出了一下图来描述这些属性苏哟表达的意思。更加直观的知道margin是外边距，而padding是描述内边距的也是，content是文本内容。height和width就更不用说了一眼望去就是指的高和宽。这样也帮助了我们的记忆。
我们所了解的这些属性我主要会介绍以下三个的用法
- 外边距margin的用法
- 圆角边框border的用法
- 阴影box-shadow的用法
margin
| 略写使用 | 恢复原形 |
|---|---|
| margin：1px | margin：1px 1px 1px 1px |
| margin：1px 2px | margin：1px 2px 1px 2px |
| margin：1px 2px 3px | margin：1px 2px 3px 2px |
不知道有没有同学可以找到其中的规律，没错就是按照一定方向进行了缩写和略写，那到底是什么方向呢，可能大部分同学已经看出来了，是按照以上为起点，顺时针旋转上—右—下—左，对应省略。
那可能就有些同学给就要问那如果上下边界都是1px，我能不能对应缩写呢？
形如：margin：1px 2px 1px 3px 上，下边界虽然都是1px，但是不能缩写，想一想，要是我们在下方缩写了，那还能确定补位的是下方的还是左方的等呢。
水平居中小技巧：
- margin-left：auto；margin-right:auto
- margin：0 auto；
border
| 格式 | 表述 |
|---|---|
| border-width | px（像素） 、thick（粗）、medium（中）、thin（细） |
| border-style | dashed（虚线）、dotted（虚点）、solid（实线）、double（双实线） |
| border-color | 颜色（rbga） |
| border | width style color |
举例：
这两种使用方法都可以的。
border-radius
示例：
为了能够更加直观的看到这些变化，所以我设置的比较夸张。
思考一下，圆要怎么设置呢？
对，把我们border—radius 里的像素设置，应该是我们盒子的两倍，就可以设置成我们想要的圆框。
示例：
box-shadow
| 阴影位置 | 格式 |
|---|---|
| 外部阴影 | outset |
| 内部阴影 | inset |
使用方法：box-shadow：（inset）水平偏移 垂直偏移 模糊距离 颜色：
示例：
今天的盒子模型就介绍到这里了，有兴趣的朋友可以去实施。