CCS3上课笔记5

1、水平布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

一个元素在它父元素中，水平布局必须要满足以下等式：
margin-left + border - left + padding-left + width + padding-right + border-right + margin-right = 其父元素的内容区宽度
如果等式不成立，会自动调整，首先调整为auto的属性值。都没有首先调整margin-right。
如果都是auto，默认使width最大。如果两个外边距设置为auto，则会将外边距设置为相同的值。可以利用这个来使一个元素在父元素中水平居中。

width: xxxpx;
margin: 0 auto;

2、垂直布局

默认情况父元素的高度被内容撑开，如果子元素的大小超过了父元素的，会从父元素溢出。解决办法：overflow：默认visible；hidden：溢出内容会被裁剪l;scroll：生成两个滚动条；auto：根据需要生成滚动条。

overflow:visible/hidden/scroll/auto
overflow-x:visible/hidden/scroll/auto
overflow-y:visible/hidden/scroll/auto

3、外边距的折叠

相邻的垂直方向外边距会发生重叠现象：
兄弟元素：兄弟元素间的会取较大值。（如果相邻的一正一负，会取两者的和；都为负数，取两者绝对值较大的。）
父子元素：父子元素的相邻外边距，子元素的会传递给父亲（上外边距）。使用padding来解决。