CSS之 有趣记录

断断续续的在看《css世界》这本书，途中会发现很多自己平时没太注意就有趣的点，故记录。（笔记来自：《CSS世界》张鑫旭 著 人民邮电出版社）

术语

• 未定义行为
  Web 标准也是不可能面面俱到的，会存在规范描述以外的场景，各大浏览器厂家只能根据自己的理解与喜好去实现，同时个性化就会出现差异，此时遇到的表现差异并不是浏览器的 bug，用计算机领域的专业术语描述应该是“未定义行为”（undefined behavior）。
  例如：CSS 世界中有很多伪类，其中一个比较常用的就是:active，在 IE8 及以上版本的浏览器行为表现非常统一，支持非焦点元素①，鼠标按下，执行:active 伪类对应的 CSS 样式，鼠标抬起还原。
  而在Firefox 浏览器的UI没有任何变化，和其他浏览器表现形式不一样，这是浏览器的bug吗？当然不是，而是因为规范上并没有对这种场景的具体描述，所以 Firefox 为:active 发生在mousedown 事件之后，也没啥毛病。
  像一些范顾及不到的细枝末节的实现，就称为 “未定义行为”。

image.png

块级元素

• 为什么 list-item 元素会出现项目符号?
  之所以 list-item 元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号。IE浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的

• 特殊的inline-block
  其实每个元素都是有两个盒子，即外在盒子和内在盒子。
  外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。但是呢，造物主又想了想，叫“内在盒子”虽然容易理解，但是未免有些俗气，难登大雅之堂，于是，又想了一个更专业的名称，叫作“容器盒子”。
  于是，按照 display 的属性值不同，值为 block 的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为 inline-block 的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为 inline 的元素内外均是“内联盒子”。
  现在，大家应该明白为何display属性值是inline-block的元素既能和图文一行显示，又能直接设置 width/height 了吧！因为有两个盒子，外面的盒子是 inline 级别，里面的盒子是 block 级别。

width/height 繁枝细节

• width:auto
  在 CSS 世界中，盒子分“内在盒子”和“外在盒子”，显示也分“内部显示”和“外部显示”，同样地，尺寸也分“内部尺寸”和“外部尺寸”。其中“内部尺寸”英文写作“Intrinsic Sizing”，表示尺寸由内部元素决定；还有一类叫作“外部尺寸”，英文写作“Extrinsic Sizing”，宽度由外部元素决定。
  所谓流动性，并不是看上去的宽度 100%显示这么简单，而是一种 margin/border/padding和 content 内容区域自动分配水平空间的机制。

• “包裹性”对实际开发有什么作用呢？
  请看这个需求：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？
  如下：

.box {
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}


  
文字内容

• 首选最小宽度
  所谓“首选最小宽度”，指的是元素最适合的最小宽度。
  • 东亚文字（如中文）最小宽度为每个汉字的宽度。
  • 西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。
  tips：如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试 CSS 中的 word-break:break-all。

“首选最小宽度”实际开发中的作用

• 如何使用一层 HTML 标签分别实现图 3-13 所示的“凹”和“凸”效果（注意要兼容 IE8）？
  由于要兼容 IE8，CSS 新世界中图形构建利器的盒阴影和背景渐变全都没有用武之地，怎
  么办呢？我们可以利用“首选最小宽度”的行为特点把需要的图形勾勒出来。核心 CSS 代码如
  下（以“凹”效果示意）：

.ao,
.tu {
  display: inline-block;
  width: 0;
  font-size: 14px;
  line-height: 18px;
  margin: 35px;
  color: #fff;
}
.ao:before,
.tu:before {
  outline: 2px solid #cd0000;
  font-family: Consolas, Monaco, monospace;
}
.ao:before {
  content: "love你love";
}
.tu {
  direction: rtl;
}
.tu:before {
  content: "我love你";
}

image.png

• max-width
  经常会有图片，这些图片都是用户上传产生的，因此尺寸会有大有小，为了避免图片在移动端展示过大影响体验，常常会有下面的 max-width 限制：

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

• height:auto是必需的，否则，如果原始图片有设定 height，max-width 生效的时候，图片就会被水平压缩。强制 height 为 auto 可以确保宽度不超出的同时使图片保持原来的比例。但这样也会有体验上的问题，那就是在加载时图片占据高度会从 0 变成计算高度，图文会有明显的瀑布式下落。

• 超越最大
  超越最大指的是min-width覆盖max-width，此规则发生在min-width和max-width冲突的时候。例如，下面这种设置：

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

最小宽度居然比最大宽度设置得还大，此时，两者必定是你死我活的状态。究竟谁死呢？遵循“超越最大”规则（注意不是“后来居上”规则），min-width 活下来，max-width 被忽略，于是，.container 元素表现为至少 1400 像素宽。

• 任意高度元素的展开收起动画技术
  收起展开效果，为了使效果没那么生硬，除了jQuery 的 slideUp()/ slideDown()方法，然后就是CSS 实现动画，我们的第一反应就是使用 height + overflow:hidden 实现。
• 但是，很多时候，我们展开的元素内容是动态的，换句话说高度是不固定的，因此，height 使用的值是默认的 auto，应该都知道的 auto 是个关键字值，并非数值，正如 height:100%的 100%无法和 auto 相计算一样，从 0px 到 auto 也是无法计算的，因此无法形成过渡或动画效果。

.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 使用足够安全的最小值，收起的延迟才不会那么长。

• 内联空白节点
  “内联空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。

div{
     background: #ccc;
}
span{
    display: inline-block;
}

image.png