经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
盒子布局
来源:cnblogs  作者:猿木头  时间:2021/5/6 17:37:04  对本文有异议

盒子布局

盒子的水平布局

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

    • 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 ,宽度为固定值,则外边距设置为相同的值
            利用这一特点来使一个元素在其父元素中水平居中

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

盒子的垂直布局

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

外边距折叠问题

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

    1. 兄弟元素:

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

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

      ? 都是负值,则取两者中绝对值较大的

    2. 父子元素:

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

    行内元素的盒模型:

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

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

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

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

原文链接:http://www.cnblogs.com/codehan/p/14699850.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号