「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。
《CSS世界》阅读进度：44/328页，笔记持续更新...
CSS专业术语
- 属性
- 值
- 如10px、50%、#999等
- 关键字
- 如transparent、solid、inherit等
- 变量
- 长度单位
- 时间单位：s、ms
- 角度单位：deg、rad
- 长度单位
- 相对字体长度单位：em、ex、rem、ch
- 绝对长度单位：px、....
- 功能符
- url()、rgb()、calc()、attr()、scale()、...
- 属性值
- 声明 = 属性名 + 属性值
- 声明块：{ }
- 规则或规则集 = 选择器 + 声明块
- 选择器
- 类选择器
- ID选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
- 关系选择器
- 后代选择器：空格连接
- 相邻后代选择器：>
- 兄弟选择器：~
- 相邻兄弟选择器：+
- @规则
- 如@media、@font-face、@page或者@support等
流、元素、基本尺寸
- HTML标签
- 块级元素
- 内联元素
块级元素
<!-- 如： -->
<div></div>
<li></li>
<table></table>
复制代码注意：块级元素和
display:block的元素不是同个概念，块级元素的display属性可以是其他值，同样符合块级元素的基本特性：一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
-
根据display的属性值可以分为：
- block：内外均为块级（容器）盒子
- Inline-block：外部内联，内部块级
- inline：内外均为内联盒子
width/height作用的具体细节
width:auto
- 包含以下四种宽度表现：
- 充分利用可用空间
- 收缩与包裹
- 收缩到最小
- 最容易出现在 table-layout 为 auto 的表格中
- 超出容器限制
以上四种尺寸表现，
<div>默认宽度 100%显示，是“外部尺寸”，其余全部是“内部尺寸”。
-
外部尺寸与流体特性 0. 正常流宽度 - 流动性丢失问题 0. 格式化宽度（见本书第六章）
-
内部尺寸与流体特性
-
包裹性
-
自适应性：所谓“自适应性”，指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸。
-
实际开发例子：希望文字少的时候居中显示，文字超过一行的时候居左显示。
<div class="box"> <p class="content">文字内容</p> </div> <!-- css样式 .box { text-align: center; } .content { display: inline-block; text-align: left; } --> 复制代码
-
-
首选最小宽度
-
最大宽度
width值作用的细节
-
-
内在盒子又被分为4个盒子，分别是
- content box
- padding box
- border box
- margin box
-
width实际上作用于content box，但存在某些问题：
- 设定了特定的width，流动性丢失（详看一下两个解决方案）
- 与现实世界表现不一致的困扰
方案1：CSS 流体布局下的宽度分离原则
- CSS 中的 width 属性不与影响宽度的 padding/border（有时候包括 margin）属性共存
- 具体方案：嵌套一层标签，父元素定宽，子元素因为 width 使用的是默认值 auto，所以会如水流般自动填满父级容器。
- 存在问题：多一层标签
方案2：box-sizing改变width/height的作用细节
box-sizing 属性的作用实际上是改变了 width 作用的盒子。
.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* Firefox 曾经支持 */
.box3 { box-sizing: border-box; } /* 全线支持 */
.box4 { box-sizing: margin-box; } /* 从未支持过 */
复制代码box-sizing 发明的初衷：原生普通文本框<input>和文本域<textarea>的 100%自适应父容器宽度。
height:auto
height:auto 的表现也基本上就是这个套路：有几个元素盒子，每个多高，然后一加，就是最终的高度值了。
height:100%
height 和 width 还有一个比较明显的区别就是对百分比单位的支持。
对于 width 属性，就算父元素 width 为 auto，其百分比值也是支持的；但是，对于 height 属性，如果父元素height 为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。
一个实际的例子，插入一个div标签，实现满屏显示背景图：
div {
width: 100%; /* 这是多余的 */
height: 100%; /* 这是无效的 */
background: url(bg.jpg);
}
/*正确做法*/
html, body {
height: 100%;
}
复制代码百分比高度值要想起作用，其父级必须有一个可以生效的高度值！
-
为何 height:100% 无效
- 如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。
- auto 和百分比计算，肯定是算不了的：'auto' * 100/100 = NaN
-
如何让元素支持 height:100% 效果
-
设定显式的高度值
/*例如，我们比较常见的：*/ html, body { height: 100%; } 复制代码 -
使用绝对定位
div { height: 100%; position: absolute; } 复制代码绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。
书中例子：demo.cssworld.cn/3/2-11.php
demo.cssworld.cn/3/2-12.php
-
min-width/max-width和min-height/max-height
在公众号的热门文章中，经常会有图片，这些图片都是用户上传产生的，因此尺寸会有大有小，为了避免图片在移动端展示过大影响体验，常常会有下面的 max-width 限制：
img {
max-width: 100%;
height: auto!important;
}
复制代码height:auto 是必需的，否则，如果原始图片有设定 height，max-width 生效的时候，图片就会被水平压缩。强制 height 为 auto 可以确保宽度不超出的同时使图片保持原来的比例。
但这样也会有体验上的问题，那就是在加载时图片占据高度会从 0 变成计算高度，图文会有明显的瀑布式下落。
-
初始值问题
- max-width 和 max-height 的初始值是 none
- min-width 和 min-height 的初始值是 auto
-
max-width 会覆盖 width，即使！important
-
当min-width和max-width发生冲突时，会保留数值较大值。
任意高度元素的展开收起动画技术
通过min-height来实现
.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 值太大，在收起的时候可能会有“效果延迟”的问题
内联元素
首先要明白这一点：“内联元素”的“内联”特指“外在盒子”，和“display 为 inline的元素”不是一个概念！
- 包含了：
- 内容区域
- 内联盒子：实际指的是元素的“外在盒子”
- 行框盒子
- 包含盒子