欢迎光临
我的个人博客网站

盒子布局


盒子布局

盒子的水平布局

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

    • 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 不影响页面的布局

赞(0) 打赏
未经允许不得转载:张拓的天空 » 盒子布局
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏