一、选择器（css如何选择html元素）
1)
- id选择器
- class选择器
- 标签选择器
- 通配符选择器，即
*{ } - 属性选择器
div[id = "only"] - 父子选择器/派生选择器
- 直接子元素选择器
- 并列选择器
- 分组选择器
- 选择器的css权重：
!important ---------> infinity;
行间样式 --------->1000;
id -------->100;
class/属性选择器/伪类选择器 --------> 10；
标签选择器/伪元素 --------->1;
通配符选择器 -------->0.
二、position定位
- 绝对定位absolute：相对于最近的有定位的父级进行定位，如果没有，那么相对于文档定位。脱离原来位置进行定位。（层模型）
- 相对定位relative：相对于自己原来的位置进行定位。保留原来位置进行定位。
- 固定定位fixed。
三、两个经典bug
1、BFC（格式化上下文）
1）BFC的特性：
① 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
②Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
③ 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
④BFC的区域不会与float box叠加。
⑤BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
⑥计算BFC的高度时，浮动元素也参与计算。
2）触发BFC：
① float 除了none以外的值，
②overflow 除了visible 以外的值（hidden，auto，scroll），
③ display (table-cell，table-caption，inline-block, flex, inline-flex) ，
④ position值为（absolute，fixed） ，
⑤fieldset元素 。
2、margin合并问题。
margin合并是指块级元素的上外边距与下外边距有时会合并为单个外边距。
（1）在块级元素中，不包括浮动和绝对定位元素。
（2）只发生在和当前文档流方向的相垂直的方向上。
场景①
相邻兄弟元素margin合并，可以设置浮动元素来解决：
效果如下：
当不写float:left时，因为第一行和第二行的元素合并在一起，所以他们的间距还是1rem，而并非上下相加。
场景②
父级和子级的合并，使用overflow属性来解决：
效果如下：
我们还可以通过设置父元素为块状格式化上下文元素、设置border、padding等方式来解决问题。
场景③
空级块元素的合并，为空块级元素设置一个高度就能够避免margin合并的问题。
效果如下：
没加高度之前：
加了高度之后：
注：新手写博客，如有错误，请指正，谢谢！
