CSS
css
cc° 淡忘
这个作者很懒,什么都没留下…
展开
-
苹果手机上input的button按钮颜色显示问题
在手机页面上写了个input的button按钮,但是颜色发白的解决方法为,css中加上input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 在苹果手机上的input按钮自带效果,需要加上outline:0px; -webki...转载 2020-04-17 17:13:34 · 211 阅读 · 0 评论 -
css 计算属性 calc()
介绍calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。语法.element { width:calc(expression); }运算法则使用 “+”、"-"、"*" 和 “/” 运算可以使用百分比、px、em、rem等单位运算可以混合使用各...原创 2020-03-13 10:58:37 · 591 阅读 · 0 评论 -
层叠上下文
元素提升为一个比较特殊的图层,在三维空间中 (z轴) 高出普通元素一等。触发条件根层叠上下文(html)positioncss3属性flextransformopacityfilterwill-change-webkit-overflow-scrolling层叠等级:层叠上下文在z轴上的排序在同一层叠上下文中,层叠等级才有意义z-index的优先级最高...原创 2020-01-08 13:36:40 · 107 阅读 · 0 评论 -
什么是BFC?
什么是BFC?BFC 全称为 块格式化上下文 (Block Formatting Context) 。MDN的解释:一个块格式化上下文(block formatting context) 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域,也是浮动层元素进行交互的区域。一个块格式化上下文由以下之一创建:根元素或其它包含它的元素浮动元素 (元素的 float 不是 ...原创 2020-01-08 13:05:36 · 225 阅读 · 0 评论 -
css3 transition transform属性造成文字抖动及模糊
问题:动画加在图片上的,但是却影响了其他文字解决办法:在该动画的transform里加上translateZ(0)值, 能解决文字抖动的问题,但是没解决文字模糊的问题。在发生文字模糊的地方加上transform: translate3d(0,0,0),解决文字模糊以及的问题。...原创 2019-12-05 17:21:57 · 4170 阅读 · 0 评论 -
文本溢出添加省略号,line-clamp控制文本行数
作用:限制在一个块元素显示的文本的行数。-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orie...原创 2019-12-04 17:45:04 · 740 阅读 · 0 评论 -
取消图片拖拽效果及取消文字选中效果
以下为我们鼠标拖拽图片或者连接时触发(可能用到)的函数://在拖动目标上触发事件 (源元素):ondragstart //用户开始拖动元素时触发ondrag //元素正在拖动时触发ondragend //用户完成元素拖动后触发//释放目标时触发的事件:ondragenter //当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover //当某被拖动的对象在另...原创 2019-10-22 17:26:30 · 738 阅读 · 0 评论 -
pointer-events,穿透,解决事件等行为被div/img挡住问题
pointer-events 更像是JavaScript,它能够:阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的 hover 和 active 状态的变化触发事件阻止JavaScript点击动作触发的事件实际代码使用中案例:1、提交页面,提交按钮点击后,添加这个样式属性(style=“pointer-events”),来防止重复提交。2、一些层的绝对定位,覆盖...原创 2019-10-22 15:03:20 · 1690 阅读 · 0 评论 -
div高度大于里面包含的img图片的高度
问题:div中img图片下方空白问题,div的高度不等于img的高度,会留出几个像素。解决方法:1.div设置font-size:0<div style="font-size:0"> <img /></div>2.div设置display:flex<div style="display:flex"> <img />...原创 2019-10-22 10:58:11 · 717 阅读 · 0 评论