《CSS世界》阅读笔记（二）——块级元素与基本尺寸

块级元素基本概念

块级元素：是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。

块级元素”和“display 为 block 的元素”不是一个概念。

每个元素都两个盒子，外在盒子和内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。

display属性值是inline-block的元素既能和图文一行显示，又能直接设置 width/height。因为有两个盒子，外面的盒子是 inline 级别，里面的盒子是 block 级别

而盒子上的 width/height 作用在了内在盒子上。

---

width

width 的默认值是 auto，看似简单的默认值至少包含了以下 4 种不同的宽度表现。
（1）充分利用可用空间。
（2）收缩与包裹。
（3）收缩到最小。
（4）超出容器限制

尺寸也分“内部尺寸”和“外部尺寸”。其中“内部尺寸”由内部元素决定；还有一类叫作“外部尺寸”宽度由外部元素决定。

width影响的外部尺寸

1、正常流宽度。
“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了

a { 
  display: block; 
  width: 100%; 
}

对a标签设置为block之后，自然会填充父元素，width: 100%不仅仅是多余，更会造成元素在流动性上的丢失。

所谓流动性，并不是看上去的宽度 100%显示这么简单，而是一种 margin/border/padding
和 content 内容区域自动分配水平空间的机制

eg.设置了一个块级元素的width为100%之后，虽然看上去与width:auto没有差别，都占父元素的100%，但是当为改元素设置border、margin时，其实际尺寸就会超过父元素，从而产生滚动条。

父元素

不限定width时， 内容区域自动分配

限定时 父元素出滚动条

设置了外部尺寸之后，会影响元素的宽度

2、格式化宽度

格式化宽度仅出现在“绝对定位模型”中，也就是出现在 position属性值为 absolute 或 fixed（position默认值为static） 的元素中。当 left/top 或 top/bottom 对立方位的属性值同时存在的时候，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性（position 属性值不是 static）的祖先元素计算

上面的普通流一样，“格式化宽度”具有完全的流体性，也就是 margin、border、padding 和 content 内容区域同样会自动分配水平（和垂直）空间。

width影响的内部尺寸

内部尺寸：假如这个元素里面没有内容，宽度就是 0，那就是应用的“内部尺寸”。

内部尺寸的三种表现形式：

1、包裹性

对于一个元素，如果其 display 属性值是 inline、inline-block，那么即使其里面内容
再多，只要是正常文本，宽度也不会超过容器。

eg.包裹性的实践：文字少的时候居中显示，文字超过一行的时候居左显示

.box { 
 text-align: center; 
} 
.content { 
 display: inline-block; 
 text-align: left; 
}

2、首选最小宽度

所谓“首选最小宽度”，指的是元素最适合的最小宽度。
在 CSS 世界中，图片和文字的权重要远大于布局，有图文存在时，不会让width：auto为0的

（3）最大宽度
“最大宽度”实际等同于“包裹性”元素设置 white-space:nowrap 声明后的宽度。

实际运用的话，我认为跟flex布局有点像，用于不定宽度内元素的横向布局。

宽度分离原则

所谓“宽度分离原则”，就是 CSS 中的 width 属性不与影响宽度的 padding/border（有
时候包括 margin）属性共存，也就是不能出现以下的组合：

.box { width: 100px; border: 1px solid; } 

或者

.box { width: 100px; padding: 20px; }

分离，width 独立占用一层标签，而padding、border、margin 利用流动性在内部自适应呈现。

缺点：多使用了一层标签， HTML 的成本也是成本，过深的嵌套是会增加页面渲染和维护成本的。但是一般来说，只要给最外面控制宽度的一层标签再加一层，所以与后期维护相比，成本可忽略不计。

改变 width/height 作用细节的 box-sizing

其实对于宽度分离来说，在决定宽度的div上设置box-sizing就可以不再外面套一层标签了。所起到的效果是一样的。

height

height:100%

。对于 width 属性，
就算父元素 width 为 auto，其百分比值也是支持的；但是，对于 height 属性，如果父元素height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。
如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。

'auto' * 100/100 = NaN

所以子元素的高度设为100%是无效的。

如何让元素支持 height:100%效果

（1）设定显式的高度值。
（2）使用绝对定位。

div { 
 border: 1px solid blue;
 height: 100%; 
 position: absolute; 
}

此时的 height:100%就会有计算值，即使祖先元素的 height 计算为 auto 也是如此。

需要注意的是，绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别
在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。

父元素

子元素

CSS min-width/max-width和min-height/max-height 二三事

min-width/max-width出现的场景一定是自适应布局或流体布局中。

.container {
    min-width: 1200px;
    max-width: 1400px;
}

为了避免图片在移动端展示过大影响体验，经常会有下面的max-width限制：

img {
    max-width: 100%;
    height: auto !important;
}

height:auto 是必需的，否则，如果原始图片有设定 height，max-width 生效的时候，
图片就会被水平压缩。

max-width 会覆盖 width，而且这种覆盖不是普通的覆盖，是会超越！important的效果

任意高度元素的展开收起动画技术

.element { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height .25s; 
} 
.element.active { 
  max-height: 666px; /* 一个足够大的最大高度值 */ 
}

其中展开后的 max-height 值，我们只需要设定为保证比展开内容高度大的值就可以，因为max-height 值比 height 计算值大的时候，元素的高度就是 height 属性的计算高度，在本交互中，也就是 height:auto 时候的高度值。于是，一个高度不定的任意元素的展开动画效果就实现了。

不过如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问题。