CSS3学习（四）：水平和垂直方向布局

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的情况，则会自动调整auto值以使等式成立
  • 这七个值中有三个值可以设置为auto：width、margin-left、maring-right
  • 如果只有一个值为auto，则会自动调整auto的那个值以使等式成立
  • 如果有多个auto且宽度为auto，则宽度会调整到最大，其他auto的外边距会自动设置为0
  • 如果外边距都为auto，则auto的外边距会自动均分以使等式成立

2、垂直方向布局

元素溢出

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用overflow/overflow-x/overflow-y属性来设置父元素如何处理溢出的子元素
可选值：

• visible 溢出内容会在父元素外部位置显示，默认值
• hidden 溢出内容会被裁剪，不会显示
• scroll 生成两个滚动条，通过滚动条来查看完整的内容
• auto 根据需要生成滚动条

边距折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

兄弟元素间的相邻，垂直外边距会取两者之间的较大值（两者都是正值）

• 如果相邻的外边距一正一负，则取两者的和
• 如果相邻的外边距都是负值，则取两者中绝对值较大的

3、行内元素的盒模型

• 行内元素不支持设置width和height

.s1 {
    /* 行内元素设置了宽高也没用，不会生效 */
    width: 100px;
    height: 100px;
    background-color: yellow;
}

• 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

.s1 {
    /* 下方的div元素并没有因span设置了padding属性，而受到位置上的影响 */
    padding: 100px;
    background-color: yellow;
}
.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

• 行内元素可以设置border，垂直方向的border不会影响页面的布局

.s1 {
    border: 10px orange solid;
    background-color: yellow;
}
.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

• 行内元素可以设置margin，垂直方向的margin不会影响页面的布局

.s1 {
    margin: 100px;
    background-color: yellow;
}
.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
}

可以使用display来设置元素显示的类型：display 属性