复习第三天

复习第三天

复习盒模型

盒模型的拓展

前两天复习过了一些HTML的基本元素，在这其中包括一些基本的盒模型和他们本身的属性，今天我进行进一步的拓展。

1、盒模型包括哪几部分（有图）

• content 内容主要区域
• padding 内填充（边框内部到内容这部分）
• border 边框
• margin 元素与元素之间的距离
  
  有了这些之后，就是计算盒的大小，这部分是我以前经常犯错误的一部分，容易忽略的点有：以为margin在盒的内部，忘了考虑border的占位（换句话说border是有宽度的。）

2、两种盒模型

• 标准盒模型： box-sizing：content-box；
• ie盒模型： box-sizing： border-box;
  下面是图:
  
  
  注意区分这两种盒模型大小计算方式：标准盒模型的大小是content部分加上padding部分的大小，而ie盒模型则将盒子的大小定义为仅仅只包括content部分，所以在给一个标准的盒子和一个ie模型的盒子设置相同的content与padding时，标准盒看起开会比ie盒大一些。下面是一个例子：
  
  

padding和margin的顺序

这里以padding为例子

<style>
      span{
          /*  上、右、下、左 顺时针方向 */
          padding:10px 50px 100px 200px;
          /* 上、左右、下 */
          padding:10px 50px 100px;
          /* 上下、左右 */
          padding:10px 50px;
          /* 四个方向 */
          padding:50px;
      }
</style>

两个比较重要的问题

1. margin值的穿透问题
   当我们在一个大盒子内部嵌套一个小盒子时，如果我们在没有给大盒子加上padding-top或者是border-top属性的时候给小盒子加上了属性margin-top，那么这个时候我们会发现大盒子和小盒子一并向下移动了，而当我们打开f12查看这个移动距离属于谁的时候，发现大盒子的margin还是0，只是被强行加上了一个和小盒子一样的margin-top属性。下面是实例：
   还没加小盒子的margin时：
   
   加上margin后
   
   这就是margin值的穿透问题，那么这个问题为什么会出现呢？？？？，这个我们还是需要看CSS2.1中的规定内容：

   In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌 套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

   这个规定导致了当我们在为小盒子设置margin值的时候大盒子会自动被认为是与小盒子毗邻的盒子，所以才导致了margin值的穿透。
   那么怎么解决呢？？？

   • 给大盒子加border-top:1px solid transparent ;
   • 既然margin-top有这样的问题，我们可以给大盒子增加padding-top，来 规避这个问题。
   • 给大盒子增加overflow:hidden（即触发bfc)
     BFC: block format context - 块级格式化上下文，每一个盒子当中都有一套正常的渲染规则，可以 但是这些渲染规则可以进行改变。

2. margin值的合并问题
   有两个兄弟盒子，box1和box2，当我们分别为两个盒子设置margin-bottom="10px"和margin-top="100px"时，我们会发现他们两个之间的距离并不是我们想要的110px，而是两者之间的最大值。并且这个问题只存在于margin-top和margin-bottom之间，左右不存在这种情况，解决办法也很简单，设置的时候给其中一个盒子多设置一些margin就可以了。