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

<ul><li>父级设置为弹性盒，设置对齐属性</li></ul>

<ul><li>父级容器设置成表格， 子级设为行内元素</li></ul>

适合子级内容为文本展示

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

<ul><li>父级容器设置为弹性盒， 子级设置外边距</li></ul>

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

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

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

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

BFC

什么是BFC

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

如何触发BFC

BFC的渲染规则是什么

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

BFC的应用场景

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

图示

<ul><li>避免某元素被浮动元素覆盖： </li></ul>

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

图示

<ul><li>阻止外边距重叠： </li></ul>

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

图示

盒模型

什么是盒模型

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

图示

两种盒模型

IE盒模型

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

图示

标准盒模型

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

图示

清除浮动

为什么清除浮动

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

清除浮动的方法

1、添加新元素

2、使用伪元素

3、触发父元素BFC

常见布局

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

html

几个实现方法

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

<ul><li>左边设置左浮动， 右边隐藏溢出的内容</li></ul>

flex:1  即 flex-grow:1

要点

<ul><li>左右都设置浮动，width：calc（）</li></ul>

要点

一些其他的布局方式

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）之后，    其他的元素在定位的时候会当做没看见它，两者位置重叠都是可以的。