盒子模型的初步了解

概念

盒子模型是css技术所使用的一种思维模型。盒子模型是指将网页设计页面中的内容元素看作一个个装了东西的矩形盒子。每个矩形盒子都由内容、内边距、边框和外边距4个部分组成(margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding都是css中的属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。)。除去内容部分，其余每个部分又分别包含上、下、左和右4个方向，方向既可以分别定义也可以统一定义。

盒子的大小:

我们通常在css中定义width和height只是内容区的高度和宽度

实际上盒子的大小:

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

盒子模型的布局:

1.水平方向上的布局:

元素在其父元素中水平方向的位置由margin-left border-left padding-left  width padding-left border-right margin-right

一个元素在其父元素中水平布局一定要满足上列属性相加等于其父元素内容区的宽度,如果相加结果使等式不成立,则成为过渡约束,则等式会自动调整

如果这七个值中没有auto的情况,则浏览器会自动调整margin-right使等式成立,width的默认值是auto.如果三个值都设为auto则外边距为0,宽度最大.如果两个外边距设为auto,宽度设为固定值,则将两个外边距调整为相同的值,从而实现子元素在父元素居中的情况

2.垂直方向上的布局:

如果父元素的高度小于子元素高度,或着没有设置父元素的高度,默认情况下父元素的高度会被内容撑开.如果子元素的大小超过父元素则子元素会从父元素中溢出(我们可以使用overflow属性设置来处理溢出的元素 ,它的默认值是visible表示可以溢出,hidden表示溢出的内容被剪裁不会显示,如果内容区是文字的话剪裁掉溢出部分不好,这时我们通常使用scroll属性值,生成两个滚动条,通过滚动条来查看完整的内容 ,还有一个auto属性值也可以生成属性条与scroll的区别是scroll是一定会生成横竖两个滚动条但auto如果有一个方向上内容不溢出就只好生成一端的滚动条)

盒子模型的部分相关元素的使用:

1.盒子的背景设置(background):

                   a.background-img:通过添加图片的路径将图片设置为盒子的背景图片

                   b.background-size:设置背景大小,可以通过使用属性值cover来使图片覆盖整个盒子

                   c.background-repeat;如果图片小于盒子大小,图片可能会在盒子内重复堆积,使用no-                            repeat可以让解决问题

                   d.background-color:设置背景颜色

 2.浮动(float):

                    我们可以通过float来让盒子进行移动但是一个盒子使用浮动就会脱离文档流从而引起高度崩塌的问题,将其他盒子进行覆盖(我们可以以下方法解决

a:额外标签法:
该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 html 代码所示：
<div class="app">
  <div class="app1">手机</div>
  <div class="app2">电脑</div>
  <div class="clear" style="clear: both;"></div>  <!-- 添加一个空的标签 --></div>

b.向父类元素中加入overflow: hidden进行消除

还有其他方法不太熟悉在这不多说了)

3.定位(position):

  我们可以通过运用position在进行盒子位置的改变,left right top bottom来对盒子进行位置改变

position我们通常会使用到他的以下几种属性值:

                   a.fixed可以将盒子位置进行固定

                   b.relative可以在通过方位属性值来对盒子本身相对进行移动

                   c.absolute可以使盒子相对与带定位的父类元素进行移动(此外我们还可以通过添加这                          个属性值,再通过z-index来进行盒子堆叠)

                      

4.圆角(border-radius)  :

   我们可以通过这个属性来改变盒子模型的四角形状

5.阴影:

 box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 outset/inset

本周总结:

在学习前端的这一周内刚开始感觉学到的知识很零碎,也并不知道如何去通过代码去实现,感觉所有的东西都是通过盒子模型来实现的,也在写网页的过程中学会了很多其他的知识

以上是我在这周对于盒子模型的理解,还有一些更加引深的知识希望可以在下面的时间内了解