关于CSS塌陷-行高-权重-的一些记录

CSS部分问题及解决

margin塌陷现象

什么是margin塌陷？

在标准文档流中，垂直方向的父子元素，当给子元素设置margin-top: 100px时，子元素不会相对父元素顶端距离100个像素，而是父子元素同时相对文档下移100px。或者同时给父子两个元素设置margin-top，但是呈现的效果是谁大，父子元素整体像下移动大的距离（此时子元素还是相对父元素不动）。这两种现象我们都称作margin塌陷。

解决方法

• 方法一：给父元素加上边框border:1px silod black;
• 方法二：给父元素加上绝对定位。position:absolute;
• 方法三：display:inline-block;让父级同时具有行级属性和块级属性
• 方法四：float:left/right;让父级产生浮动流
• 方法五：overflow:hiddle;溢出部分隐藏
  方案二到方案五的解决方案叫做“触发盒子的BFC模型”

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器

BFC触发条件

  1、浮动元素，float 除 none 以外的值； 
  2、定位元素，position（absolute，fixed）； 
  3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

BFC特性

  1.内部的Box会在垂直方向上一个接一个的放置。
  2.垂直方向上的距离由margin决定
  3.bfc的区域不会与float的元素区域重叠。
  4.计算bfc的高度时，浮动元素也参与计算
  5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

line-height特性以及line-height:1.5与1.5em/rem/%的区别

line-height，该属性设置行间距离（行高）

font-size还是line-height撑开的盒子

css代码：
.test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
.test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}

html代码：
<div class="test1">font-size</div>
<div class="test2">line-height</div>
结果不必多说自然是line-height撑开了盒子

而之所以line-height能够撑开盒子，是因为在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的工作就是包裹每行文字。一行文字一个line boxes，line boxes什么特性也没有，就高度。所以一个没有设置height属性的div的高度就是由一个一个line boxes的高度堆积而成的。

带单位or不带单位

不带单位比如：line-height:1.5就意味着line-height=font-size1.5,并且1.5作为继承因子，子元素计算line-height时也是等于font-size1.5
带单位比如% ：line-height:150%就意味着line-height=font-size*150%，并将计算结果的像素值继承下去，子元素的line-height则会得到一个固定值。
MDN建议，最好使用无单位数值设置line-height

CSS权重分级及值的计算（进制？）

CSS权重等级

我相信多数人跟我一样对css权重的认知只停留在

!important > 行内 > id > 类 > 标签 > 通配符 但如果问到权重的细分及计算可能就一头雾水了

可能有的人连伪类和伪元素的区别和权重值大小都分不清。

图片中没有!important但这并不影响它的权重值是无限大的，虽然说是无限大但在计算机中则是有界，不过讨论它的最大值是没有意义的。

CSS权重值的计算

关于CSS权重值的计算，最近看了几篇博客有说256进制甚至10进制的，有的则认为是不可进位的。上述观点则是和博客发表时间有关的。
这里引用了一篇不错的博客内容正确理解权重

文中提到权重值不存在进制，尽管实验结果也确实是这样，既然这样那为什么会有进制的观点产生呢？因为文中后半段也提到了早期某些浏览器的内部源码对选择器权重值的存储是
8比特或者16比特的。这也就意味当你的.class选择器权重值到255+1时就会从 0 0 0 255进位到0 1 0 0，从而导致id选择器被覆盖，我想这可能算是一个bug吧，可能设计者认为
不会有人使用这么多的类选择器，不过也确实没人使用这么多类选择器（除了做实验）

现在我们知道了256进制产生的原因那么10进制观点产生的原因是什么呢？ 无疑是想当然了 一些人看到类选择器是10以为就是十进制里的10（只要我有10个标签选择器我就能覆盖类选择器）所以才会有这种观点的产生吧