CSS 思维导图模板_ProcessOn思维导图、流程图

flex布局

基本概念

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性
（使用在flex布局容器上的属性）

justify-content

定义了子元素在主轴(横轴)上的对齐方式

属性值

属性效果图示

align-items

定义了定义项目在交叉轴(竖轴)上对齐方式

属性值

属性效果图示

flex-direction

主轴(横轴)方向

属性值

flex-wrap

换行方式

属性值

flex-flow

flex-flow属性是flex-direction属性和flex-wrap的简写

属性值

align-content

定义多根轴线的对齐方式

属性值

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

属性效果图示

项目属性
（使用在容器内子元素上的属性）

flex-grow

定义项目的放大比例，默认为0，即使有剩余空间也不放大。
如果所有子元素flex-grow为1，那么将等分剩余空间，如果某个子元素flex-grow为2，那么这个子元素将占据2倍的剩余空间

效果图示

flex-shrink

定义项目的缩小比例，默认为1，即如果空间不足，子元素将缩小。
如果所有子元素flex-shrink都为1，某个子元素flex-shrink为0，那么该子元素将不缩小

效果图示

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis

定义在分配多余空间之前，项目占据的主轴空间，
默认auto，即子元素本来的大小，
如果设定为一个固定的值，那么子元素将占据固定空间

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，
默认值为0 1 auto，即有剩余空间不放大，剩余空间不够将缩小，子元素占据自身大小

两个快捷值

auto (1 1 auto)

有剩余空间则平均分配，空间不够将等比缩小，子元素占据空间等于自身大小

none (0 0 auto)

有剩余空间也不分配，空间不够也不缩小，子元素占据空间等于自身大小

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0

效果图示

align-self

定义单个子元素的排列方式，
例如align-items设置了center，使得所有子元素居中对齐，
那么可以通过给某个子元素设置align-self来单独设置子元素的排序方式

垂直水平居中

html

父级设置为弹性盒，设置对齐属性

父级容器设置成表格，
子级设为行内元素

适合子级内容为文本展示

父级容器设置相对定位，
子级设置绝对定位后通过外边距居中

父级容器设置为弹性盒，
子级设置外边距

父级容器设置相对定位，
子级设置绝对定位，左边距和上边距设置负一半宽度

适合子级的宽高固定的情况

父级容器设置相对定位，
子级设置绝对定位，通过变形属性设置水平和垂直方向负一半

适合子级的宽高不固定的情况

BFC

什么是BFC

BFC全称 Block Formatting Context 即块级格式上下文，
简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界

如何触发BFC

BFC的渲染规则是什么

BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）
BFC的区域不会与float的元素区域重叠
BFC内部的元素会在垂直方向上放置
BFC内部两个相邻元素的margin会发生重叠

BFC的应用场景

清除浮动：

BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷

图示

避免某元素被浮动元素覆盖：

BFC的区域不会与浮动元素的区域重叠

图示

阻止外边距重叠：

属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠

图示

盒模型

什么是盒模型

盒模型又称框模型（Box Model）,
包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素

图示

两种盒模型

IE盒模型

IE模型元素宽度width=content+padding+border，高度计算相同

图示

标准盒模型

标准模型元素宽度width=content，高度计算相同

图示

清除浮动

为什么清除浮动

清除浮动是为了解决子元素浮动而导致父元素高度塌陷的问题

清除浮动的方法

1、添加新元素

2、使用伪元素

3、触发父元素BFC

常见布局

CSS两列布局
——左侧定宽右侧自适应

html

几个实现方法

左边设置绝对定位，
右边设置左外边距，大小和左边的宽度相等

左边设置左浮动，
右边隐藏溢出的内容

弹性布局

flex:1
即
flex-grow:1

要点

左右都设置浮动，width：calc（）

要点

一些其他的布局方式

em & rem

两个都是css的单位，并且也都是相对单位

em

em作为font-size的单位时，其代表父元素的字体大小，
em作为其他属性单位时，代表当前元素的字体大小——MDN

em 值的大小是动态的。
当定义或继承font-size属性时，1em等于该元素的字体大小。
如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。
所以通常1em = 16px。2em = 32px。如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数

rem

rem作用于非根元素时，相对于根元素字体大小；
rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

rem 自适应原理

rem布局的本质

rem布局的本质是等比缩放，一般是基于宽度

UE图中的获取的像素单位的值，
转换为已rem为单位的值
公式

元素转换成rem = 元素宽度 / UE图宽度 * 100

position

MDN

取值

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
此时 top, right, bottom, left 和 z-index 属性无效。

relative

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

不脱离文档流

代码

效果

div2原来的占据的空间还在

absolute

元素会被移出正常文档流，并不为元素预留空间，
通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。
元素的位置在屏幕滚动时不会改变。
打印时，元素会出现在的每页的固定位置。
fixed 属性会创建新的层叠上下文。
当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky

脱离文档流

Q: 脱离文档流就不占据空间了吗？
A: 可以这么说。
更准确地一点说，是一个元素脱离文档流（out of normal flow）之后，
其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。