Photo by Blake Weyland on Unsplash

俄罗斯套娃里，大娃娃套小娃娃。
网页上，大方块套小方块。

就像再小的娃娃都有五官等特点，小方块也有自己的一套规则。

盒模型

组成

盒模型的组成已经很熟悉了。由内而外依次是，且各自的作用分别是：

1. content： 文字内容
2. padding：让背景色和content中间可以有空隙。
3. border：边界线
4. margin：透明空间，可以通过这个控制元素间的距离。
5. outline

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

• Outlines never take up space, as they are drawn outside of an element's content.
• According to the spec, outlines don't have to be rectangular, although they usually are.
  As with all shorthand properties, any omitted sub-values will be set to their initial value.

border: 10px;

border

outline: 10px;

outline

outline不占空间，所以不影响布局。

几个问题

1. width包括哪些？
   两种情况，第一种，width 只包含content，第二种，width 包含content+padding+border。
   第二种情况可以类比现实中的包装箱，不论箱子里装了什么，如何填充，都不影响一个集装箱里可以放的数量。第一种情况，类比珍贵的不可变形的物体，例如瓷器。不论外部如何变化，都不可以挤压瓷器所占空间。
   两种情况所关心的重点不一样，第一种关心内容，第二种关心空间。
2. 百分比是以什么为基准？
   是以containing block（不一定是父元素）的宽度。因为在渲染时，宽度相对于高度更固定。

大娃娃套中娃娃，中娃娃套小娃娃。这是有一套排列规则的。
网页上的大大小小的方块也有自己的排列规则

定位模型

基础款

block vs inline
这两个是基础款，block是独占一行，inline则是和其他inline元素共享一行。没有CSS设定时，HTML中元素位置决定了元素在页面上的位置。

几个问题

1. inline元素的纵向距离可以通过margin控制吗？
   不能。纵向的padding，border，margin都不会影响元素高度。宽高也是不起作用的。
2. margin 塌陷
   这不是一个新概念，仅仅是为了符合排版习惯，段落之间的外边距合并。这个是文档流中block元素的纵向距离的一个确定方法。

Containing Blocks

一般文档流里元素的containing block 是最近的display属性为block之类的父元素。

定位

相对定位

不脱离文档流，但仍然可以设置top，left 。这个是相对于在文档流中的初始位置。

绝对定位

元素脱离文档流了，定位是相对于containing block。

固定定位

脱离文档流，并且相对于viewport。

浮动

1. 浮动元素脱离了文档流，并且会自动提升一层，相当于z-index=1，而其余的元素的为0。
2. 文本内容却会记着浮动元素的占位，缩短长度，不被浮动元素覆盖。文本和其余元素表现不一致，可能因为文本可塑性强吧。