[前端学习]css部分学习笔记，第六天

清除内外边距

• body、ul、li、ol等部分块级元素也会有默认的样式，就是内外边距，并且还是浏览器的问题，也会显示不一样的效果，所以为了兼容性会习惯把默认的样式取消。
• 方法：
  body,p,div,h,.....{
padding:0;
margin:0;
}
• 可以看见设置方法很简单，把body以及常用的块级元素并集选择设置内外边距为0即可。

外边距合并问题

• 外边距合并问题只会出现在盒子垂直关系中，水平不会出现，这是浏览器特性造成的。有以下两种情况：
  • 盒子与盒子之间的外边距合并。当给两个垂直相邻的盒子，同时指定了下外边距和上外边距时，它们的距离不是相加，而是以大的那个为准。数值大的那个边距会合并掉数值小的边距。这种情况的解决方法是避开这样的设置。
  • 嵌套关系盒子的外边距合并。如果你同时给父元素盒子、子元素盒子设置了一个上外边距（或者父元素不设置），它们也会合并，还是以大的数值为准，并且把数值应用到父元素上，子元素没有效果。解决方法：
    • 给父元素设置1px的边框或者内边距，把两个盒子隔开
    • 使用overflow:hidden;来触发BFC模式。

如何让子盒子在父盒子里水平垂直居中

• 可以通过两种方法来进行调试：
  • 以子元素的角度来看的话，可以设置外边距来水平垂直居中，就是用父盒子的宽减去子盒子的宽，再除以2就是外边距的值。两边外边距同时相等，自然就居中了。垂直同理。但是这个方法的问题就是要设置overfolw:hidden。
  • 以父元素的角度来看的话，可以设置内边距来让子盒子水平垂直居中。值的计算方法都是一样的，同样是大的减小的除以2，就是需要设置padding值。这个时候要注意，当你直接设置padding之后，实际上是不能居中，而是父盒子被撑大了。所以，需要把父盒子的宽高减去设置的padding值，才能正常居中。

盒子布局的稳定性

• 通常在盒子布局的时候，用什么类型来布局都是可以的，但如果硬要作一个稳定性的排名，是width>padding>margin，原因如下：
  • margin在布局时会出现外边距合并的问题，其次在ie6中margin有个双倍值的BUG；
  • padding在布局时很稳定，但是布局需要你根据padding值，在减盒子宽和高的值；
  • width是最稳定的，没有任何bug

普通流布局

• 普通流也叫文档流、标准流。之前练习的所有布局方式都是普通流。具体来说，普通流就是按照html标签的显示顺序来布局，块元素必须独占一行，行内元素必须从左至右来排列。我们能做的只是在固定的顺序上，做一些位置样式的调整，这就叫做普通流。