盒子布局

盒子布局

盒子的水平布局

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

  • margin-left

  • border-left

  • padding-left

  • width

  • padding-right

  • border-right

  • margin-right

    上述几个属性对应值的和=其父元素内容区的宽度（必须满足）

    如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整

    • 调整情况：
      这七个值中有三个值可设置为auto

      • width 默认值为 auto

      • margin-left 默认值 0

      • margin-right 默认值 0

        1. 如果七个值中没有auto的情况，则浏览器会自动调整margin-right的值使等式满足

        2. 如果某个值为auto，则会自动调整为auto的那个值以使等式成立

        3. 如果将一个宽度和一个外边距设置为auto，则宽度会调到最大，设置为auto的外边距自动为0

        4. 如果将三个值都设置为 auto ，则外边距都是0，宽度最大

        5. 如果将外边距都设置为auto ，宽度为固定值，则外边距设置为相同的值
           利用这一特点来使一个元素在其父元素中水平居中

           width:100px; margin:0 auto;  /*水平居中*/ 

盒子的垂直布局

• 默认情况下：父元素的高度被内容撑开
  子元素是在父元素的内容区中排列的
  • 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
    使用overflow 属性设置父元素如何处理溢出的子元素
    • 可选值
      • visible 默认值 子元素会从父元素中溢出，在父元素外部的位置溢出
      • hidden 溢出的内容将会被裁剪，不会显示
      • scroll 生成两个滚动条，通过滚动条来查看完整的内容
      • auto 根据需要生成滚动条
      • overflow-x：单独处理水平方向
      • overflow-y：单独处理垂直方向

外边距折叠问题

• 相邻的垂直方向外边距会发生重叠现象

  1. 兄弟元素：

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

     特殊情况：如果相邻的外边距一正一负，则取两者之和

     ​ 都是负值，则取两者中绝对值较大的

  2. 父子元素：

     • 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）需进行处理
     • 处理方式详见浮动中高度塌陷的解决方案

  行内元素的盒模型：

• 行内元素不支持设置宽度和高度

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

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

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