CSS-层叠样式表

一、需求 可能会有这种需求：当文本包含后缀名的时候，产品要求当超出长度时，展示后缀名和前面部分，中间出现省略号 二、解决思路 可以在当前模块中新建两个 dom 元素，prev 与 next，使用字符串

标签中 dns-prefetch、prefetch、preload、defer、async 的区别 1、dns-prefetch 域名转化为 ip 是一个比较耗时的过程，dns-prefetch 能让

前端学习思维导图下载地址：github码云

css改变触发重排重绘的属性和具体改变以下是基于Google的BlinkWeb引擎，css属性改变所对应的重排和重绘改变，是为改变，否为不改变|css属性|重排|重绘||--|--|--|align-

就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，外面的元素也不会影响容器内的子元素。 column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。 行内格式化上下文是一个网页的渲染结果的一部分。其中，各行…

相信大家都用过CSS预处理，比如，less、scss(sass)。不可避免的会用到变量。 variableName表示自定义变量名，variableValue表示属性值。 以“--”双横杠开头，后面可以是数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合，甚至是中…

MDNlist-style-type|字段|展示||---|---||disc|||circle|||square|||decimal|||decimal-leading-zero|||lower-r

如果flex的属性值只有一个值，则： 如果是数值，例如flex: 1，则这个1表示flex-grow，此时flex-shrink和flex-basis都使用默认值，分别是1和auto。 如果是长度值，例如flex: 100px，则这个100px显然指flex-basis，因为3…

设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。

1、自定义文本选择2、去掉video的controls中的下载按钮3、css3特性中的transform：translateZ(0)有什么作用GPU加速，优化前端性能4、滚动条样式修改5、inputt

在前端写页面的时候经常能碰到需要对一个元素进行水平、垂直或者水平垂直居中。 对于一个div元素来说，通过设置margin: 0 auto;来进行水平居中，也是最常用的一种。但是当是定位元素或者是display改变元素属性时，对某些属性可以，如下： 对其余的display属性不生…

display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙…

使用felx 布局让子元素 左右间距相等 效果展示 三种方法 1、justify-content: space-evenly; 2、justify-content: space-between; 和伪

scss/sass是动态样式语言，比css多出很多功能（如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等），更方便阅读和维护。 less也是动态样式语言，一样也比css多处很多功能（如变量，继承，运算， 函数）， Less 既可以在客户端上运行，也可在服务端运行 …

flex-shrink 属性的作用：在空间不够时让各个子元素收缩以适应有限的空间了。 flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1。 flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。 不会收缩所有的空间，而只会收缩 flex-sh…

flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位），剩余空间将会按照这个权重来分配。 比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum = a …