box模型简介

一、水平布局

1.决定因素

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

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

2.满足条件

一个元素在父元素中必须满足以下等式：

margin-left + border-left + padding-left + width + padding-right + margin-right + border-right=父元素内容区的宽度（必须满足）

如若上式不成立，则称为过渡约束，则等式自动调整。

二、垂直布局

1.默认情况下，父元素会被子元素的内容撑开。

2.如果子元素的大小超过父元素，则子元素从父元素中溢出，此时可用overflow属性来处理溢出元素。

可选值：

• visible， 溢出内容在父元素外部显示
• hidden， 溢出内容呗裁剪不会显示
• scroll，生成水平垂直方向两个滚动条， 通过滚动条查看具体内容
• auto， 根据需要生成滚动条

三、外边距的折叠

1.发生条件

相邻的垂直方向的外边距会发生重叠。

2.元素

（1）兄弟元素

        -兄弟元素之间的垂直外边距取两者正值之间的最大值

        -间距一正一负，取和

        -间距两负，取绝对值最大的

（2）父子元素

        -父子元素间相邻外边距，子元素会传递给父元素（上外边距）

四、行内元素box模型

1.简介

1.行内元素不支持宽度和高度

2.行内元素可设置padding、border、margin，垂直方向不会影响布局

3.display用来设置元素显示的类型

可选值：

• inline 将元素设置为行内元素
• block 将元素设置为块元素
• inline-block 将元素设置为行内块元素，可设置宽高，且不会独占一行
• table 设置为表格
• none 元素不在页面显示