锐客网

  1. 首页 > it技术 > >

CSS样式——盒子模型

  • 了解盒模型基本组成
    1. 外间距：margin
    2. 内间距：padding
    3. 边框：border
    4. 内容区域：content
    CSS样式——盒子模型
    文章图片

    • 元素大小包含了边框
    • 背景色填充只到边框（包括边框）
    • 文字在content区域添加
  • 了解内间距
    1. 用于调整子元素与父元素之间空隙大小
    2. padding设置时，会撑大盒子宽高，设置盒子宽高时需要减去padding的值，或者设置box-sizing为border-box
    3. padding不支持负数，也不支持auto
    4. 当盒子不设置宽高时，由内容撑开时，不需要减去padding的值
    5. padding的设置，不影响背景图
  • 设置内间距
    1. 单一方向设置：
    上内间距：padding-top:数值 下内间距：padding-bottom:数值 左内间距：padding-left:数值 右内间距：padding-right:数值

    1. 复合写法：
    表示四周都设置：padding：10px 表示上下、左右设置：padding：10px 20px 表示上、左右、下设置：padding：10px 20px 30px 表示上、右、下、左设置：padding：10px 20px 30px 40px

  • 了解外间距
    1. 用于调整元素与元素之间的间距
    2. margin不影响盒子大小
    3. margin支持负数和auto
    4. margin:0 auto 时，表示盒子水平居中
  • 设置外间距
    1. 单一方向设置：
    上外间距：margin-top:数值 下外间距：margin-bottom:数值 左外间距：margin-left:数值 右外间距：margin-right:数值

    1. 复合写法：
    表示四周都设置：margin：10px 表示上下、左右设置：margin：10px 20px 表示上、左右、下设置：margin：10px 20px 30px 表示上、右、下、左设置：margin：10px 20px 30px 40px

  • 盒模型尺寸计算方式
    box-sizing:content-box1. 默认计算方式，盒子尺寸不包括边框、内间距、内容：content-box 2. 内减计算方式，盒子尺寸包括边框、内间距、内容：border-box 3. 继承父元素盒尺寸计算方法：inherit

  • margin存在问题与解决
    1. margin-top传递问题：
      • 当父元素内的子元素设置margin-top时，这个间距将传递给父元素
      • 解决：
        给父元素添加overflow:hidden
        给父元素添加一个透明边框
    2. 【CSS样式——盒子模型】两个元素之间高度塌陷问题：
      • 当上面元素设置margin-bottom，并且下面元素设置margin-top时，浏览器解析时，他们之间的间距取外间距最大的值
      • 解决：
        给下面元素添加一个父元素，并给父元素添加overflow：hidden
        只给一个元素设置margin值

    推荐阅读


    上一篇：spring-data-redis 上百万的 QPS 压力太大连接失败，我 TM 人傻了

    下一篇：Java面试问题汇总(数据库)