盒模型、BFC、 清除浮动

1. 什么是盒子模型?

在HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容（content）、填充区（padding）、边框区（border）、外边距（margin）四部分组成。

2.盒子模型有哪两种 ？

标准和模型：总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型：总宽度= width + margin(左右)（即width已经包含了padding和border值

3.CSS3 box-sizing

box-sizing:content-box||border-box||inherit
box-sizing:content-box; 将采用标准模式的盒子模型标准

box-sizing:border-box; 将采用怪异模式的盒子模型标准

box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

4.盒子的样式
 

1.内边距(内边距在content外，边框内)

内边距属性：

padding          设置所有边距

padding-bottom     底边距

padding-left          左边距

padding-right          右边距

padding-top          上边距

2.边框

border-style   定义边框样式

单边框样式

border-top-style

border-left-style

border-right-style

border-bottom-style

border-top-width

border-left-width

border-right-width

border-bottom-width

边框颜色

border-color

css3边框

border-radius:    圆角边框

box-shadow:     边框阴影

border-image:     边框图片

3.外边距

围绕在内容边框的区域就是外边距，外边距默认为透明区域

外边距接受任何长度单位，百分数值

margin     设置所有边距

margin-bottom     设置底边距

margin-left          设置左边距

margin-right          设置右边距

margin-top          设置上边距

 

 

 BFC

1.什么是边距重叠？

两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上 

 

1.什么情况下会发生边距重叠？

 1. 父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距 

解决办法：给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距 

 

2. 同级兄弟关系的重叠 

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

 

 

 可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

 

什么是BFC？ 

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

怎么创建BFC

要显示的创建一个BFC是非常简单的，只要满足上述4个CSS条件之一就行。例如：

<div class="container">
  你的内容
</div>

在类container中添加类似 overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table 的规则来显示创建BFC。虽然添加上述的任意一条都能创建BFC，但会有一些副作用：

1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素

因而无论什么时候需要创建BFC，都要基于自身的需要来考虑。对于本文，将采用 overflow: hidden 方式：

.container {
    overflow: hidden;
}