css学习笔记(杂)

关于垂直居中：

首先是用的比较频繁的line-height的设置，通过调整line-height值大小，对于行内非替换元素的垂直居中设置有奇效

<div class='container' style='line-height:150px;'>
    hello World!
</div>

然后是通过将display修改为table-cell来设置垂直居中对齐，这个对于块级元素也有很好的效果，当然不能忘了设置vertical-align:middle。

<div class='container' style='display:table-cell;vertical-align:middle;'>
    <div style='width:100px;height:100px;background:black;'></div>
</div>

最后是利用margin:auto 0;在寻常情况下，这个规则基本没效果。但是当包含块元素是relative，要居中的元素是absolute时，就可以产生很好的效果，html如下

<div class='container' style='position:relative;'>
    <img src="" width=100 height=100 style='margin:auto 0;position:absolute;top:0;left:0;bottom:0;'>
</div>

要注意的是对于子元素要设置好top，bottom，height，这样margin就会自动填充并使元素垂直居中

撑起浮动元素块

对于浮动元素块，经常发现父元素会只包含浮动元素块的一小部分，后面的元素就会在浮动元素附近出现。事实上，这是浮动规则特意遗忘的。浮动规则只处理了浮动元素和父元素的左右上边界，没有涉及下边界。即允许父元素不包裹浮动元素。要解决这个问题，主要有以下两个方法：

第一个是在浮动元素后设置一个不可见的小元素，对其加上规则：clear:both就好

<div class='container' style='background:red;'>
    <div class='inner' style='float:left;'>
        fafdsafds<br>
        fdafdsa<br>
        fdsafdsa
    </div>
    <div style='clear:both;'></div>
</div>

clear的作用是指定左或右或两边不允许有浮动元素出现，这样就将div推入了下一行，从而将container撑起来了

第二个方法就是将父元素设置为浮动元素，在css2.1中指出：浮动元素会延伸，从而包含其所有后代浮动元素，这样就可以把后代浮动元素包含在父元素中了

<div class='container' style='background:red;float:left;width:100%;'>
    <div class='inner' style='float:left;'>
        fafdsafds<br>
        fdafdsa<br>
        fdsafdsa
    </div>
</div>

合并外边距

对于上下外边距，正常流中垂直相邻外边距会合并，对于一个无序列表，其列表项前后相邻，假设对li做一下的规则

li {margin-top: 10px; margin-bottom: 15px; }

每个列表项有10像素的上外边距和15像素的下外边距。不过在显示这个列表时，每项之间的距离是15px，而不是25px。之所以这样，是因为相邻外边距中，小的那个会被大的合并掉

对于负外边距和正外边距同时存在的情况下，会对绝对值最大的负外边距和最大正外边距进行合并