一二章
1.”流”: css世界中的一种基本的定位和布局机制,具有自适应特性.
流体布局:利用元素"流"的特性实现各类布局效果,但并不等于"自适应布局"!
2.选择器:
2.1 属性选择器: 指含有[ ]的选择器, 如[title="css-world"]{}
2.2 伪类选择器( : ) 如 :first-child,:last-child
2.3 伪元素选择器 (::), 如 ::before ,::after, ::first-line, ::first-letter
2.4 后代选择器: 空格连接
2.5 相邻后台: 仅选择儿子元素,孙子重孙忽略, > 连接
2.6 兄弟选择器: ~
2.7 相邻兄弟选择器: +
3. @规则 : 以@字符开始的一些规则,像@media,@font-face,@page,@support
第三章 流,元素与基本尺寸
1. html标签通常分为: 块级元素(block-level element)和 内联元素(inline element)
1.1 块级元素: 换行特性, 可配合clear属性来清除浮动带来的影响
块级元素,宽度默认铺满容器,及width: 100%,不需要特意设置,注意流体特性
给标签设置display:block会块状化
2. width/height作用在内在盒子,也就是"容器盒子"
2.1 width: auto witth的默认值是auto,有以下4种宽度表现:
(1) 充分利用可用空间,
(2) 收缩与包裹
(3) 收缩到最小
(4) 超出容器限制: 比如内容很长或者white-space:nowrap
注意: 宽高是作用在context box上的
2.2 外部尺寸与流体特性
(1) 正常流宽度: 在一个容器中倒入足量的水时,水会均匀铺满.
(2) 格式化宽度: 仅出现在"绝对定位模型",就是position为absolute或fixed.默认情况下,宽度表现是"包裹性",宽度由内部尺寸决定
2.3 内部尺寸与流体特性
3种表现形式:
(1) 包裹性: shrink-to-fit,包裹和自适应性
(2) 首先最新宽度: 元素最适合的最小宽度
(3) 最大宽度: 元素可以有的最大宽度,
3. "盒"世界
每个元素都是两个盒子，外在盒子和内在盒子（容器盒子）。
内在盒子（容器盒子）负责宽高、内容呈现等。
按照display的属性值不同，值为block的元素的盒子实际由外在的“块级盒子”和内在的“块级容器盒子”组成，值为inline-block的元素由外在的“内联盒子”和内在的“块级容器盒子”组成，值为inline的元素则内外均是"内联盒子"。
内在盒子（容器盒子）又分为4个盒子：content-box、padding-box、border-box、margin-box
4. 宽度分离原则: width属性不与影响宽度的padding/border(有时候包括margin)属性共存
.father {
width: 102px;
}
.son {
border: 1px solid;
padding: 20px;
}
5. 改变 width/height 作用细节的 box-sizing(盒尺寸)
content-box(默认)/padding-box/border-box
6.浏览器渲染的基本原理: 先下载文档内容，加载头部的 样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染 DOM 内容。先渲染父元素，后渲染子元素，是有先后顺序的。
7. min-width/max-width 出现的场景一定是自适应布局或者流体布局中,具有边界行为的属性.
width/height 的默认值是 auto
min-width/min-height 的初始值是 auto，max-width/max-
height的初始值是none。
8.特殊情况:
8.1 超越!important : max-width 覆盖width
8.2 超越最大: min-width覆盖max-width，此规则发生在min-width和max-width 冲突的时候。最小值大于最大值时
9. 内联元素
流体布局的本质所在 : inline 和 block . 从作用上来讲,块级负责结构，内联负责内容
10. 幽灵空白节点: 在 HTML5 文档声明 中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这 个“空白节点”永远透明，不占据任何宽度(有高度)，看不见也无法通过脚本获取，就好像幽灵一样， 但又确确实实地存在，表现如同文本节点一样
第四章 盒尺寸四大家族
content padding margin border
1. content
1.1 什么是替换元素
元素分为替换元素和非替换元素.
替换元素: 内容可以被替换. 如 img,object,video,iframe,input,textarea
特征: (1)内容的外观不受页面上的 CSS 的影响 ; (2) 有自己的尺寸 (3) 有自己的一套表现规则
1.2 替换元素默认display值
1.3 替换元素的尺寸计算规则
从内到外分为3类: 固有尺寸,HTML尺寸和CSS尺寸
1）固有尺寸指的是替换内容原本的尺寸。
2）HTML 尺寸 将其想象成水煮蛋里面的那一层白色的膜，
里面是“固有尺寸”这个蛋黄蛋白，外面是“CSS 尺寸”这个蛋壳
3）CSS 尺寸特指可以通过 CSS 的 width 和 height 或者 max-width/min-width 和
max-height/min-height 设置的尺寸，对应盒尺寸中的 content box
对应关系: 蛋白--> 膜 --> 壳
注意: CSS 世界中，图片资源的固有尺寸是无法改变的！
1.4 可通过::before给图片添加默认背景图,img加载完图片后会不显示,增强体验
1.5 content
