http://superwf.github.io/categories/css/ Recent content in css on 老王的日志 Hugo -- gohugo.io zh-CN Thu, 21 Mar 2019 08:54:41 +0000 http://superwf.github.io/p1452/ Thu, 21 Mar 2019 08:54:41 +0000 http://superwf.github.io/p1452/ 当flex布局时，可以在父元素用justify-content调整子元素主轴位置。 有一种情况，需要大部分元素左对齐，只有最后一个右对齐。 子元素只有align-self可以调整辅轴的自身位置，主轴位置只能靠父元素设置。 float没用，可以用position: absolute调整但效果不理想。 https://www.w3.org/TR/css-flexbox-1/#auto-margins 利用margin的auto竟然可以达到这种效果。 http://superwf.github.io/p1373/ Mon, 13 Aug 2018 05:47:28 +0000 http://superwf.github.io/p1373/ http://superwf.github.io/p1367/ Mon, 06 Aug 2018 08:34:38 +0000 http://superwf.github.io/p1367/ 今天在console里看到了这么一行提示 Intervention: WebFonts use adaptive timeouts to take fallback fonts 查了一下，是因为字体文件体积过大时，可能会造成使用该字体的元素在字体下载前后出现闪烁的问题。有学到了一个新属性font-display。按需要，指定block比较合适，因为字体图标一时也找不到什么合适的占位字体。 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display http://superwf.github.io/p1350/ Wed, 04 Jul 2018 03:47:40 +0000 http://superwf.github.io/p1350/ 最近使用antd的Affix组件，总是定位错乱，后来查到上级元素有使用动画效果的，用了transform属性，影响了position: fixed。可是去掉之后仍然会影响。最后找到上级元素还有个will-change: transform。 不光是transform会影响position: fixed，will-change指定的属性只要可能影响到fixed，也都会起作用。 http://superwf.github.io/p1256/ Tue, 28 Nov 2017 02:55:57 +0000 http://superwf.github.io/p1256/ 在调试一个拖拽组件时需要获取定位，发现在modal中，外层元素是position: fixed时，获取不到offsetParent，无法计算offsetLeft和offsetTop。 google发现确实是positino:fixed的原因。 https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null http://superwf.github.io/p1158/ Mon, 19 Dec 2016 09:14:40 +0000 http://superwf.github.io/p1158/ 首先是参考了一下sass中的写法 http://www.w3cplus.com/preprocessor/pushing-bem-to-the-next-level-with-sass-3-4.html作者在这篇文章中用mixins生成类似函数的东西来嵌套bem层次． 虽然用过sass，但最近团队用less用惯了，能不换还是最好，于是琢磨如何在less中推行bem或suit的标准．结果less中不支持自定义函数，这个我也是刚知道，通过一个less-plugin-functions可以．试了一下该插件，发现这个的函数只能放在css属性的值的部位，不能当作sass中的@content用． 后来多看了看文档，琢磨出一个less的写法． 生成的结果 http://superwf.github.io/p1154/ Mon, 12 Dec 2016 08:12:02 +0000 http://superwf.github.io/p1154/ 图中每个元素都是float: left，width: 32%; 偏偏最后一个元素就不排到右边，而且还单起了一行 debug了半天发现是里面的图的高度稍有一点点的不同，导致每个元素的高度差了一点 将每个元素的高度统一之后，就能按设计的排成两行了． http://superwf.github.io/p1128/ Wed, 15 Jun 2016 04:57:08 +0000 http://superwf.github.io/p1128/ 今天发现一个奇怪的问题 在移动端的时候，一个页面元素的font-size莫名其妙的比定义的大很多 用chrome查看生效的font-size: 16px;　但computed里的是30多px，怎么查也查不到是哪里导致的字体变化，而且该问题只发生在小屏幕中． 后来发现该元素需要定义width，可影响字体大小，但不能靠width来配置出指定大小的字体，而且也会影响实际宽度的显示． http://stackoverflow.com/questions/15261315/calculated-font-size-on-nexus-7-chrome-is-different-from-css-font-size 后来按该解决方法，为该元素添加max-height: 1000px; 该元素的计算属性与定义属性总算相等． 之后看到http://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font 这个问题叫font boosting，目前就是通过设置max-height或者meta viewport来解决． http://superwf.github.io/p1120/ Tue, 31 May 2016 03:13:30 +0000 http://superwf.github.io/p1120/ 火狐会自动向type=password的input中填充当前域名已经记录的密码， input的autocomplete=’off’，不灵 http://stackoverflow.com/questions/6487970/disable-firefoxs-auto-fill 说autocomplete=’off’要加到form上，也不灵 最后找了个方法，在需要阻止自动填充的input前面再加一个<input type=’password’ style=’display: none;’ />让火狐的自动填充填到这里好了． http://superwf.github.io/p1116/ Wed, 04 May 2016 09:25:56 +0000 http://superwf.github.io/p1116/ 最近有用到改变元素状态的情况以前都用classList.toggle，要是能用focus和blur实现就好了，可是普通元素都不支持这两个事件．今天发现了tabindex这个属性，可以为普通元素添加这两个事件，tabindex设置为-1，即可使该元素通过程序或者点击获取焦点．在react中为tabIndex=’-1′ http://superwf.github.io/p1111/ Tue, 29 Mar 2016 03:14:40 +0000 http://superwf.github.io/p1111/ 当需要动画过度一些元素，而元素的内容为动态在如，因此不能事先确定元素的宽高，但需要动画效果来过度宽高的情况下． 改用max-width和max-height，只要将这两个值设置的很大即可． 例如 <br /> p {<br /> max-height: 0;<br /> transition: max-height 1s;<br /> }<br /> p.active {<br /> transition: max-height 1s;<br /> max-height: 10000px;<br /> }<br /> http://superwf.github.io/p1109/ Mon, 28 Mar 2016 06:45:50 +0000 http://superwf.github.io/p1109/ 当两个相邻元素的样式为　width: 50%，display: inline-block; 仍然不能排列成一行，原因是因为一般编辑html时，都会缩进换行来编辑使人便于阅读 但这样的话两个元素中间的换行就会产生宽度． 推荐用jade，开发时转html时加上pretty: false的参数，反正发布时也要压缩，和发布格式越接近越好． http://superwf.github.io/p1106/ Mon, 14 Mar 2016 02:31:41 +0000 http://superwf.github.io/p1106/ user-select: none; 会禁止用户选中内容，但在safari中也会同时组织输入．所以需要把input等排除出去． *:not(input) { user-select: none; } http://superwf.github.io/p1098/ Fri, 15 Jan 2016 08:45:56 +0000 http://superwf.github.io/p1098/ 有一个footer需要设置始终在页面最下，一开始的时候总是会根据页面内容的高度自动上升．设置body height: 100%也没起作用． 后来确定了css方法如下   http://superwf.github.io/p1019/ Thu, 06 Aug 2015 03:24:15 +0000 http://superwf.github.io/p1019/ 答案如下，竟然是将居中的内容放到最右边，令我印象深刻。 http://stackoverflow.com/questions/15724700/how-make-middle-div-to-fill-space-between-floating-elements HTML `left CSS #left { width: 200px; float: left; } #middle { overflow: hidden; } #right { width: 200px; float: right; }   http://superwf.github.io/p1002/ Sun, 05 Jul 2015 11:25:00 +0000 http://superwf.github.io/p1002/ 公司没让用less，于是用的myth至少能少些一些浏览器前缀，昨天发现一个 background-image: radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95)); 只有safari中不起作用，必须写成 background-image: -webkit-radial-gradient(farthest-corner, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.95)); myth只在css的属性上加浏览器前缀，并没有在值上加，不知算不算bug 在github上提了一下不知道会不会在值上也加上前缀。 http://superwf.github.io/p999/ Tue, 30 Jun 2015 05:12:19 +0000 http://superwf.github.io/p999/ 今天遇到一个浏览器兼容问题，只在sogou浏览器里会有 比如　http://learnsemantic.com/ 在sogou里动画背景前面的按钮是点不动的，但同为webkit的chrome就没问题．而且无论如何修改z-index，也不能使按钮在背景的前端． 后来排查发现问题出在背景层的translateZ(330px)，改成translateZ(0px)，即可在sogou中正常使用． http://superwf.github.io/p82/ Wed, 25 May 2011 13:18:13 +0000 http://superwf.github.io/p82/