首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
CSS-层叠样式表
日升
创建于2021-05-10
订阅专栏
CSS-层叠样式表
等 5 人订阅
共16篇文章
创建于2021-05-10
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
CSS 实现文本中间省略号
一、需求 可能会有这种需求:当文本包含后缀名的时候,产品要求当超出长度时,展示后缀名和前面部分,中间出现省略号 二、解决思路 可以在当前模块中新建两个 dom 元素,prev 与 next,使用字符串
link 标签和 script 标签中 dns-prefetch、prefetch、preload、defer、async 字段有什么区别?
标签中 dns-prefetch、prefetch、preload、defer、async 的区别 1、dns-prefetch 域名转化为 ip 是一个比较耗时的过程,dns-prefetch 能让
前端学习思维导图
前端学习思维导图下载地址:github码云
css属性值改变触发重排重绘的具体属性以及改变情况
css改变触发重排重绘的属性和具体改变以下是基于Google的BlinkWeb引擎,css属性改变所对应的重排和重绘改变,是为改变,否为不改变|css属性|重排|重绘||--|--|--|align-
CSS格式化上下文FC
就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,外面的元素也不会影响容器内的子元素。 column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中。 行内格式化上下文是一个网页的渲染结果的一部分。其中,各行…
css变量
相信大家都用过CSS预处理,比如,less、scss(sass)。不可避免的会用到变量。 variableName表示自定义变量名,variableValue表示属性值。 以“--”双横杠开头,后面可以是数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合,甚至是中…
html中li的list-style-type
MDNlist-style-type|字段|展示||---|---||disc|||circle|||square|||decimal|||decimal-leading-zero|||lower-r
css中diaplay:flex属性值
如果flex的属性值只有一个值,则: 如果是数值,例如flex: 1,则这个1表示flex-grow,此时flex-shrink和flex-basis都使用默认值,分别是1和auto。 如果是长度值,例如flex: 100px,则这个100px显然指flex-basis,因为3…
css中overscroll-behavior属性
设置这个值后,默认的滚动边界行为不变(“触底”效果或者刷新),但是临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动。
css一些不常见但很有用的属性操作
1、自定义文本选择2、去掉video的controls中的下载按钮3、css3特性中的transform:translateZ(0)有什么作用GPU加速,优化前端性能4、滚动条样式修改5、inputt
元素水平垂直居中
在前端写页面的时候经常能碰到需要对一个元素进行水平、垂直或者水平垂直居中。 对于一个div元素来说,通过设置margin: 0 auto;来进行水平居中,也是最常用的一种。但是当是定位元素或者是display改变元素属性时,对某些属性可以,如下: 对其余的display属性不生…
css属性opacity: 0、visibility: hidden、display: none三者区别
display: none和opacity: 0:是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。 visibility: hidden:是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙…
使用felx 布局让子元素 左右间距相等
使用felx 布局让子元素 左右间距相等 效果展示 三种方法 1、justify-content: space-evenly; 2、justify-content: space-between; 和伪
css预处理器less、scss/sass的区别
scss/sass是动态样式语言,比css多出很多功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更方便阅读和维护。 less也是动态样式语言,一样也比css多处很多功能(如变量,继承,运算, 函数), Less 既可以在客户端上运行,也可在服务端运行 …
flex-shrink如何如何分配容器收缩空间
flex-shrink 属性的作用:在空间不够时让各个子元素收缩以适应有限的空间了。 flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1。 flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。 不会收缩所有的空间,而只会收缩 flex-sh…
flex-grow如何分配父元素的剩余空间
flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时,如何分配这些剩余空间。其值为一个权重(也称扩张因子),默认为 0(纯数值,无单位),剩余空间将会按照这个权重来分配。 比如剩余空间为 x,三个元素的 flex-grow 分别为 a,b,c。设 sum = a …