盒模型、BFC、浮动的解决办法和定位的使用

一、盒模型

1、什么是盒模型

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

2、盒模型的分类

        盒模型一共分为两种：

1、标准盒模型：盒模型的所有要素都具有，盒子宽度=内容宽+边框*2+左右内外边距

2、怪异盒模型：只具有内容和外边距，盒子宽度=内容宽+左右外边距

3、盒模型的转化

        box-sizing:content-box; 采用标准盒模型标准
        box-sizing:border-box; 采用怪异盒子模型标准
        box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

二、BFC

        BFC(Block Formatting Context)：块级格式化上下文。

        1）BFC的原理（渲染规则）

        1、BFC内的元素垂直方向的边距会发生重叠。属于不同BFC的元素外边距不会发生重叠。

        2、BFC的区域不会与浮动元素的布局重叠。

        3、BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。

        4、计算BFC高度的时候，浮动元素也会参与计算(清除浮动)。

        2）如何创建BFC

        1、overflow不为visible;

        2、float的值不为none；

        3、position的值不为static或relative；

        4.display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;

三、浮动的解决办法

        1、为什么要清除浮动

        原因是父元素没有设置高度，原本的高度，是由子元素撑起来的。当子元素浮动的时候，子元素是脱离文档流的,而父元素还是文档流里，这个时候，父元素的content没有东西，所以父元素的height就变为原本没有设置的高度（为0）。

        2、清除浮动副作用的办法

        1、添加伪类：after，

给父元素添加一个类，并给这个类设置伪类：after。

        2、使用BFC

 就是让浮动块包含在同一个BFC中加同时（也可以理解为包含块加属性overflow:hidden）。

四、定位

1、position: static 默认

会使元素忽略掉top、left、right、bottom或者z-index声明

一般情况用不到

2、position: relative 相对定位

相对定位相对的是它原本的位置而进行的偏移，由 left、right、top、bottom 属性确定，偏移前的位置保留不动

3、position: absolute 绝对定位

只能根据父类以上元素进行定位，而这个元素还必须是以postion非static方式定位的，且使用后必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致子元素遵从正常的HTML布局规则

定位口诀：父相子绝

4、position: fixed 固定定位

能够根据top、right、left、bottom属性进行定位，和absoult定位不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移

4、position: sticky 粘性定位

        当元素在窗口区域内，元素不受定位的影响（top、left等设置无效），当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果

        必须制定top,left,bottom,right四个中的至少一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；left和right同时设置时，left的优先级高。