CSS
文章平均质量分 68
gqkmiss
前端
展开
-
CSS 实现文本中间省略号
可能会有这种需求:当文本包含后缀名的时候,产品要求当超出长度时,展示后缀名和前面部分,中间出现省略号可以在当前模块中新建两个 元素, 与 ,使用字符串 方法进行截取原创 2022-06-16 14:55:33 · 4384 阅读 · 4 评论 -
CSS单位
CSS单位字体相对长度单位单位含义em元素的字体大小ex元素字体的x高度cap元素字体的上限高度(大写字母的标称高度)ch元素字体中窄字形的典型字符前进,如“ 0”(零,U + 0030)字形所表示ic元素字体中全角字形的典型字符前进,以“水”(CJK水表意文字,U + 6C34)字形表示rem根元素的字体大小lh元素的线高rlh根元素的线高vw视口宽度的1%vh视口高度的1%vi根元素的内联轴方向视口原创 2020-11-05 20:39:59 · 277 阅读 · 0 评论 -
less使用each遍历对象循环赋值
less使用each遍历对象循环赋值进行项目开发时,经常可以遇到多个margin、padding、font-size等,可能有5、10、20等不同的值,这个时候就需要进行each遍历循环赋值了margintop/right/bottom/left/** 定义需要遍历的对象 */@marAndPadAndFontList: { 4: 4px; 5: 5px; 8: 8px; 10: 10px; 12: 12px; 14: 14px; 15:原创 2020-11-05 11:56:20 · 3764 阅读 · 5 评论 -
css一些不常见但很有用的属性操作
1、自定义文本选择::selection { background: red; color: black;}2、去掉video的controls中的下载按钮video::-internal-media-controls-download-button { display:none;}video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webkit-media-controls-pa原创 2020-09-28 15:08:58 · 783 阅读 · 0 评论 -
SVG 标签
一、rect 矩形属性rect 元素的 width 和 height 属性可定义矩形的高度和宽度style 属性用来定义 CSS 属性CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)CSS 的 stroke-width 属性定义矩形边框的宽度CSS 的 stroke 属性定义矩形边框的颜色x 属性定义矩形的左侧位置(例如,x=“0” 定义矩形到浏览器窗口左侧的距离是 0px)y 属性定义矩形的顶端位置(例如,y=“0” 定义矩形到浏览器窗口顶端的距离是 0p原创 2020-09-27 14:31:01 · 5257 阅读 · 0 评论 -
CSS背景图和渐变色共存
CSS背景图和渐变色共存需求场景是在一个DOM元素上需要背景图和渐变色共存实现background: url(https://img.alicdn.com/imgextra/i4/1881744325/O1CN01JBktT81hotb8c6Py0_!!1881744325.png) center no-repeat,linear-gradient(to bottom,red,#3c3f40);效果代码<!DOCTYPE html><html><head原创 2020-09-07 19:45:58 · 2809 阅读 · 0 评论 -
css属性值改变触发重排重绘的具体属性以及改变情况
css改变触发重排重绘的属性和具体改变以下是基于 Google 的 Blink Web 引擎,css属性改变所对应的重排和重绘改变,是为改变,否为不改变css属性重排重绘align-content是是align-items是是align-self是是backface-visibility否是background-attachment否是background-blend-mode否是background-clip否是原创 2020-09-07 19:28:17 · 1140 阅读 · 0 评论 -
css变量
css变量相信大家都用过CSS预处理,比如,less、scss(sass)。不可避免的会用到变量。在less中是以 @ 定义变量;在scss中是以 $定义变量;然后在css中,也有变量,以-- 定义变量(两根连线词)css变量的定义1、语法:--variableName: variableValue;variableName表示自定义变量名,variableValue表示属性值。2、规范:以“–”双横杠开头,后面可以是数字[0-9]、字母[a-zA-Z]、下划线_和短横线-这些组合原创 2020-08-28 16:57:27 · 321 阅读 · 0 评论 -
使用flex 布局让子元素 左右间距相等
使用felx 布局让子元素 左右间距相等效果展示使子元素左右间距相等布局三种方法1、justify-content: space-evenly;2、justify-content: space-between; 和伪类3、子元素 margin: 0 auto; margin-left: 0; 第一个子元素margin-left: auto;示例代码示例<!DOCTYPE html><html><head> <meta charset=原创 2020-08-27 19:19:08 · 10485 阅读 · 3 评论 -
display: flex布局
flex布局运用在flex container上的属性flex-direction: 确定主轴方向flex-wrap: 设置是否换行flex-flow: 设置主轴方向和是否换行justify-content:延主轴方向的布局方式align-item: 延交叉轴方向的布局方式align-content: 多根轴线的布局方式运用在Flex items上的属性order: item的排序,可以为负值flex-basis: 设置item基础宽度flex-grow: 设置计算后如果存在剩余原创 2020-08-27 19:14:52 · 615 阅读 · 0 评论 -
CSS格式化上下文FC
CSS格式化上下文FCFC(Formatting Contexts),是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。块格式化上下文 BFC(Block Formatting Context)BFC 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响到外面的元素,外面的元素也不会影原创 2020-08-21 10:45:34 · 318 阅读 · 0 评论 -
CSS font-family常见中文字体对应的英文名称
CSS font-family常见中文字体对应的英文名称var dataFont = { windows: [{ ch: '宋体', en: 'SimSun' }, { ch: '黑体', en: 'SimHei' }, { ch: '微软雅黑', en: 'Microsoft Yahei' }, { ch: '微软正黑体',原创 2020-08-18 13:54:28 · 1624 阅读 · 0 评论 -
爬楼梯
jquery实现爬楼梯效果<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #LoutiNav { width: 32px;原创 2020-05-25 14:04:40 · 289 阅读 · 0 评论 -
overscroll-behavior
overscroll-behavioroverscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。默认情况下,当触及页面顶部或者底部时(或者是其他可滚动区域),移动端浏览器倾向于提供一种“触底”效果,甚至进行页面刷新。你可能也发现了,当对话框中含有可滚动内容时,一旦滚动至对话框的边界,对话框下方的页面内容也开始滚动了——这被称为“滚动链”原创 2020-05-22 14:18:50 · 1136 阅读 · 0 评论 -
flex属性值
Flex属性值flex属性值可以为1个、2个、3个以及关键字属性值对应:flex: flex-grow flex-shrink flex-basis;1、一个值如果flex的属性值只有一个值,则: 如果是数值,例如flex: 1,则这个1表示flex-grow,此时flex-shrink和flex-basis都使用默认值,分别是1和auto。 如果是长度值,例如flex: 100px,则这个100px显然指flex-basis,因为3个缩写CSS属性中只有flex-basis的属性值是长度值。此时原创 2020-05-22 14:04:40 · 2679 阅读 · 0 评论 -
less、scss/sass的区别
less、scss/sass的区别一、less、scss/sassscss/sass是动态样式语言,比css多出很多功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更方便阅读和维护。less也是动态样式语言,一样也比css多处很多功能(如变量,继承,运算, 函数), Less 既可以在客户端上运行,也可在服务端运行 ( Node.js)。scss和sass的关系Sass是缩排语法,对于习惯css的web开发者来说很不直观,还是有点学习成本,也不能将css代码加入到sass原创 2020-05-14 10:39:27 · 13647 阅读 · 3 评论 -
opacity: 0、visibility: hidden、display: none三者区别
opacity: 0、visibility: hidden、display: none三者区别opacity: 0、visibility: hidden、display: none三者都是让对应的元素不可见,区别可以从结构、继承、性能三点上面来讲结构:display:none: 会让元素完全从dom中消失,渲染的时候不占据任何空间, 不能点击visibility: hidden:不会让元素从dom中消失,渲染元素继续占据空间,只是内容不可见,不能点击opacity: 0: 不会让元素从dom中消原创 2020-05-12 09:46:14 · 772 阅读 · 0 评论 -
css画三角形
三角形倒三角<style type="text/css" media="screen">.div1{ width: 0; height: 0; border: 100px solid; <!--上右下左--> border-color: red transparent transparent transparent;}</style><...原创 2020-02-27 10:14:02 · 201 阅读 · 0 评论 -
list-style-type
MDN list-style-type字段展示disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-greeklower-latinupper-latinarmeniangeorgianlowe...原创 2019-12-18 13:32:17 · 268 阅读 · 0 评论 -
css计数器
css 计数器一、初始化计数器counter-reset: 计数器名称[, 默认值number]; /* 重置计数器成0 */在使用计数器的时候需要先初始化这个计数器,并且设置一个计数器的名字(变量)。conter-reset 就是用来初始化的,这个属性是必须设置的,否则没办法用计数器。counter-reset属性也含有一列一个或多个计数器,每个后面可以跟一个可选的...原创 2019-12-18 11:37:11 · 384 阅读 · 0 评论 -
flex-shrink如何如何分配容器收缩空间
flex-shrink如何如何分配容器收缩空间flex-shrink 属性的作用:在空间不够时让各个子元素收缩以适应有限的空间了。flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1。flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。sum > 1<style type="text/css"> .flex3{ display:...原创 2019-12-13 10:53:54 · 517 阅读 · 0 评论 -
flex-grow如何分配父元素的剩余空间
flex-grow分配父元素的剩余空间flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时,如何分配这些剩余空间。其值为一个权重(也称扩张因子),默认为 0(纯数值,无单位),剩余空间将会按照这个权重来分配。比如剩余空间为 x,三个元素的 flex-grow 分别为 a,b,c。设 sum = a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x *...原创 2019-12-12 17:43:21 · 1033 阅读 · 1 评论 -
元素水平垂直居中
元素水平垂直居中元素水平垂直居中1、通过margin值水平居中水平居中垂直居中2、定位元素通过left和margin值居中水平居中垂直居中3、定位元素通过left和transform属性居中水平居中垂直居中4、图片水平垂直居中水平居中垂直居中元素水平垂直居中在前端写页面的时候经常能碰到需要对一个元素进行水平、垂直或者水平垂直居中。1、通过margin值水平居中 <head> ...原创 2018-09-19 14:04:49 · 279 阅读 · 0 评论