![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
qdmoment
全局掌控,剖析网站终端建设
展开
-
position:fixed怎么参照祖先元素定位以及transfrom属性对元素布局的影响的原理
position:fixed通常情况下是相对于窗口定位的,但是有一种情况,position:fixed是相对于祖先元素定位,而此时的定位层级(z-index)也是相对于祖先元素的。这种情况就是让祖先元素发生变换,也就是transfrom属性发生改变。实例:<div class='parent'> <div class='child'>我固定了吗?</div> </div><div class='parentSibling'>原创 2020-06-15 23:22:22 · 2793 阅读 · 0 评论 -
calc()的巧妙使用
主要作用:css中计算(支持加减乘数 + - * /)例子:width:calc(100%+2rem)浏览器前缀:/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression);/*Standard */calc();浏览器兼容性:IE9+、FF4.0+、Chrome19+、Saf...原创 2018-09-12 16:28:32 · 865 阅读 · 0 评论 -
粘性定位position:sticky的应用
使用场景:模块在滚动到距离顶部的位置一定时,固定不动原理:position:fixed和position:relative的结合使用方法:{ position: -webkit-sticky; position: sticky; top: 0;} 优点:较少代码实现弹性固定场景,比如导航栏缺点:兼容性不好 CANIUSE 下的截图: ...原创 2018-10-17 11:22:00 · 1164 阅读 · 0 评论 -
纯css实现文本溢出省略号,兼容(火狐,IE9,chrome)
很多业务需求下会出现文本溢出无法显示的情况,设置为显示省略号又不兼容,兼容性只能用js实现,今天介绍一种可以直接用css实现的方法。该方法兼容各大主流浏览器,除了诡异的IE低版本实现原理:盒模型浮动原理实现代码源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2018-12-12 13:16:34 · 4517 阅读 · 0 评论 -
纯css3实现圆环占比图
圆环占比图可以用canvas实现,可以用svg实现,这里使用css3实现,兼容ie10以上,实现原理盒模型层叠,css3选装,超出隐藏实现步骤:创建5个盒模型(这里使用伪类)1,.left div 左侧圆环底部背景div2,.left:after 左侧圆环显示div3,.rightdiv 右侧圆环底部背景div4,.right:after 右侧圆环显示div...原创 2019-04-10 16:14:32 · 3951 阅读 · 0 评论 -
关于css全局作用域(:global)和局部作用域(:local)
:local(.title) { color: red;}//上面这种写法相当于.titlt{ color: red;}:global(.title) { color: green;}原创 2019-05-05 18:27:19 · 15122 阅读 · 1 评论 -
cssBFC盒模型和应用
BFC就是block formatting context的缩写,中文就是“块级格式化上下文”的意思Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。如何创建: 1. float 除了none以外的值 2. overflow 除了vi...原创 2019-05-06 18:04:30 · 107 阅读 · 0 评论