css深入理解

高度和宽度

DIV的高度由其内部文档流元素的高度总和决定。

文档流：文档内元素的流动方向(内联元素从左往右移动，块级元素从上往下移动，每个块级元素另起一行)。

文字溢出省略：

{white-space:nowrap;     text-overflow:ellipsis;}

---

堆叠上下文

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。

堆叠顺序

层叠顺序

z-index与层叠上下文：

---

CSS icon

icon网站：好看的图标

---

响应式

响应式：不同的屏幕显示不同的样式。

 网页用手机端显示：

<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

简拼：meta:vp

语法：@media (max-width:  xxpx)后跟类名样式。

---

FLEX布局

    1.flex-direction: row | row-reverse | column | column-reverse;

      决定主轴的方向（即项目的排列方向）。

            row（默认值）：主轴为水平方向，起点在左端。

            row-reverse：主轴为水平方向，起点在右端。

            column：主轴为垂直方向，起点在上沿。

            column-reverse：主轴为垂直方向，起点在下沿。

    2.flex-wrap: nowrap | wrap | wrap-reverse;

     如果一条轴线排不下，如何换行。

            nowrap（默认）：不换行。

            wrap：换行，第一行在上方。

            wrap-reverse：换行，第一行在下方。

    3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

    4.justify-content: flex-start | flex-end | center | space-between | space-around;

     定义了项目在主轴上的对齐方式。

            flex-start（默认值）：左对齐

            flex-end：右对齐

            center： 居中

            space-between：两端对齐，项目之间的间隔都相等。

            space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

    5.align-items: flex-start | flex-end | center | baseline | stretch;

     定义项目在交叉轴上如何对齐

            flex-start：交叉轴的起点对齐。

            flex-end：交叉轴的终点对齐。

            center：交叉轴的中点对齐。

            baseline: 项目的第一行文字的基线对齐。

            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex布局教程：阮一峰

---

BFC

BFC：Block Formatting Context（块级格式化上下文）

display:flow-root  触发BFC。

IFC

IFC:Inline Formatting Context  (内联格式化上下文)

---