摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。
概述
在《css世界》这本书中有一些“黑魔法”给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！
以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等;
ps: 特别是 “line-height、vertical-align”内容需要反复仔细研究阅读
何为“流”成为文档流，将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素 （引导元素排列和定位）什么是流体布局
利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性。“未定义行为”
元素宽度按照分辨率宽度进行长度、宽度的调整，但布局不变。
当某个浏览器中出现与其他浏览器不一样的行为或样式表现；currentColor 变量
Web应用场景千变万化，Web标准也是不可能面面俱到的，也会存在规范描述以外的场景，此时，各大浏览器厂家只能根据自己的理解与喜好去实现，一旦个性化就会出现差异
当前的文字颜色;凡事需要使用颜色值的地方，都可以使用currentColor替换，比方说背景色 – background-color, 渐变色 – gradient, 盒阴影 – box-shadow, SVG的填充色 – fill等等
div { color:#3c3c3c; border: 1em solid currentColor; }
currentColor-CSS3超高校级好用CSS变量
块级元素默认情况下，块级元素会新起一行;占据其父元素（容器）的整个空间
块级盒子负责结构
内联盒子负责内容
应用正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响
.clear:after {
content: "";
display: table; // 也可以是block，或者是list-item
clear: both;
}
为什么 list-item 元素会出现项目符号
list-item（“附加盒子”）名“标记盒子”；因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号；display:inline-block 或者 display:xx-xx 理解（容器盒子）
元素都两个盒子，外在盒子和内在盒子；深藏不露的 width:auto 充分利用可用空间
外在盒子：外在的“内联盒子”（inline）
内在盒子：内在的“块级容器盒子”（block）
、这些元素的宽度默认是100%于父级容器的 收缩与包裹
浮动、绝对定位、inline-block元素或table元素收缩到最小出现在table-layout为auto的表格中；当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断超出容器限制内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap“内部尺寸”和“外部尺寸”“内部尺寸”:尺寸由内部元素决定外部尺寸与流体特性 正常流宽度
“外部尺寸”:宽度由外部元素决定、这些元素的宽度默认是100%于父级容器；display:block; 流动性
宽度100%显示，格式化宽度margin/border/padding和content内容区域自动分配水平空间
触发条件
“绝对定位模”（position属性值为absolute或fixed的元素中）
表现
绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定特殊
当left/top或top/bottom对立方位的属性值同时存在，元素的宽度表现为“格式化宽度”，
其宽度大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算
div { position: absolute; left: 20px; right: 20px; } div { position: absolute; top: 20px; bottom: 20px; } // 但不知道为什么不行内部尺寸与流体特性 包裹性除了“包裹”（max-width:100%），还有“自适应性（元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸）”著名的“按钮”元素：极具代表性的inline-block元素
按钮上的文字个数比较有限，没机会换行
应用文字少的时候居中显示，文字超过一行的时候居左显示
.box { padding: 10px; background-color: #cd0000; text-align: center; } .content { display: inline-block; text-align: left; }首选最小宽度文字内容
元素最适合的最小宽度东亚文字（如中文）最小宽度为每个汉字的宽度:font-size:14px;
西方文字最小宽度由特定的连续的英文字符单元决定（一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等）
最大宽度是元素可以有的最大宽度（如果内部没有块级元素或者块级元素没有设定宽度值,实际上是最大的连续内联盒子的宽度）如何评价*{box-sizing:border-box} box-sizing 发明的初衷解决替换元素宽度自适应问题易产生没必要的消耗通内联元素（非图片等替换元素），box-sizing无论是什么值，对其渲染表现都没有影响
search类型的搜索框，其默认的box-sizing就是border-box（如果浏览器支持），因此，*对search类型的而言也是没有必要的消耗
关于 height:100%父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了;百分比高度值要想起作用，其父级必须有一个可以生效的高度值;为何height:100%无效包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto"auto" * 100/100 = NaN如何让元素支持height:100%效果设定显式的高度值
使用绝对定位
width:100%效width:100%有效包含块的宽度取决于该元素的宽度，那么产生的布局在CSS 2.1中是未定义的CSS min-width/max-width 和 min-height/max-height max-* 初始值是none假如说max-width初始值是auto,我们的width永远不能设置为比auto计算值更大的宽度值min-* 初始值 0（实践为auto）min-wdith/height值为auto合法
数值变化无动画
max-width 超越!important，超越最大max-width会覆盖width,不是普通的覆盖，是超级覆盖;比直接在元素的style属性中设置CSS声明还要高min-width超越最大min-width和max-width冲突;遵循“超越最大”规则（注意不是“后来居上”规则），min-width覆盖任意高度元素的展开收起动画技术我们展开的元素内容是动态的，换句话说高度是不固定的.element { max-height: 0; overflow: hidden; transition: max-height .25s; } .element.active { max-height: 666px; /* 一个足够大的最大高度值 */ }max-height值比height计算值大的时候，元素的高度就是height属性的计算高度
注意max-height不能设置很大，如果延迟时间长，会有延迟的感觉。
内联元素 内联世界深入的基础—内联盒模型 内容区域（content area）围绕文字看不见的盒子，其大小仅受字符本身特性控制,本质上是一个字符盒子（character box）；内联盒子但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身
元素的“外在盒子”，用来决定元素是内联还是块级、和等行框盒子由一个一个“内联盒子”组成的包含盒子（“包含块”）由一行一行的“行框盒子”组成(CSS规范中，并没有“包含盒子”的说法，更准确的称呼应该是“包含块”)幽灵空白节点内联元素的所有解析和渲染会有前面有一个“空白节点”；不占据任何宽度，看不见也无法通过脚本获取（文档声明必须是HTML5文档声明（HTML代码如下））div { background-color: #cd0000; } span { display: inline-block; }深入理解 content 替换元素过修改某个属性值呈现的内容就可以被替换的元素; 如“img”特性 内容的外观不受页面上的CSS的影响需要类似appearance属性，或者浏览器自身暴露的一些样式接口，例如::-ms-check{}有自己的尺寸其默认的尺寸（不包括边框）是300像素×150像素，如