首页  思维导图  详情

CSS

2020-06-05 14:16:36   2  举报





AI智能生成

为你推荐

查看更多



CSS

css

简单了解html和css

CSS

前端面试 css

前端

面试

css

作者其他创作

大纲/内容

CSS

请读大佬原文

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

font color=\"#c41230\

两个快捷值

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不会发生折叠

盒模型

原文的IE盒模型有误

什么是盒模型

两种盒模型

IE盒模型

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

标准盒模型

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

清除浮动

为什么清除浮动

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

清除浮动的方法

1、添加新元素

2、使用伪元素

3、触发父元素BFC

常见布局

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

几个实现方法

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

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

弹性布局

flex:1 即flex-grow:1

要点

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

一些其他的布局方式

看大佬原文

em & rem

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

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

该关键字指定font color=\"#c41230\