day01 面试题总结

一.盒模型

1.每个元素都是一个盒模型，而盒模型分为内容，内边距，边框，外边距。

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

3.标准盒模型的宽 = width + margin（左右）+ padding（左右）+ border（左右）

 怪异盒模型的宽 = width + margin（左右）

4.盒模型css

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

二.BFC

1.边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。两种边距重叠（父子元素之间的重叠，兄弟元素之间的重叠）。解决边距重叠用overflow：hidden。

2.什么是BFC

BFC为块级格式化上下文，它是一块独立的布局环境也是一种css的布局方式，保护其中内部元素不收外部影响，也不影响外部。常用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的。

3.如何触发BFC

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

4.BFC的应用

1.可以用来自适应布局

2.可以清除浮动

3.解决边距重叠问题

三.清除浮动

1.添加一个空白标签，并给其设置clear:both。

2.给父级添加overflow方法

3.使用after伪元素清除浮动

4.使用before和after双伪元素清除浮动

四.position定位属性

1.默认定位：position:static

2.相对定位：position:relative

3.绝对定位：position:absolute

4.固定定位：position:fixed

5.粘性定位（吸顶效果）：position:sticky

6.继承父元素定位：inherit