img图片空隙问题

凡是带有inline的元素，都有文字特性有文字分隔符和空格

垂直方向父子元素margin问题/margin塌陷问题

如果父元素margin-top为100px，子元素margin小于父元素margin。子元素不会相对于父元素向下，如果子元素margin大于父元素margin，子元素也不会相对父元素向下，反而带动父元素一起向下偏移。

如何触发一个BFC

-

position:absolute;

-

display:inline-block;

-

float:left/right;

-

overflow:hidden;

当触发了BFC就可以解决上方的问题了

浮动元素如何被看到

每个产生了浮动流的元素，块级元素都看不到，产生了BFC的元素和文本类属性（inline）的元素以及文本都能看到浮动元素

padding的用处

文字不能放到padding内，但是背景颜色和背景图片可以放在padding内，可以用来将padding设置为容器高度，容器设置overflow:hidden;当容器背景图片被正常加载情况下，文字被隐藏，如果因为网络原因，图片没能加载，这时候文字会展示出来，这时候如果容器是个a标签，就仍然可以点击文字跳转

行级元素如何可以设置高度

当设置了position:absolute;或者float:left/right;就相当于将该元素的display设置成了inline-block

margin: 0 auto;不能居中的可能

需要注意使用margin: 0 auto;的元素是不是行级元素，行级元素需要display:block;才能设置；

比如button、img、input元素就是行级元素，会发现无法使用此方法居中。

或者可能是没有设置宽高导致无法居中。

css属性值计算过程

• 确定声明值（参考样式表中没有冲突重复的声明作为css属性值）

• 层叠冲突（样式表重复冲突的样式根据规则确定css属性值）

  • 比较重要性（作者样式表大于浏览器默认样式表）
  • 比较特殊性（比如css选择器权重大小）
  • 比较源次序（同一个样式后面的会覆盖前面的）

• 使用继承（此时还没有值的属性，如果可以继承，比如文字样式类，则继承父元素属性值）

• 使用默认值（最后还没有属性值，则使用默认值，比如背景颜色background-color）