随笔分类 - css
摘要：-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
阅读全文
摘要：(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function()
阅读全文
摘要：划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 image 要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star 仅居中元素定宽高适用 absolut
阅读全文
摘要：flex属性是 flex-grow + flex-shrink + flex-basis 的缩写。 1.赋给3个值.item { flex: 100 200 300px;}// 等价于.item { flex-grow: 100; flex-shrink: 200; flex-basis: 300p
阅读全文
摘要：绝对定位元素根据元素宽度自适应自身宽度 最近在做这样一个下拉框， 如果只设置绝对定位，宽度写100%的话，会遵循父级宽度的100%，但是文字实际上不够宽度，那么如果想根据子元素的宽度自适应，实现下图的效果，就需要加下面的样式。 .mp3-info-status { position: relativ
阅读全文
摘要：近在做一个产品列表页面，布局如右图所示。页面中有若干个 item，其中每个 item 都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。 item 元素的 CSS 定义如下： .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到的一个需求
阅读全文
摘要：场景： 最左边这栏我不行让他换行，怎么办呢？ 下面是解决办法： [plain] view plain copy table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%
阅读全文
摘要：目前，文字信息仍是网站最主要的内容，随着CSS3技术的不断成熟，Web字体逐渐成为话题，这项让未来Web更加丰富多彩的技术拥有多种实现方案，其中之一是通过@font-face属性在网页中嵌入自定义字体，主流的浏览器都支持这项技术，本文介绍主要的几种Web字体格式及字体格式转换。 Web字体格式介绍
阅读全文
摘要：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）要求不用JS或CSS行为实现；仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事：左边固定，右边自...
阅读全文
摘要：反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？要实现这种布局，也算比较简单。我们先给出html结构...
阅读全文
摘要：尽管在项目中测试人员已经慢慢淡化了IE6的测试，但是IE7依然还是要纳入测试范围。最近碰到一个IE7的蛋疼bug，在页面上设置了一个局部的滚动区域，在拖动滚动条的时候，滚动区域内设置了相对定位或绝对定位的元素不随滚动条移动位置。蛋碎了一地...在网上查了下看看大家都是怎么破这个问题的，发现这个问题居...
阅读全文
摘要：有很多提供动态创建 style 节点的方法，但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style 节点，我搞了2个小时。静态外部 css 文件语法：@import url(style.css);动态外部 css 文件加载的方法有如下：第一种：var style = ...
阅读全文
摘要：css多栏自适应布局还是需要总结一下的，都是基本功。一般使用position属性布局，或者用float属性布局，也可以使用display属性。看资料说position适合首页布局，因为首页内容往往可以完全控制。float适合模板布局，模板中填充的内容无法控制。一、左侧尺寸固定右侧自适应1、浮动实现在...
阅读全文
摘要：Afloatedboxisshiftedtotheleftorrightuntilitsouteredgetouchesthecontainingblockedgeortheouteredgeofanotherfloat.Ifthere'salinebox,thetopofthefloatedbox...
阅读全文
摘要：由于最近在做公司移动项目的重构，因为要实现响应式的开发，所以大量使用到了rem的单位，觉得这个单位有点意思。但是现在貌似用他的人很少。上一篇文章我分享了淘宝写的一篇rem的介绍，介绍的非常全面，但是他们似乎都把关注点放在了字体单位上了，其实rem不只是能应用到字体上面，还可以应用到长度和宽度上面，接...
阅读全文
摘要：有段时间一直折腾移动端页面弹性滚动的各种问题，做了点研究，今天做个小分享~传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的...
阅读全文
摘要：填写账户名 验证身份 设置新密码 完成 less:.ui-step(@num){ .ui-step{ position: relative; overflow: ...
阅读全文
摘要：剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了，这两者还是有区别的。区别主要在于这几方面：他们能做的东西，不同的语法，涉及到的不同技术，是新的还是旧的，以及浏览器支持的差异。但不幸的是总是有相当多的过时信息在那儿，所以一起来看看能否解决这个问题。剪裁和遮罩之间的区别遮罩使用的是图像，剪...
阅读全文
摘要：一、什么是双边距Bug？先来看图：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：以下为引用的内容：.floatbox {float: ...
阅读全文
摘要：禁用ie9滤镜:root .concentration .left .content ul li .fc,:root .concentration .left .content ul li .try-btn {filter:none;}background:rgba(255, 155, 37, 0....
阅读全文
浙公网安备 33010602011771号