![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：auto是css的好朋友, 好好学
Collection
Collection
content + padding + border + margin,如果设置padding会导致盒子的宽度变大,可以通过box-sizing改变标准,box-sizing:border-box就代表了盒子的实际宽度| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | 内容区content |
必须要有,相当于盒子里的物品,它的四周区域是可选的 |
| 2 | 内边距padding |
内容与边框之间的填充区域,相当于箱子里的泡沫 |
| 3 | 边框border |
边框可以将内容区与外界进行隔离,相当于盒子外包装 |
| 4 | 外边距 margin |
多个盒子之间的间隙,相当于和另一个盒子之间的距离 |
padding,margin,border 的每一条边都可以单独设置属性pading 和 margin 是背景透明的,所以只能设置宽度,不能设置颜色与样式内边距分为上右下左四个方向,如下:
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | padding-top |
上边距 |
| 1 | padding-right |
右边距 |
| 1 | padding-bottom |
下边距 |
| 1 | padding-left |
左边距 |
内边距属性值分为单值到四值的写法,如下:
| 序号 | 值数量 | 举例 | 描述 |
|---|---|---|---|
| 1 | 四值 | padding: 5px 10px 15px 20px |
上 — 右 — 下 — 左 |
| 2 | 三值 | padding: 5px 10px 5px |
上 — (左右相等) — 下 |
| 3 | 双值 | padding: 5px 10px |
(上下相等) — (左右相等) |
| 4 | 单值 | padding: 10px |
上下左右全相等 |
内边距分为上右下左四个方向,如下:
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | margin-top |
上外边距 |
| 2 | margin-right |
右外边距 |
| 3 | margin-bottom |
下外边距 |
| 4 | margin-left |
左外边距 |
内边距属性值分为单值到四值的写法,如下:
| 序号 | 值数量 | 举例 | 描述 |
|---|---|---|---|
| 1 | 四值 | margin: 5px 10px 15px 20px |
上 — 右 — 下 — 左 |
| 2 | 三值 | margin: 5px 10px 5px |
上 — (左右相等) — 下 |
| 3 | 双值 | margin: 5px 10px |
(上下相等) — (左右相等) |
| 4 | 单值 | margin: 10px |
上下左右全相等 |
border 比较特殊, 除了可以设置宽度, 还可以设置样式和颜色,所以有更多的属性solid,点状dotted,虚线dashed等| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | border-top-width: 1px |
上边框宽度 |
| 2 | border-top-style: solid |
上边框样式 |
| 3 | border-top-color: black |
上边框前景色 |
| 4 | border-top: 1px solid black |
上边框属性简写 |
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | border-right-width: 1px |
右边框宽度 |
| 2 | border-right-style: solid |
右边框样式 |
| 3 | border-right-color: green |
右边框前景色 |
| 4 | border-right: 1px solid green |
右边框属性简写 |
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | border-bottom-width: 1px |
下边框宽度 |
| 2 | border-bottom-style: solid |
下边框样式 |
| 3 | border-bottom-color: grey |
下边框前景色 |
| 4 | border-bottom: 1px solid grey |
下边框属性简写 |
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | border-left-width: 1px |
左边框宽度 |
| 2 | border-left-style: solid |
左边框样式 |
| 3 | border-left-color: skyblue |
左边框前景色 |
| 4 | border-left: 1px solid skyblue |
左边框属性简写 |
| 序号 | 值数量 | 举例 | 描述 |
|---|---|---|---|
| 1 | 三值 | border: 1px solid red |
宽度—样式—前景色 |
| 2 | 双值 | border: 1px solid |
宽度—样式:默认黑色 |
outline: 位于 border 与 margin 之间,不属于盒模型的一部分,因此不占空间auto可以自动计算子元素的宽度和外边距
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>* :not(body) {outline: 1px dashed;}.container {width: 200px;}p {width: 100px;margin-left: 20px;/* 通过浏览器自动计算margin-right的宽度,则是200-100-20=80px */margin-right: auto;}</style><title>Document</title></head><body><!-- 如果父元素指定了宽度,其中的子元素都设置了宽度,那么最后一个元素的宽度就可以写为auto,auto的意思就是浏览器自动计算 --><div class="container"><p>php.net</p></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.container {width: 1000px;height: 800px;margin: 0 auto;background-color: #ccc;}</style><title>Document</title></head><body><div class="container">指定盒子宽度,可以通过margin:auto水平居中</div></body></html>
float和position属性进行布局auto属性一般为浏览器自动进行计算,减轻了开发人员的手动计算,合理的利用auto属性对布局是有益的