CSS入门6-盒模型

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 简介

还记得开幕式的例子吗?假设网页是一个队伍,那么元素就是其中的一个个队员。每个队员有高有矮,有胖又瘦,队员之间的距离有远有近,组成一个理想的队形。网页中的元素是什么形状呢?这里再举个例子,不知道大家有没有见到过快递柜?现在快递员经常会将你的快递放到快递柜中通知你去取。元素就像快递柜的格子一样。假设你购买了一双鞋,鞋盒外面包裹有一层快递盒,鞋盒是实际你当时购买的内容,和快递盒的距离是内边距,盒子外表面到隔壁柜子外表面的距离就是外边距了。可以看下面这张图:

快递柜

上图中,我们只考虑快递纸箱会有厚度,鞋盒以及柜子的厚度忽略不计,并且元素盒模型不像现实中的快递一样有重力属性,底部是可以不必紧贴在一起的。我们来看一下抽象后的元素盒模型。

盒模型

不同部分的说明如下:

  • margin(外边距) - 清除边框外的区域,外边距是透明的。
  • border(边框) - 围绕在内边距和内容外的边框。
  • padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • content(内容) - 盒子的内容,显示文本和图像。

2. 各执一词的W3C标准盒模型与IE盒模型

设想你是一位快递运输员,需要在你的货车撞上需要运输的货物。W3C快递公司的是按货物的实际大小计价的,你只知道货物的实际大小,还需要根据包裹货物的盒子厚度,盒子与实际货物的间隙来计算该快递包裹的实际占据空间。而当你精疲力尽摆好货物以后,顾客要求为他的贵重物品填充更多的保护泡沫,更换更厚的纸箱,你将要重新计算它的大小,重新摆放。想想都觉得麻烦。

而IE快递公司让收件员收货的时候将快递打包,根据包裹的大小计价,并告知你包裹的宽高,你只需要关注这个宽高以及包裹之间的距离即可,不用管里面包裹的物品,纸箱的厚度,或者纸箱和实际货品的间隙有多大。

你会选择就职于哪家公司呢?是的,被人吐槽的IE快递公司在这里的设计更为符合常理。我们来看一下两种盒模型的详细说明。

2.1 W3C标准盒模型

W3C标准盒模型

从上图可以看出,对于W3C盒模型:

总宽度 = width + padding + border + margin 总高度 = height + padding + border + margin

更具体来讲应该是如下公式:

总宽度 = width + padding-left +border-left + margin-left + padding-right + border-right + margin-right 总高度 = height + padding-top + border-top + margin-top + padding-bottom + border-bottom + margin-bottom

2.2 IE盒模型

IE盒模型

从上图可以看出,对于IE盒模型:

总宽度 = width + margin 总高度 = height + margin

更具体来讲应该是如下公式:

总宽度 = width + margin-left + margin-right 总高度 = height + margin-top + margin-bottom

3. box-sizing属性介绍

从第2节内容我们看到,IE盒模型使用起来较W3C标准盒模型更为方便。因此,CSS3中提供了一个新的属性,box-sizing,来控制和模型的表现形式。box-sizing有三个取值,分别是content-box,border-box和inherit。

(注:其实还有一个padding-box,width和height属性包括内容和内边距,但是不包括边框和外边距。只有Firefox实现了这个值,它在Firefox 50中被删除。)

  1. content-box 默认值,表现形式同W3C标准和模型。
  2. border-box 表现形式同IE盒模型,常用值,经常在css-reset中设置。
  3. inherit 规定应从父元素继承box-sizing属性的值。

参考

深入理解盒模型 CSS 盒子模型 css 盒子模型理解 想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC CSS 布局_1 盒模型 学会使用box-sizing布局 box-sizing 盒子模型

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小詹同学

20秒画完小猪佩奇“社会人”,程序猿的手法是你想不到的独特

今年社交平台上最火的带货女王是谁?范冰冰?杨幂?Angelababy?不,是猪猪女孩小猪佩奇。

1591
来自专栏Android机动车

开发中的动效设计与实现 —— 贝塞尔曲线动画的插值法

一个动画一般有这些参数 —— 动画时间、属性变化量、以及贝塞尔插值曲线。在动效标注的时候,也只需要标注这些参数就可以完整的给UI研发写动效了。一个动效所涉及的元...

1922
来自专栏落影的专栏

OpenGL ES实践教程(六)全景视频获取焦点

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

3195
来自专栏IT派

教你用CSS做一个社会人

小猪佩奇的火,其实一开始我是不屑的。纵观小朋友的历届动画,无论喜洋洋、熊出没还是小兔兵兵、小熊维尼,火过一阵便迅速陨落,回想起来也没多少沉淀的东西。所以一开始让...

1112
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

751
来自专栏数据小魔方

图表制作理念——最大化信息墨水比

昨天给大家简单介绍了排版四原则。 今天趁热打铁,跟大家聊一聊图表制作中那些如圣经般的金言。 著名的世界级视觉设计大师——爱德华·塔夫特曾在其经典著作《The V...

3297
来自专栏天天P图攻城狮

终端图像处理系列 - 图像混合模式的Shader实现

在图像处理应用中,将两张或者多张图片混合显示是非常常见的一种操作,应用场景包括但不限于:加水印、标签,插入画中画,遮盖等等...

1.1K17
来自专栏量子位

三分钟训练眼球追踪术,AI就知道你在盯着哪个妹子 | TensorFlow.js代码

如果有个眼球追踪AI,加上人脸识别,或许就能在被老板盯上的瞬间,进入奋力工作模式。

8913
来自专栏机器人网

大疆终于实施禁飞区策略了, 先从机场开刀…

DJI大疆创新发布多边形禁飞区策略。本次更新将在中国大陆机场首先生效,之后逐步在全球范围内推广。大疆为其无人机产品设置了机场禁飞区和限飞区。以机场每条跑道的两端...

3357
来自专栏数据小魔方

R语言可视化——地图填充与散点图图层叠加

今天跟大家分享关于如何在地图图层上添加散点图。 散点图需要精确的经纬度信息才能在叠加的图层上进行映射,因此我们选用中国省级轮廓地图以及各省省会城市的经纬度进行案...

5137

扫码关注云+社区

领取腾讯云代金券