css

1，盒模型宽度的计算

1，什么是盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

2，盒模型分为标准盒模型和怪异盒模型

box-sizing: content-box;标准盒模型是默认值，width是内容宽度 ，元素真正的宽度计算时要加上border（边框）和padding（内边距）
box-sizing: border-box;怪异盒模型则是元素的实际宽度 ，border（表框）和padding（内边距）不会撑高元素的宽度

举个例子：
如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，盒子宽度= {border+padding+content}
你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 盒子宽度={content - border - padding}

区别：
在标准盒模型中 ：width是内容宽度 ，元素真正的宽度 = content + border + padding;
在怪异盒模型中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding + border)

2，margin 纵向嵌套塌陷的问题

外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，
组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

有以下几种解决方案：

1. 直接给父元素添加属性overflow:hidden
2. 给父盒子添加border
3. 给父盒子设置padding-top

float 布局的问题

1，什么是浮动

脱离标准文档流，不占据原来的位置。浮动脱离标准流，
浮动元素的位置空出来，由非浮动元素占据.（脱离标准文档流，不占据原来的位置）
浮动的元素总是找它最近的父级元素对齐。但是不会超出内边距的范围

2，为什么要清除浮动

准确地说，并不是清除浮动，而是清除浮动后造成的影响，主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

3，清除浮动的方法

1. 加高法:直接给父元素设置一个高度。
2. 额外标签法
   是W3C推荐的做法，通过在浮动元素末尾添加一个空的标签，给其设置clear:both;
   例如 <div style=”clear:both”></div>
3. 父级添加overflow属性方法
4. 使用after伪元素清除浮动

 .clearfix:after {  
     content: "";     /*为伪元素加入空内容，以便伪元素中不会有内容显示在页面中*/
     display: block;  /* 用于显示伪元素*/
     height: 0;       /*高度设置为0，使伪元素不影响布局*/
     clear: both;      /*用于清除浮动*/
     visibility: hidden;   /*可见度为隐藏
}