css随便看看的第5天

1.盒子水平居中
让盒子水平居中，需要满足一下两个条件：
(1).必须是块级元素
(2).盒子必须指定了宽度
然后给盒子左右外边距设置为auto
示例 .header{width:300px;margin:0 auto;}
文字水平居中是 text-align:center;
2.外边距合并
注意： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。们尽量不要给行内元素指定上下的内外边距就好了。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
3.padding不会撑开盒子的情况

4.盒子圆角
border-radius 50%
border-radius：1px 1px 1px 1px;左上,右上,右下,左下
border-radius：10px 0;左上右下,右上左下, 类比margin padding
border-radius：10px 0 20px;左上,右上,左下,右下
5.盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
eg：box-shadow: 0 15px 30px rgba(0,0,0,0.1);

6.浮动（可以让块级元素一行内显示）float：left|right|none
使用inline-block 有间隙，并且无法直接设置靠右靠左
1.父子关系 子盒子浮动，脱离不了父级 也脱离不了父级的padding
2.平级关系 第一个盒子不浮动 占整行不变化 浮动之影响后面的元素
3.浮动有隐藏模式转换，可以让元素默认转换为行内块元素，如果行内元素浮动，则显示宽高