每日分享！介绍Css 盒模型！

如何定义盒模型：

      在CSS盒子模型理论中，页面中所有的元素都是看成一个盒子，并且还占据一定的空间。

　　一个页面是由很多这样的盒子组成的。这些盒子之间都会相会影响，因此我们掌握CSS盒模型相当重要。需要理解盒模型，我们需要从两个方面去考虑：一.理解一个单独盒子的内部结构，二是理解多个盒子之间的相互关系！

　　盒子的组成：盒子是由（content（内容） + padding（内边距）+ border（边框） + margin（外边距） ） 四个属性组成。此外，在盒子模型中，还有width（宽度）和 height（高度）两个辅助属性。

　　*****记住，所有的元素都是可以看成一个盒子。

 

下图是盒子模型示意图：

　　

下面介绍盒子模型的具体属性：

border： （边框） 元素边框

margin： （外边距） 用于定义页面元素与元素之间的距离

content： （内容） 可以是文字或是图片

padding：（内边距）用于定义内容与边框的距离（通常也称为补白）

 

--------------------华丽分割线-----------------------------

1.内容区

　　内容区是CSS盒子模型的中心，它呈现的是盒子的主要信息内容，这些内容都可以是文本、图片等多种类型、内容区是盒子的必要组成部分，其他三个部分都是可以选的；内容区还有三个属性，

分别是：width，height，overflow。使用width和height属性可以指定盒子的宽度和高度。这里必须要注意的是：width和height这俩个属性是针对内容区而言的，并不包括padding部分。overflow的作用是当盒子的内容部分溢出时，超出部分，可以是 使用overflow来处理。

2.内边距

　　内边距，指的是盒子内容与border之间的空间，可以看作是内容区的背景区域。

　　关于内边距的属性又五种，分别是padding-left / padding-top/ padding-bottom /padding-ring /    以及综合来这四种方式的padding。使用这个方式直接可以简写边距：如

padding：10px 20px 20px 20px  ( 指的是上右下左）   ----->值得注意的是。方向都是从上边距开始-然后是右=====》下=======》左；这样的方式区写。如果只写两个：如padding：10px 30px;  表示上下边距是10px 左右边距30px； 

3.边框

　　在CSS 盒子模型中，边框的属性又border-width/ border-style/ border-color/ 以及综合了这三个方式的 border。 其用法如下：border:1px solid red ;  其含义是定义一个边框为1px，实线。红色的一个边框。 其中根据意思我们就可以得知border-widht表示的是线宽。border-style表示的是线的类型，border-color：表示的是线的颜色。

4.外边距

　　外边距，指的是两个盒子之间的距离，也可能是子元素与父级元素之间的距离，也可以是兄弟之间的距离。

　　外边距使得元素之间不必紧凑的联在一起，是CSS布局的一个重要的手段。

　　外边距的类型同内边距一样，也有五种。可以分别来说就是 margin-top/margin-right/ margin-bottom / margin-left .。综上四种方式，可以直接使用margin来表示；如margin：10px 10px 20px 20px ; 表示的是距离其他元素边距分别为：上边距为10px，右边距10px, 下边距10px，左边距10px 。

　　同时，CSS允许给边边距属性指定负数值，当指定的负边距距离时，整个盒子可以向指定负值相反的方向去移动，这样就产生来盒子重叠的效果。这也是传说中的“负margin技术”。

 

-----------------------华丽分割线----------------------------------------

总结：

这一节，就先简单的介绍盒子模型（介绍来盒子模型的组成部分，以及每个组成是什么含义，以及用法）。盒子模型在前端开发过程中十分重要！一定要掌握透彻！后面可以还会分享盒子边距重叠以及如何解决。今天就先介绍到这里啦～～～2019-04-22 22:16:28