CSS的盒子模型之深入浅出

盒子模型

什么是盒子模型

首先，在接受这个知识之前我们要弄清楚一个问题，那就是什么是盒子模型以及盒子模型能够为我们解决什么问题？

盒子模型主要是针对页面布局的时候来使用了，它规范我们的页面的所有元素的一个布局标准是由外向内进行布局，在这个布局过程当中，这由外向内分别为5层，我们可以通过这5层的模型来快速的去识别出当前这个元素的外边框，内边框，元素的边框以及元素的大小，而这些大大的加强了元素在布局的时候的可识别性

盒子模型由外向内

margin(外边距)—>border(边框)---->padding(内边距)---->content(元素)

外边距margin

我们在进行CSS样式书写的时候，经常会用到一个属性就是边距，我们的边距分为两种，一种是外边距，一种是内边距，现在我们就来看一下外边距的使用

外边距在CSS当中，我们使用margin这一个属性

边距有四个方向是margin-top/margin-right/margin-bottom/margin-left这四个方向，通过这四个方向，我们可以设置元素的四个方向边距

当margin的属性为一个的时候，它代表四个方向的值都一样

当margin的属性值为2个的时候，它代表上下，左右这两个方向

当margin的值为3个的时候margin:10px 0px 20px，则会出现上边10px,左右为0，下边20px

当margin的值为4个的时候，分别是设置上、右、下、左这四个方向（顺时针）

有值 ，我们就去赋值，没值我们就按照箭头所指参照赋值

重点

margin这个属性可以接收具体的像素单位，也可以接收百分比，这些都是固定的，但有一个值非常特殊，它就是auto

当我们给一个margin-left:auto 这个时候，你会发现，元素跑到浏览器右边去了

根据这一个原理，当我们在这里在设置一个margin-right:auto的时候，它就会处于正中间

.div1{
    margin-left:auto;
    margin-right:auto;
}

上面的代码是设置一个div左右居中

上面的代码如果使用margin来直接赋值，如下：

.div1{
    margin:0px auto 0px auto;
}

上边的代码，我们可以进一步的简化为

.div1{
    margin:0px auto;
}

上面的代码我们通过测试可以变在下在的代码

.div1{
    margin:auto auto;
}

说明：当一个元素的上下外边距设置为0与设置为auto其实表现形式都是一样的

现在margin就有两个值了，有了两个值 以后，我们同样可以转变成一个值

上边简化后的代码，在设置的时候，可以做进一步的简化，因为上面的margin为0的时候，左右为auto，我们可以直接省略掉前面的0

.div1{
    margin:auto;
}

**注意：**到后期，我们会学到一个脱流现象（浮动与定位），一个元素脱流以后，就不能使用margin:auto进行居中了

margin穿透（margin折叠）现象

当我们在一个元素的内部设置另一个元素的margin时，为出现这个边框跑到外边的情况，这种现象叫margin穿透（margin折叠）

解决方法：

1. 设置外边元素的边框，并且同步设置box-sizing:border-box
2. overflow:hidden通过设置这个CSS样式也可以解决margin穿透的问题

内边距 padding

padding代表的是盒子内边距，它与上面的margin一样，都有四个方法，分别是padding-top/padding-right/padding-bottom/padding-left,同时也可以通过padding直接赋值是个方法

当我们在设置padding的时候，我们会发现，盒了的大小会发生改变，这是因为我们设置的是内边距，内边距又是在border边框里面的，这个时候，我们的盒子大小会被我们的内边距撑开，为了解决这个问题，我们需要改变内容区域的大小，但是这样做非常麻烦

为解决这个问题，CSS3出了一个新的属性叫box-sizing,它专门用来解决padding内边距的问题，当我们设置box-sizing:border-box的时候，这个时候，再设置padding的大小，盒子就不会撑开了

盒子模型概念

• 什么是盒子模型

  在CSS的标准里面，我们会把每一个元素都看成是一人盒子，为什么会看成一个盒子，是因为所有的元素都具备这样的五个特性

• 每个元素具备那5个特性

  • 元素宽度与高度 content
  • 元素内边距 padding
  • 元素边框 border
  • 元素外边距 margin
  • 定位 position

  这些五个特性，我们的W3C把它们画成一个模型，这个模型由外向由分别是position-margin-border-padding-content

HTML元素在CSS中的表现类型

在html里面，每一个html标签都会有一个自己特有的样式信息，例如select全呈现出下拉框，而input会呈现出输入框，而p标签会呈现出段落，这些都是html本身具备的样式信息，这些样式信息不用我们自己书写，是它自自带的系统样式

display属性

display这个属性是用来控制元素在页面上面的显示方式，当我们去设置display:none的样式时，元素就会在页面上面不会显示出来

在网页当中，我们的元素可以划分为三种类型，分别是“行内元素”，“块级元素”，“行内块级元素”,这三种类型的元素通过display这一个属性来控制，他们三个类型的元素分别具备不同的显示方式

块级元素

在网页当中，我们经常看到有些元素默认情况之下，宽度为100%，高度由内容决定，并且，默认不会书写在一行里面，这一种元素我们叫块级元素，如div，p,ul,table等标签,这些标签我们就属性块级元素标签

特点：

• 宽度默认100%；
• 高度默认由里面的内容决定
• 默认在网页中不会呈现在一行
• 可以通过width与height来设置他们的宽度与高度
• 它的居中方式是在当前的元素上面设置margin:auto来决定（一定要设置一个宽度，并且宽度不能是默认的100%）

一个元素如果要表示为块级元素，那么，它必定会有一个css属性为display:block

行内元素

在网页里面，行内元素默认会排在一行，它不可以通过width与height来设置它宽度与高度，宽的宽度与高度由时面的内容来决定

特点：

• 宽度默认为0;高度默认为0
• 如果行内元素里面有内容，那么它的宽度与高度由里面内容来决定
• 不能通过width与height来设定它的宽度与高度
• 在网页当中会默认呈现在一行里
• 如果行内元素在代码书写里面换行了，那么在页面上面，会默认的呈现出一个空格位()
• 它的居中方式是使用父级元素设置text-align:center

一个元素如果表现为行内元素，那么，肯定是通过display:inline来实现的，但是这个属性默认不会呈现在css样式里

####行内块级元素

顾名思义，行内块级元素就是既具备行内元素的特点，又具备了块级元素的特点

特点：

• 它具备行内元素的元素不换行的特点，呈现在一行
• 它具备行内元素在代码里面换行以后会在页面当中呈现出一个空格位的特点
• 它具备块级元素可以通过width与height去设置宽度与高度的特点
• 它的居中方式是使用父级元素设置text-align:center

行内块级元素，我们是通过display:inline-block来实现的

元素类型的互相转换

行内元素与块级元素的居中方案

• 行内元素的居中，我们使用text-align:center,但是这个时候，它的这个属性应该设置在它外边的块级元素上边

  <div class="div1">
      <span>你好啊</span>
  </div>
  <style type="text/css">
    .div1{
          border: 1px solid black;
          height: 50px;
          text-align: center;
      }
      span{
          border: 1px solid red;
      }
  </style>
  

  说明：我们现在是要让span里面的文字在div1中呈现出左右居中的效果，这个时候，我们必须把text-align:center这一个属性设置在外边的块级元素上面

  text-align:center 不仅仅可以设置行内元素，还可以设置行内块级元素

• 块级元素的居中，我们使用margin:auto,但是请注意，这个地方，一定要设置它的宽度（它的宽度不能是默认的100%）