css杂记

1、图片在不失真的条件下尽量铺满可以将图片设置max-width和max-height设为100%，若要居中则设text-align: center和行高。

2、margin和padding的百分比是根据父元素的宽度的，自测发现不包括padding、border、margin的长度。

3、将元素设为overflow: auto;可以默认不显示滚动条只在超出后显示滚动条。

4、position: absolute;是根据具有定位设置的父元素定位的，包括relative和fixed。

5、在使用position: fixed时，如果其祖先元素有transform且不为none，则该元素将基于该祖先定位。

关于该特性的讲解：https://zhuanlan.zhihu.com/p/95021620

6、盒子模型有两种标准：1、W3C标准模型；2、IE模型；

7、BFC（block formatting context）中文：块格式化上下文

• 特性

1. 内部的box会在垂直方向，一个接一个的放置
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3. 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算。

• 创建条件

1. 根元素或其它包含它的元素
2. 浮动 (元素的 float不是 none)
3. 绝对定位的元素 (元素具有 position为 absolute 或 fixed)
4. 内联块 inline-blocks (元素具有 display: inline-block)
5. 表格单元格 (元素具有display: table-cell，HTML表格单元格默认属性)
6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7. 块元素具有overflow，且值不是 visible
8. display: flow-root
9. 弹性元素和网格元素

8、垂直居中方案

1. 设置line-height等于高度，这种方法只适用文本或display: inline;

2. 调整基线，只适用于行内或行内块级元素

   
       
   
       如果兄弟元素为行内元素，则会垂直居中
   

3. 父元素display: flex;align-items: center;

4. 利用绝对定位加transform

5. display: table-cell;vertical-align: middle; 只适用于父元素为display: table;

 9、水平居中方案

1. text-align: center; 只适用于行内元素
2. margin: 0 auto; 只适用于宽度小于父元素的块级元素
3. 绝对定位加margin-left: -width/2; 只适用于已知宽度的元素
4. 父元素display: flex;justify-content: center;
5. 绝对定位加transform

10、行内块级元素之间的空隙解决方案

• 原因：由于浏览器默认将行内元素的换行符转为空白符

1. 将行内块级元素前后之间的开始标签和结束标签写在一行
2. 使用float
3. 父元素设置font-size: 0px;子元素单独设置字体大小