《盒子模型》

盒子模型

1. 简介

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。盒模型本质上是一个盒子，封装周围的HTML中的元素，它包括：边距，边框，填充，和主要内容。我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：

2.相关元素 （少部分）

margin(外边距) - 清除边框外的区域，外边距是透明的。
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
div(分块)-创建盒子、将盒子内部分为不同区域。
float(浮动)-float属性指定一个盒子（元素）是否应该浮动。
background(背景)-对盒子的背景进行设置。
position(位置)-设置每个盒子的位值。
text-align(文字的位置)-对文本位置进行设置。
:hover(添加样式)在鼠标移到链接上时添加的特殊样式。
line-height(行高)设置每行文字高度。

3具体实例

1.margin

（margin可以设置四个方向，margin-top、margin-bottom、margin-left、margin-right）
(1)无margin：

(2)有margin：

2.border（solid、dotted、dash…）

border有四个方向可以根据自己的需要进行添加。
(1)无border：

(2)有border(solid 实线型):

3.padding（增加盒子内边距，盒子的长宽也会随内边距增加而改变）

(1)无padding：

(2)有padding：
padding：50px；
可见盒子宽高都有改变，padding也有四个方向可任意调节。

4.div（分区域）

（解决网页放大缩小位置不会改变现阶段的我觉得最最最简单的就是多设置盒子把他们框起来）

<div class="one">
			<div class="two">
			</div>
</div>

5.float

(1)无float：

因为盒子默认在左边接下来所以用(float：right；)来介绍
(2)有float:

6.background

对背景进行调节，可以是改变颜色，也可以设图片为背景
上面便是以颜色,代码是

background-color:;

图片为

background-image: url(../img/1623327898532.jpeg);

当图片尺寸与盒子大小不相符是会出现重复可用下面的代码解决

background-repeat: no-repeat;

调节图片大小

background-size: cover;

cover可以修改为数字，但是cover会自己将图片覆盖为盒子大小。

7.position

分为静态，相对，绝对或固定，可根据自己的需要进行选择来确定盒子的位置

8.text-align

设置文字对齐方式
不设置：

text-align：center；

text-align：left；、text-align：right；与其类似，不过对齐的位置不同。

9.:hover

当鼠标移动上去时会出现已设置的效果
例如
(1)移动上去时出现阴影：

box-shadow: 4px 4px 20px #000000;

(2)移动上去时变暗

filter:brightness(60%);

(3)向上浮动

ransform: translate(0, -15px);

效果不明显就不放图了。

4总结

总的来说这一周是忙碌的一周，因为临近期末，有好多作业要写，好多课程都有结课作业，忙于奔波的倒霉孩子，结课作业动辄上千字，但好歹在忙碌的生活里也会有一缕阳光，尽管忙碌，但可以从中学到很多的知识，包括小组的这次考核，让我知道了很多有用的知识，虽然忙碌却也很充实，希望可以在以后学到更多有用的知识，向着“聪明绝顶”前进！