css元素的水平与垂直布局

水平布局

一个元素在其父元素水平方向上的位置由margin-left,border-left,padding-left,content(width),padding-right,border-right,margin-right共同决定。

一个元素在父元素中时，必须满足以上七个属性值的和等于其父元素内容区的width。

若等式未成立，则会把这种情况称为过度约束，此时等式会自动进行调整，调整的情况为：

• 如果七个值中没有为auto的，浏览器自动调整margin-right来配平等式。
• 七个值中width，margin-right，margin-right可以设置为auto。
  • 当其中某个值为auto时，自动调整auto值配平等式。
  • 当一个外边距与width都是auto时，width调整为最大，外边距的auto为0；
  • 当三个值都为auto时，width调整为最大，两个外边距都为0；
  • 当两个外边距都是auto，width固定时，会调整两个外边距的值相等并配平等式。利用这一点可以将元素在其父元素中居中。

垂直布局

默认情况下父元素的高度被内容撑开。

子元素在父元素的内容区进行排序，若为父元素固定了内容区的height，同时子元素超出了父元素的height，这种情况叫做子元素从父元素中溢出，一般使用overflow处理溢出。

overflow

用于设置在父元素中如何处理溢出的子元素。

可选值：

1. visible：默认值，子元素从父元素中溢出，在父元素外部显示；
2. hidden：隐藏，溢出部分会被裁减，不会显示；
3. scroll：滚动，生成两个滚动条，通过滚动条查看完整内容；
4. auto：根据需要生成滚动条

可以使用overflow-x或overflow-y单独处理水平或垂直方向上的溢出。

垂直外边距的重叠问题

相邻的垂直方向上的外边距会发生重叠现象。根据定义可以分析外边距重叠主要有两种情况：兄弟元素间的外边距重叠与父子元素间的外边距重叠。

兄弟间的外边距重叠

由于外边距可以为负值，这里又对几种情况进行分类。

1. 两者都是正值：取两者间的较大值；
2. 一正一负：取两者的和
3. 都是负值：取两者中绝对值较大的。

兄弟外边距重叠有利于开发，一般不做处理。

父子间的外边距重叠

父子元素间的相邻外边距，子元素会传递给父元素（主要指上边距），从而影响页面布局，必须进行处理。

处理方式：

1. 不使用外边距：使用父元素的padding也可以改变子元素位置，但需要改变父元素content（height）的大小，保证可见框的大小不变。
2. 使用透明边框使父子元素的外边距不相邻。

有关外边距重叠的更多解决方案可以去看我的另一篇文章: css中的外边距重叠.