对于盒模型、BFC、清除浮动、和position5个定位的理解

一、盒模型

1. 在html页面中，每一个元素都可以看做成一个盒子，盒子由内容、内填充、边框、外边距构成。
2. 盒模型分为标准盒模型和怪异盒模型；
3. 标准盒模型在页面上占据的宽高为：本身设置的宽高+padding+margin+border
4. 怪异盒模型在页面上占据的宽高为：本身设置的宽高（已经包含padding和border）+margin
5. 在css设置盒模型:box-sizing:content-box（标准盒模型）;border-box（怪异盒模型）

二、BFC

1、概念

 BFC是“块级格式化上下文”，是一种css布局方式，同时是一块独立的区域，使其内部元素不受外部影响，同时也不影响外部元素，可以利用BFC解决外边距折叠问题

2、如何触发BFC

overflow:hidden

position:fixed/absolute

float:left/right

display:inline-block;/table-cell;/flex;/inline-flex;/table-caption

3、可以解决什么问题

1、外边距合并问题（兄弟级）：一个盒子margin-bottm，一个盒子margin-top谁的值大取谁的

     如何解决：给其中一个盒子外包一个空div给其设置overflow：hidden

2、外边距共用问题（父子级）：给子元素设置margin-top父元素却移动

      如何解决：给父元素设置overflow:hidden

3、清除浮动

        给塌陷元素（父元素）设置overflow:hidden

4、可以设置两栏布局（左边固定，右边自适应）

        两个元素，一个左浮，设置固定宽高和overflow-hidden，另一个宽度100%

5、解决文字环绕问题（如果图片浮动就会形成环绕）

       给文字设置overflow:hidden

 三、清除浮动

为什么要清除浮动？主要为了解决父元素因为子元素浮动而产生高度塌陷问题

1、给塌陷元素设置高度（父元素）

2、给受影响的元素后添加一个空div设置clear-both

3、给受影响的元素添加overflow:hidden属性

4、伪元素清除浮动（给受影响的元素的选择器后::after{}）

•    ::after{
  • content:" ";
  • display:block;
  • height:0;
  • clear:both;
  • overflow:hidden;
• }

四、position定位以及属性

1、静态定位（默认）：position:static

特点：不脱离文档流，方位词不对其生效

2、固定定位：position:fixed（以浏览器的可视窗口为基点进行定位）

特点：脱离正常文档流，位置固定在页面中，缩放不改变位置

3、粘性定位：position：sticky

特点：位置偏移是相对于自己的位置，满足条件时又成了固定定位，鼠标滑动位置也不动

4、相对定位：position：relative

relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

5、绝对定位：position：absolute（脱离正常文档流）

父相子绝，子相对于父级而改变位置，如果父级没有设置相对定位，那就基于浏览器，谁设置基于谁，前提是嵌套关系