美文网首页
简述盒模型

简述盒模型

作者: Marshall3572 | 来源:发表于2021-02-16 17:24 被阅读0次

简述
CSS 盒模型有两种,一种是 content-box 一种是 border-box。
content-box width = 内容宽度 内容就是盒子的边界
border-box width = 内容宽度 + padding + border 边框才是盒子的边界
重点关注四个区域和宽度width(宽度决定盒模型的类型)。


在盒模型处右键检查。

margin合并


这个属性方便我们合并写 如果不想要margin合并(通常不会这么写)
父元素和子元素的外边距合并,只存在于上下合并,不存在左右合并。

哪些情况会合并

  • 父子margin合并
  • 兄弟margin合并

如何阻止合并
阻止父子合并

  • 父元素加border
  • 父元素加padding
  • overflow:hidder;
  • display:flex;
    兄弟合并是符合预期的,可以用inline-block消除。

带有float属性的元素不会合并。

相关文章

  • 简述盒模型

    简述:CSS 盒模型有两种,一种是 content-box 一种是 border-box。content-box ...

  • CSS面试题

    1、盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding +...

  • CSS面试题

    1、 盒模型 答:分为标准盒模型和怪异盒模型(IE盒模型) 标准盒模型:宽高(content)+ padding ...

  • CSS盒模型和BFC

    盒模型 盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型 IE盒模型也称border-box。属性width,...

  • 前端第四天

    前端第四天 目录: 盒模型之display 盒模型之overflow 盒模型之隐藏 盒模型之border 盒模型之...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 前端面试之浏览器/HTML/CSS问题

    盒模型 盒模型主要两种,标准盒模型和怪异和模型 标准盒模型:width指content部分的宽度 怪异盒模型:wi...

  • 盒模型

    盒模型 盒模型,可以简单解释为:盒模型用来描述元素所占据的空间。有两种盒模型:W3C盒模型(标准盒模型)和IE盒模...

  • CSS

    Q1.简单描述CSS的盒模型 1.盒模型种类:包括标准盒模型和IE盒模型(怪异盒模型) 2.盒模型设置方式:通过b...

  • css问题

    标准盒模型&非标准盒模型(怪异盒模型) 标准盒模型 box-sizing (模型样式) 语法: box-sizin...

网友评论

      本文标题:简述盒模型

      本文链接:https://www.haomeiwen.com/subject/hoaixltx.html