css选择器，布局，BFC

一、选择器的优先关系

!important > 行内样式style > #id > .class > 标签div > 元素选择符 > *通用选择器

二、元素选择符有哪些

1. 包含选择符:E F（E所有的F包含子代，孙代，子子孙孙等等）
2. 子选择符:E > F（与包含不同的是，子选择符仅限于子代）
3. 相邻选择符:E + F（和E相邻的F，相隔一个都不算）
4. 兄弟选择符:E ~ F（和E同级的F）

三、不知道宽高实现垂直居中

1.display:flex

display: flex;
align-items: center;
justify-content: center;

2.绝对定位和transform

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
transform: translateY(-50%);

3.父级display:flex，子级margin:auto; 

4.网格布局display: grid;子级align-self

align-self: center;
justify-self: center;

四、css的网站的兼容问题 

1. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
2. 不同浏览器的标签默认的margin和padding不一样。

   *{margin:0;padding:0;}

3. BFC布局规则(https://blog.csdn.net/sinat_36422236/article/details/88763187)
   内部的Box会在垂直方向，一个接一个地放置。
   Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
   每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   BFC的区域不会与float box重叠,而是紧贴浮动元素。
   BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
   哪些元素会产生BFC
   1、给元素添加浮动，浮动元素就具有BFC特性---float: left/right;
   2、float属性不为none
   3、给元素添加定位---position: absolute，fixed
   4、给元素添加display属性---display: inline-block, flex, inline-flex, table-cell，table-caption;
   5、给元素添加overflow属性----overflow: hidden，auto，scroll(除了visible);

   在布局中BFC的应用场景
   使用场景解决了什么问题？

           ① 、自适应两栏布局

           ② 、margin 的重合

           ③ 、清除浮动

           ④ 、margin 的紧急拖拽