![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：写的很不错，很认真，加油！
Collection
Collection
1.盒模型示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盒模型</title><style>.box {/* 宽 高 内容区 */width: 200px;height: 200px;}.box.one {/* 外边距 */margin-top: 40px;/* 内边距 */padding: 40px;/* 边框 */border: 5px solid #000;background-color: lightseagreen;/*属性规定背景的绘制区域。content-box 内容区*/background-clip: content-box;}</style></head><body><!-- 块级元素默认垂直排列 --><div class="box one"></div></body></html>
示例效果图：
1.margin 外边距
概念：margin属于盒模型外面的空间，或者是位于盒模型与文档中其他元素之间的区域，或者是盒模型与浏览器窗口之间的区域。margin在盒模型外围的，margin的大小不会对盒模型本身的大小造成影响。经常应用于页面布局盒子与盒子之间的距离
属性：margin-top(上外边距)、margin-right(右外边距)、margin-bottom(下外边距)、margin-left(左外边距)
值：支持length、百分比、auto
用法：
margin设置方法：
1: margin:10px 四周(上，右，下，左)
2: margin:10px 20px 上下 左右
3: margin:10px 20px 30px 上 左右 下
4:margin:10px 20px 30px 40px 上右下左
5:让子元素在父元素里面左右居中：margin:0 auto;
6.让子元素在父元素里面水平垂直居中
<!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: lightgreen;/* 父级转为定位元素 */position: relative;}.container .item {width: 100px;height: 100px;background-color: violet;/* 子级通过绝对定位来实现垂直居中 */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>
效果图：
2.padding 内边距
概念：padding内边距是元素的内容和边框之间的区域
说明
1.调整子元素在父元素里的位置
2.padding设置值会把盒子撑大
3.要想盒子保持原有大小 宽高须减去padding的值
值：支持length、百分比
用法：
padding设置方法：
padding:10px 四周
padding:10px 20px 上下 左右
padding:10px 20px 30px 上 左右 下
padding:10px 20px 30px 40px 上右下左
3.border 边框
概念：border用来控制盒边框的宽度，样式，颜色。
属性：值（不支持百分比）常用px
用法：
border:10px solid red;
border-width:10px;
border-style:solid;
border-color:red;
1:线性： solid(实线) dashed(虚线) dotted(点状线) double(双线) none/0(没有边框)
2：给单一一个方向添加边框：border-left/right/top/bottom:10px solid yellow;
3:边框设置方法;
border:solid red;
border-width:;
一个值：四周
两个值：上下 左右
三个值：上 左右 下
四个值：上右下左
4:transparent; 代替颜色值为透明
概念：box-sizing 通俗易懂就是重新计算盒子大小
用法：1.box-sizing: content-box; 默认值 以内容区为准2.box-sizing: border-box; 以边框为准
第一种是默认的我们就不说了 不设置就是默认 重点说下第二种
同样的代码盒子宽200高180设置的都一样 看以下例子：
1.不加box-sizing: border-box;的盒子效果：
上图我们可以看到不加box-sizing: border-box;的话盒子的大小是内容+内边距+边框+外边距的总和 超出了我们实际想要的盒子大小
2.加上box-sizing: border-box;的盒子效果：
上图我们可以看到加上box-sizing: border-box;的话盒子的大小是内容+内边距+边框+外边距的总和 大小还是我们设置的大小
1.理解盒模型常用属性margin，border，padding
2.理解怎么利用margin和定位技术对盒子进行水平垂直居中
3.理解元素大小的重新计算，box-sizing的用法
