CSS盒子模型

前言

盒子模型(box model)是css中的一个重要概念,它是元素大小的呈现方式

every element in web design is a rectangular box

正文

下面介绍两种盒模型

W3C标准盒模型

IE怪异盒模型

两个盒模型的共同点

  1. 都是由四个部分组成:content padding border margin

两个盒模型的不同点:(width为content的宽度)

W3C标准盒模型:

  • 元素的宽度=width
  • 盒子总宽度=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

IE盒模型

  • 元素的宽度=width + padding + border
  • 盒子总宽度=margin-left + width + margin-right

解决以上两种盒模型冲突的办法

CSS3 box-sizing属性

box-sizing: content-box|border-box|inherit;

  • content-box(默认):盒子的宽度=width
  • border-box:盒子的宽度=width + padding + border
  • inherit:从父元素继承box-sizing属性的值

浏览器兼容:

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性;Firefox 支持替代的 -moz-box-sizing 属性

所以,为了避免你的页面在不同浏览器下表现不同,最好设置:

html{ box-sizing:border-box; -moz-box-sizing: border-box; } *, *::before, *::after{ -moz-box-sizing: inherit; box-sizing: inherit; }

外边距合并问题

块级元素的上边距和下边距有时会合并或者折叠为一个外边距,大小取其中的最大者,浮动元素和绝对定位元素的外边距不会合并

会出现外边距合并的三种基本情况

1、相邻元素之间

2、父元素和它第一个或最后一个子元素之间

当父元素和它第一个子元素之间没有边框、内边距、行内内容或者清除浮动将两者的margin-top分开;同样的当父元素和最后一个子元素之间没有边框、内边距、行内内容、height、min-height/max-height将两者的margin-bottom分开,那么这时,两个外边距就会合并,子元素的外边距就会溢出到父元素外面(父元素的外边距为两者之和,子元素的外边距为0);

3、空的块级元素

当一个块级元素中不包含任何内容时,并且在其margin-top和margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开,此时外边距会合并

margin合并的计算规则

  • 正正取大值:取大的那个值
  • 正负值相加:取计算后的值
  • 负负最负值:取绝对负值最大的值

margin合并的意义

兄弟元素的margin合并

使图文信息的排版更加舒服自然,保证元素上下间距一致

父子margin合并的意义

在页面中任何地方嵌套或直接放入任何空标签,都不会影响原来的块状布局

自身margin合并的意义

可以避免不小心遗落或者生成的空标签影响排版和布局

阻止以上margin合并的发生

1、阻止margin-top的合并(满足一个条件即可)

  • 父元素设置为块状格式化上下文元素(比如overflow:hidden)
  • 父元素设置border-top值
  • 父元素设置padding-top值
  • 父元素和第一个子元素之间添加内联元素进行分隔

2、阻止margin-bottom合并

  • 父元素设置为块状格式化上下文元素
  • 父元素设置border-bottom值
  • 父元素设置padding-bottom值
  • 父元素和最后一个子元素之间添加内联元素进行分隔
  • 父元素设置height、min-height或max-height

以上需要注意的地方

  • 以上情况的组合会产生更复杂的外边距合并
  • 即使某一外边距为0,这些规则仍然适用,所以就算父元素的外边距为0,还是会出现第二种情况
  • 如果参与合并的外边距中包含负值,合并后的外边距等于最大的外边距与最小的外边距之和
  • 如果所有参与合并的外边距都为负值,合并后的外边距等于最小的外边距的值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端萌媛的成长之路

CSS选择器的优先级

19040
来自专栏杨龙飞前端

line-height属性总结

19530
来自专栏Porschev[钟慰]的专栏

项目中对图片的缩放和水印效果

///<summary> /// 获取一个图片按等比例缩小后的大小。 ///</summary> ///<param name="maxWidth">需要缩小到...

18260
来自专栏coding for love

CSS进阶05-行内格式上下文IFC

IFC的英文全称是:Inline Formatting Contexts,直译为“行内格式化上下文”。 IFC由一个不包含块级盒的块容器盒生成。 在行内格式...

11830
来自专栏java小白

CSS三大特性

17140
来自专栏程序你好

CSS盒子(Box)模型入门

无论您是CSS的新手还是经验丰富的老手,了解和理解box模型都很重要。让我们更好地了解它。

17320
来自专栏企鹅号快讯

CSS深入理解学习笔记之line-height

问题:我怎么才能收到你们公众号平台的推送文章呢? 1、line-height的定义 定义:两行文字基线之间的距离。 注:不同字体之间的基线是不同的。 2、lin...

21450
来自专栏偏前端工程师的驿站

CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

前言                                   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,...

24470
来自专栏HTML5学堂

一步步实现静态页面布局

本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

783100
来自专栏Android常用基础

自定义View(二)-动画- 代码生成View动画

上篇我们介绍了视图动画,说的确切点应该是视图动画中的补间动画(Tween Animation),关于逐帧动画(Frame Animation)用法更简单,这里先...

13310

扫码关注云+社区

领取腾讯云代金券