张鑫旭的《CSS世界》读后笔记

【题外话】之前有人问过我你这样做笔记有啥用吗，跟写目录一样，我的回答是这不是写目录哈，这是在阅读过程中把些自己认为重要的知识点记下来。这样做对我有几个作用，首先是可以敦促自己一步一步把这本书认真的阅读完，其次是加深一下自己对这些知识点的记忆，还有就是方便以后自己回顾。不知道这个方法对你们有没有用哈，如果拿一本向《Javascript高级程序设计》这样的大部头给你读，你做不到坚持读完的话，可以试试我这种方式，嘻嘻

第1章 概述

（1）CSS完胜SVG的武器—流

（2）table自己的世界

<table>比CSS还要老，也就是css正式诞生之前，<table>就已经出现了。“流”的特性对<table>并不适用。

（3）CSS新世界—css3

1.布局更为丰富

CSS3媒介查询、图片元素的srcset属性、css的object-fit属性、弹性盒布局、格栅布局；

2.视觉表现更丰富

圆角、阴影、渐变、transform、filter滤镜盒混合模式、animation。

第2章 需提前了解的术语和概念

（1）术语

属性、值、关键字、变量、长度单位、功能符（rgba/calc/attr/url/scale）、属性值、声明、声明块、规则或规则集、选择器、关系选择器、@规则。

（2）未定义行为

规范顾及不到的细枝末节的实现，就称为“未定义行为”。

第3章 流、元素与基本尺寸

（1）格式化宽度

对于非替换元素，当left/right或top/bottom对立方位的属性值同时存在时，元素的宽度表现为“格式化宽度”，其宽度大小相对于最近的具有定位特性的祖先元素计算。

（2）宽度分离原则

所谓“宽度分离原则”，就是CSS中的width属性不与影响宽度的padding/border（有时候包括margin）属性共存。可以嵌套一层标签，父元素定宽，子元素因为width使用的是默认值auto，这样分离会使代码更易维护，页面更加稳固。元素宽度要包含padding/border时，当然也可以使用box-sizing属性，但非必要时还是尽量遵循“无宽度”原则。

（3）不推崇*{box-sizing: border-box}

1.*容易产生没必要的消耗；2.这种做法并不能解决所有问题，只有没有水平margin才有用。

Box-sizing被发明出来最大的初衷应该是解决替换元素宽度自适应问题。

（4）浏览器渲染顺序

自上而下、自外而内

（5）绝对定位的宽高百分比计算是相对于padding box的，也就是说会把padding大小值计算在内，但是，非绝对定位元素则是相对于content box计算的。

（6）min