看看书
不知道怎么回事，更喜欢开始看书了，虽然是关于技术类型的，作者那精妙绝伦的语句，让我根本不会打瞌睡，有时候就经常看着看着忘了时间，更喜欢一步一步跟着作者写，看书学习虽然很慢，但是每一场我都有新的体会，最近在网络上看到了这本书，而且还是国内的大佬写的，更有好奇心了。我喜欢看书的时候记录知识，并写成 markdown 。
作者的话
10年 风雨积累，踏遍 CSS 世界的千山万水，哪里有美景，哪里有秘境，哪里是陷阱，哪里是路径，我全了然于心。我这样做为的就是给予清晰明确的指引，拓展对 CSS 世界的认知，挖掘 CSS 的潜力，帮助他人突破一个又一个 CSS 学习的瓶颈。
哈哈！！！我已经迫不及待的想看看作者写了什么了 哼（狗头） CSS 有什么好说的 =-=
CSS 世界的诞生就是为了图王信息展示服务的
这本书还不好记笔记，因为作者从案例出现，可以说小技巧。
为何父级没有具体高度值的时候，height ：100% 会失效
这个问题，我遇到多少次了，很多都是在写首页，导航栏的时候，我当时的做法都是加上 边框，这个问题也没细细想过，让我们看看作者怎么说的吧 ！
为何 height：100% 无效
要明白其中的原因要先了解浏览器渲染的基本原理。首先，先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上到下，自外而内的顺序渲染 DOM 内容。先渲染父元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的 width:100% 并没有渲染，宽度就是图片加文字的宽度；等渲染到文字这个子元素的时候，父元素宽度已经固定，此时的 width:100% 就是已经固定好的父元素的宽度。宽度不够怎么办？溢出就好了，overflow属性就是为此而生的。
规范中其实给出了答案。如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算不了的
auto’ * 100/100 = NaN
如何让元素支持 height：100%效果
一。设定显式的高度值。
二。使用绝对定位。
为流体而生的 min-width/max-width
在 CSS 世界中，min-width/max-width 出现的场景一定是在自适应布局或者流体布局中。
与众不同的初始化值
max-*系列和min-*系列。max-width和max-height的初始化值则要复杂些。这里要分为两部分，分别是 max-*系列，和 min-width-*系列。
min-width/min-height 的初始值是 auto，max-width/maxheight的初始值是none。
img
CSS 重置的时候加上 img{display:-inline-block} 就可以理解为 span 标签设置 display:inline-block后可以设置宽高就可以了，这个针对 Firefox 浏览器的修复既有效，又对浏览器的图片表示没有任何影响，因此，我建议在 CSS重置的时候加上img{display:-inline-block}
图片中的 content替换内容默认的适配方式是填充（fill），也就是外部设定的尺寸多大，我就填满，跟着一样大。换句话说，尺寸变化的变质并不是改变固有尺寸，而是采用了填充作为适配 HTML尺寸和CSS尺寸的方式。
小技巧
用缺省 src 的元素实现滚屏加载效果但是，就
有可能存在这样一个体验问题：如果我们的 JavaScript 加载比较慢，我们的页面就很有可能出
现一块一块白色的图片区域，纯白色的，没有任何信息，用户完全不知道这里的内容是什么。
虽然 alt 属性可以提供描述信息，但由于视觉效果不好，被隐藏掉了。此时，我们总不免畅想：
要是在图片还没加载时就把 alt 信息呈现出来该多好啊。
此时，图片 src 没有，因此，::before 和::after 可以
生效，我们就可以把 alt 属性值通过 content 属性呈现出来，
conter 内容替换
《CSS 世界》
h1{conter:url(logo.png)} 此外，虽然视觉上文字被替换了，但是屏幕阅读设备阅读的还是文字内容，搜索引擎 SEO 抓取的还是原始的文本信息，因此，对页面的可访问性等没有任何影响。看起来这是一个完美 的文字换图显示方案，但还是有一些局限。前文也说到了，替换元素的固有尺寸是无法设置的， 如今在移动端 retina 屏幕几乎是标配，为了图片显示细腻，往往真实图片尺寸是显示图片尺寸 的两倍。于是问题就来了，使用 content 生成图片，我们是无法设置图片的尺寸的，只能迫 不得已使用一倍图，然后导致图片看上去有点儿模糊。 所以，要想在移动端使用该技术，建议使用 SVG 矢量图片。 ### 缺点 我们使用的 content 属性生成的文本是无法选中的，无法复制的，好像设置了 user-select：none 声明一般，但是普通元素的文本却可以轻松选中。同时，content 生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文 本信息使用 content 属性生成，因为这对可访问性和 SEO 都很不友好，content 属性只能用 来生成一些无关紧要的内容，如装饰性图形或者序号之类；同样，也不要担心原本重要的文字 信息会被 content 替换，替换的仅仅是视觉层。 ### 正确看待 CSS 世界里的 margin 合并 1. 相邻兄弟元素 margin 合并。这是 margin 合并最常见的 2. 父级和第一个/最后一个元素。阻止 margin 合并
• 父元素设置为块状格式化上下文元素；
• 父元素设置 border-top 值；
• 父元素设置 padding-top 值；
• 父元素和第一个子元素之间添加内联元素进行分隔
对于 margin-bottom 合并，可以进行如下操作（满足一个条件即可）：
• 父元素设置为块状格式化上下文元素；
• 父元素设置 border-bottom 值；
• 父元素设置 padding-bottom 值；
• 父元素和最后一个子元素之间添加内联元素进行分隔；
• 父元素设置 height、min-height 或 max-height
float
浮动是魔鬼，少砌砖头，少浮动，要更多地去挖掘 CSS 世界本身的 “流动性” 和 “自适应性”，以构建能够适用于各种环境的高质量的网页布局。
clear 属性
生生相克，float 这个魔鬼属性也不例外。CSS 有一个专门用来处理 float 属性带来的高度塌陷等问题的属性，这个属性就是 clear。
官方对 clear 属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”
clear 属性值的理解是下面这样的。
• none：默认值，左右浮动来就来。
• left：左侧抗浮动。
• right：右侧抗浮动。
• both：两侧抗浮动。
大家有没有发现，我们平时除了 clear：both 这个声明比较多以外，left 和 right 这两个属性值几乎无人问津，是因为 left 和 right 这两个值没有作用吗？
我的答案非常直白：确实，没有什么用！凡是 clear:left 或者 clear:right 起
作用的地方，一定可以使用 clear:both 替换！
clear
clear属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。
.clear:after{ content:“”,dispaly:table,clear:both}
clear:both 的作用本质是让自己不和 float 元素在一行显示，并不是真正意义上
的清除浮动，因此 float 元素一些不好的特性依然存在，于是，会有类似下面的现象。
（1）如果 clear:both 元素前面的元素就是 float 元素，则 margin-top 负值即使设
成-9999px，也不见任何效果。
（2）clear:both 后面的元素依旧可能会发生文字环绕的现象。
clear:both 只能在一定程序上消除浮动的影响，要想完美地去除浮动元素的影响 。还需要使用其他 CSS 声明。
BFC
这个我不知道写了多少遍了，很多 CSS 书说了这个东西，看看这个作者是怎么解释的吧！
作者的解释
BFC ，中文为块级格式化上下文。我喜欢用 CSS世界的结界 这种称谓概括 BFC 的特性。“结界”，指通过一些特定的手段形成的封闭空间，里面的人出不去，外面的人进不来，具有极强的防御力。BFC 的特性表现如出一辙。
占位符
IE 9 及其以下浏览器不支持 placeholder 占位符效果，实际开发的时候，针对这些浏览器，需要进行模拟，比较好的做法是使用 label 标签和输入框并覆盖在输入框上面，好处是点击占位文字输入框天然 focus，并且不会污染输入框的 value。
logo
很多网站左上角都有包含自己网站名称的标识（logo），而这些标识一般都是图片，为了更好地 SEO 以及无障碍识别，我们一般会使用 h1 标签写上网站的名称。
clip 剪裁隐藏是上策，既满足视觉上的隐藏，屏幕阅读设备等辅助设备也支持得很好。
.logo h1 {
position: absolute;
clip: rect(0 0 0 0);
}
理解 font-size 与 em，ex，和 rem 的关系
ex 是字符 x 高度，显然和 font-size 关系密切，font-size 值越大，自然 ex 对应的大小也就大。
em 实际上更适用于图文内容展示的场景，对此进行弹性布局。例如，
～
以及
等与文本内容展示的元素的 margin 都是用 em 作为单位，这样，当用户把浏览 器默认字号从“中”设置成“大”或改成“小”的时候，上下间距也能根据字号大小自动调整， 使阅读更舒服。 再举个适用于 em 的场景，如果我们使用 SVG 矢量图标，建议设置 SVG 宽高如下： svg { width: 1em; height: 1em; } 这样，无论图标是个大号文字混在一起还是和小号文字混在一起，都能和当前文字大小保持一致，既省时又省力。