高度和宽度
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 (内联格式化上下文)
网友评论