摘要：盒子的宽度设置固定宽度的情况在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。这样我们改四个中的其中一个，都会导致盒子宽度的改变。包裹内容的情况这种情况下比较简单，盒子的宽度将随着内容宽度的增加而增加。
1.引言
从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。
第一类——文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都尽量用相对值（em）。另外还有一个重点，就是web端最流行的字体库fontAwesome，可参见《请用fontAwesome代替网页icon小图标》，这里就不再重复去讲了。
padding，border和margin，即内边距、边框、外边距，它们三者就构成了一个“盒子”。比如收到的快递，本来买了一个小小的iphone，收到的却是那么大一个盒子。因为iphone白色包装盒与iphone机器之间有间隔层（内边距），iphone白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。
如上图，真正的内容就是这些文字，文字外围有10px的内边距，5px的border，10px的外边距。
3.盒子的宽度 3.1 设置固定宽度的情况在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 + padding宽度 + border宽度 + margin宽度）之和。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。
没关系，这个东西不友好早就有人发现了，而且已经解决，下文再说。
3.2 充满父容器的情况默认情况下，div的display:block，不设置固定宽度时，宽度会充满整个父容器。
但是别忘记，这个div是个盒子模型，它的整个宽度包括（内容宽度 + padding宽度 + border宽度 + margin宽度），是整个的宽度充满了父容器。
问题就在这里。如果父容器宽度不变，我们手动增大margin、border或padding其中一项的宽度值，都会导致内容宽度的减少。极端情况下，如果内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。
这种情况下比较简单，盒子的宽度将随着内容宽度的增加而增加。
4.再看盒子的宽度前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：box-sizing:border-box
如上图，div设置了box-sizing:border-box;之后，盒子宽度300px就变为（内容宽度 + padding宽度 + border宽度）之和（不包括margin宽度），这样就比较符合我们的实际要求了。
建议大家在为系统写css时候，第一个样式是：
大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中，我们为什么不这样做呢？
5.margin的纵向重叠切记，margin有一个特性——纵向重叠，如下图，
的纵向margin是16px，那么两个
之间纵向的距离按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的margin是会重叠的，大的会把小的“吃掉”（可以自己去实验）。
6.用div画“三角”“三角”在日常的网页中是很常见的，例如百度首页：
你当然可以使用背景图片、fontAwesome来实现这一效果，但是你也可以用div来实现这一效果，很简单，而且可以封装通用：
原理很简单：只让一侧border显示，另外三侧都设为透明。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112113.html
摘要：本系列文章重拾主要参考王福朋知多少，结合自己的理解和学习需要，修改或添加了一些内容，难免有失偏颇，仅供自我学习参考之用。 工作中或多或少的写一些css，但总感觉掌握的不够扎实，时而需要查阅一下知识点。我想，一方面跟缺少科班出身式的系统学习有关，另一方面也苦于一直未寻觅到一套合我胃口教程。直到我读到了王福朋css知多少系列文章，使我有了重新系统学习css的想法。 本系列文章（重拾css）...
摘要：浏览器默认样式中规定了元素哪些属于块剩下的就是流。上图可知，针对的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是，并不是我们设定的值。因此，的特点可以总结为外部看来是流，但是自身却是一个块。 1.引言 html元素，除了块就是流（即平时常说的块级元素和行内元素），而且流都包含在块中，例如body就是一个块，而a就是一个流。浏览器默认样式中规定了html元素...
摘要：来不及解释，快上车有些浏览器不完全支持，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项常用的标签，它们的属性一般默认为和。的设计初衷是什么具有包裹性例如和两者的宽度是不一样的，不信可以为加上背景色试试。 来不及解释，快上车... ... 有些浏览器不完全支持css3，现在可以用哪个工具去检测浏览器是否支持，以及支持哪些项？ 常用的html标签，它们的display属性一般默认...
摘要：如果我们以为重点看，从上图中我们可以总结出学习的三个突破点。这次我们向浏览器这位机器人学习一下，看看它写出来的能给我们什么帮助。对选择器来说，有一个很重要的话题级别。布局布局是的重头戏，每个系统的布局都有其各自的特点。 众所周知，css的运行环境是浏览器，那么我们有必要先来认识下浏览器。 1.浏览器是怎样工作的 有篇文章叫《浏览器的工作原理：新式网络浏览器幕后揭秘》，文中言简意赅的介绍...
摘要：然而学习布局，你只要学习几个手机端页面自适应解决方案布局进阶版附源码示例前端掘金一年前笔者写了一篇手机端页面自适应解决方案布局，意外受到很多朋友的关注和喜欢。 十分钟学会 Fiddler - 后端 - 掘金一.Fiddler介绍 Fiddler是一个http抓包改包工具，fiddle英文中有欺骗、伪造之意，与wireshark相比它更轻量级，上手简单，因为只能抓http和https数据...
阅读 3121·2021-11-11 16:54
阅读 2260·2021-09-04 16:48
阅读 3194·2019-08-29 16:08
阅读 623·2019-08-29 15:13
阅读 1315·2019-08-29 15:09
阅读 2642·2019-08-29 12:45
阅读 1905·2019-08-29 12:12
阅读 426·2019-08-26 18:27
