CSS——盒模型及常见的问题
盒模型
    content->padding->border->margin
  注：
    1、背景⾊只能填充到margin以内的区域
    2、⽂字的content以内的区域添加
    3、padding不能为负数，margin可以为负数
box-sizing
    box-sizing 属性允许您以特定的⽅式定义匹配某个区域的特定元素。取值为content-box(默认值)|border-box
    盒⼦尺⼨，可以改变盒⼦模型的展⽰形态：
      默认值：content-box: height、width -> content
      border-box: height、width -> content、padding、border
    使⽤场景：
      1、不⽤再去计算⼀些值
      2、解决⼀些百分⽐问题
盒⼦模型遇见的⼀些问题：
  1、margin叠加问题：
    给两个盒⼦同时添加上下外边距时，就会出现叠加的问题，这个问题只有上下有，左右是没有的。
    上下叠加时取得是最⼤的量进⾏叠加。
  解决⽅法：
    1、BFC规范
    2、想办法给⼀个元素添加间距margin属性值可以为百分比
  2、margin传递问题：
    margin传递的问题只会出现在嵌套的结构中，且只有margin-top有传递的问题，其他三个⽅向的传递是没有问题的。  解决⽅案：
    1、BFC规范
    2、给⽗容器加边框
    3、margin换成padding
  3、盒⼦模型拓展
    margin左右⾃适应居中（上下不⾏）
    width、height不设置的时候会，对盒⼦模型的影响：会⾃动去计算容器的⼤⼩，节省代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。