这是我参与「第四届青训营 」笔记创作活动的第5天。
一、常规流 Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内( in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局
二、行级排版上下文
- lnline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
三、块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是 visible的块盒"
- display: flow-root;
四、BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
五、Flex Box是什么?
一种新的排版上下文·它可以控制子级盒子的:
- 摆放的流向 (→ ← ↑ ↓ )
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
01. flex-direction
定义和用法
flex-direction 属性规定弹性项目的方向。
注释：如果元素不是弹性项目，则 flex 属性无效。
CSS语法
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
02. justify-content
定义和用法
justify-content 属性（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。
CSS 语法
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
03. align-items
定义和用法
align-items 属性为弹性容器内的项目指定默认对齐方式。
CSS 语法
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
04. align-self
定义和用法
align-self 属性指定弹性容器内所选项目的对齐方式。
CSS 语法
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
05. order
定义和用法
order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。
CSS 语法
order: number|initial|inherit;
06. Flexibility
可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
六、Grid布局?
display: grid
display: grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
划分网格
- grid line 网格线
- grid area网格区域
07. position属性
- static：默认值，非定位元素
- relative：相对自身原本位置偏移，不脱离文档流
- absolute：绝对定位，相对非static祖先元素定位
- fixed：相对于视口绝对定位
08. position: relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top .left 、 bottom .right设置偏移长度
- 流内其它元素当它没有偏移一样布局
09. position: absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
七、学习CSS的几点建议
- 充分利用MDN和M3C css规范
- 保持好奇心，善用浏览器的开发者工具
- 持续学习，CSS新特性还在不断出现
小结：通过青训营的学习，现做个简单小结。css3实现了很多以前需要用图片实现的效果（渐变边框，盒阴影，真正的圆角，字阴影，多图片背景，字体透明度等)
还统一了部分标准样式( text-overflow,word-wrap,opcity )，不必在为firefox连续英文字母折行的问题写脚本了
增加了新的盒模型模式border-box，轮廓外边框outine属性，增加了columns属性，简化了结构，@font-face属性能使客户机上显示服务端安装的字体。
方便的完成了以前需要通过js来实现的功能（通过选择器可以轻易找出自己想找到的DOM元素，resize属性)
通过media属性CSS可以更精确作用于不同的媒介类型
几乎所有的主流浏览器的最新版本都对css3有着很好的支持(除了ie)，虽然IE对css3的支持不良，但好消息就是IE9将会全面支持html5和css3。
