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的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（既内部块的左边界或margin的最左边与包含块的左边界同一位置）
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. 弹性元素和网格元素

IFC

• 创建条件

块级元素中仅包含内联级别元素(inline)

• 特性

1. 子元素水平方向横向排列，并且垂直方向起点为元素顶部。
2. 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
3. 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
4. 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
5. IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
6. IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
7. 当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
8. 当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

8、垂直居中方案

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

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

   <div style="height: 100px;">
       <div style="height: 100%;display: inline-block;vertical-align: middle;"></div>
       如果兄弟元素为行内元素，则会垂直居中
   </div>

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;子元素单独设置字体大小

 11、overflow导致子元素右边距失效

当父元素overflow设为scroll或auto且子元素大于父元素时，子元素的右边距失效或者父元素的右内边距无效，而且父元素的scrollWidth也不包含右边距。解决办法是把子元素设为inline-block、inline-flex、inline-grid和inline-table。