CSS学习记录
1.块级元素block
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；
<div>, <p>, <h1>, <form>, <ul> 和 <li>是block元素。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性)
2.行内元素inline
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变；
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素
3.定位position
- 相对定位relative
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。相对定位的元素并未脱离文档流 - 绝对定位absolute
相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其他元素时，绝对定位元素不占据空间（可先忽略）。布局完其他元素后，绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块）。 - 固定定位fixed
固定定位与绝对定位相似，但元素是相对于viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。 - 粘性定位sticky
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位
#one {
position: sticky;
top: 10px;
}
在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
4.CSS 像素
CSS 像素（CSS pixels），CSS 和 JavaScript 使用的抽象单位，浏览器内的一切长度都是以 CSS 像素为单位的，CSS 像素的单位是px。
需要注意，在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位。px在css中是绝对长度 ，但却相对于设备像素（device pixel），它所代表的实际像素与设备像素有关。
- CSS 像素的第一方面的相对性：在同一设备上，每 1 个 CSS 像素所代表的物理像素是可以变化的，比如调整屏幕的分辨率。
- CSS 像素的第二方面的相对性：在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的
由于不同的物理设备的物理像素的大小是不一样的，所以 CSS 认为浏览器应该对 CSS 中的像素进行调节，使得浏览器中一个 CSS 像素的大小在不同物理设备上看上去大小总是差不多，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而 CSS 规范中使用“参考像素”来进行换算。
由于 CSS 像素是一个视角单位，所以在真正实现时，为了方便基本都是根据设备像素换算的。浏览器根据硬件设备能够直接获取 CSS 像素。
PC 端浏览器默认情况下一个 CSS 像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个 CSS 像素等于了两个或多个设备像素宽度。
5.flex布局
flex-direction 主轴（排列方向顺序）
row、row-reverse、column、column-reverse
flex容器
display:flex
容器中的直系子元素就会变为 flex 元素。由于所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：
- 元素排列为一行（flex-direction 属性的初始值是 row）。
- 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸，但是可以缩小。
- 元素被拉伸来填充交叉轴大小。
- flex-basis 属性为 auto。
- flex-wrap 属性为 nowrap。(可以设置成wrap，使溢出的元素换行）
flex-flow
flex-direction 和 flex-wrap 组合为简写属性 flex-flow;第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.
flex
Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。
- flex-basis 定义了该元素的空间大小,如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。
- flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）;设定 flex-grow 值为 1，容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。
- flex-grow属性是处理 flex 元素在主轴上增加空间的问题，相反flex-shrink属性是处理 flex 元素收缩的问题。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。
