CSS笔记

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
形成BFC的条件：
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
BFC规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。

布局规则：
- 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始
- 这些盒之间的水平margin，border和padding都有效
- 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐
行盒：
- 包含来自同一行的盒的矩形区域叫做行盒(line box)
- line box的宽度由包含块和float情况决定,一般来说,line box的宽度等于包含块两边之间的宽度,然而float可以插入到包含块和行盒边之间,如果有float,那么line box的宽度会比没有float时小
- line box的高度由line-height决定,而line box之间的高度各不相同(比如只含文本的line box高度与包含图片的line box高度之间)
- line box的高度能够容纳它包含的所有盒,当盒的高度小于行盒的高度(例如,如果盒是baseline对齐)时,盒的竖直对齐方式由vertical-align属性决定
- 当一行的行内级盒的总宽度小于它们所在的line box的宽度时，它们在行盒里的水平分布由text-align属性决定。如果该属性值为justify，用户代理可能会拉伸行内盒（不包括inline-table和inline-block盒）里的空白和字（间距）

负边距原理：
给一个不定宽的块级框设置正边距会让他的宽度减小，设置负边距会让他的宽度增加。
float：
浮动框的上边缘会去贴当前行盒的上边缘或是之前浮动框的下边缘，左浮动框的左边缘会去贴包含框的左边缘，或者他之前的左浮动框的右边缘。如果当前行剩余的空间容不下一个浮动框，他就会换行。（左浮动）。
绝对定位：
绝对定位的框完全脱离普通流。
常用的布局：
- 弹性布局（flex布局）
- 流式布局（设置百分比）
- 瀑布流布局（多栏布局，响应加载）
- 响应式布局（通过媒介查询加载不同样式）
- 响应式格栅系统（bootstrap）
viewport
- layout viewport：浏览器默认区域
- visual viewport：可视区域大小
- ideal viewport：完美适配移动设备的viewport