随笔分类 - css
摘要：参考： http://www.alloyteam.com/2017/05/guide-styled-components/ https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8 h
阅读全文
摘要：子绝父相 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position 利用子绝父相来实现一种比较老的居中方式：1.明确宽度；2.定位左边到容器的中间位置；3.margin-left负值来左移元素的一半，实现元素容器居中 小三角 思路很简单，就是
阅读全文
摘要：参考：http://www.cnblogs.com/dojo-lzz/p/3999013.html 元素转为BFC的条件（任意实现其一即可） 根元素 float的值不为none overflow的值不为visible display的值为inline-block、table-cell、table-c
阅读全文
摘要：参考：http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 总结特点 多个并排的table-cell始终等高。 宽度可以根据内容而自动扩展，这和inlineBlock是一样的 最大的宽度就是当前行剩下的宽度，对于这点配合
阅读全文
摘要：默认情况下（行内基线位置 = 行内元素最大高度）： 如果对这个正方形使用 vertival-align：middle。在最大高度的元素上使用负值（middle = - 50% * 元素高度），可以提升基线位置，如下： http://www.cnblogs.com/xueming/archive/20
阅读全文
摘要：When to use IMG vs. CSS background-image? img： alt和title属性可以提供好的用户体验； 可以等比例缩放； 提供更好的动画性能； 当图像属于内容的一部分：图标、图解、头像等； 打印的时候默认会引入图片 从SEO角度来看：当需要被搜索引擎来索引到的时候
阅读全文
摘要：float 特性1：可以为行内浮动元素设置宽高 运行发现，宽高设置没有生效。加上float：left后，宽高设置生效了。前后结果变化： 2.两端自适应布局 运行结果： clear 对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。 Clear给元素
阅读全文
摘要：http://www.ruanyifeng.com/blog/2017/05/css-variables.html http://mp.weixin.qq.com/s/sygT8UNvxlLc5xrDg0XfgA postcss是一个css编译工具，node、gulp、webpack下都有对应的插件
阅读全文
摘要：单行文本 多行文本+图片+任意大小的块 后面提供的3个例子中，只要把里面的#pic 的宽高去除，也是可以实现任意大小的div居中的。往里面填充任意的多行文字，也是可以居中的。 实际上，有这样的规律： 任意大小的div垂直居中 =》任意多行文字垂直居中 =》 固定大小的div垂直居中 =》图片垂直居中
阅读全文
摘要：场景： 一个非常复杂的表单页面，页面有5个标签，第五个标签中又有5个标签，也就是说一共有9个标签，每个标签中都有一个表单，表单之间相互关联、所有表单项（包括复合的），有80多个数据。全部东西写在一个html内。当电脑机器比较慢的时候，ng没启动完全时，会有短暂的页面混乱，表达式，花括号等，解决这个问
阅读全文
摘要：参考： 掘金-JS和CSS的位置对资源加载顺序的影响 起舞-什么是关键CSS 有兴趣也可以看看这里一篇关于页面加载的文章。以上掘金那篇文章说css的加载不会影响其他资源的下载，但是我测试了一下，发现是css会影响图片的加载： 另外两个css是空的css。运行结果如下： 图片总是等到第一个css下载后
阅读全文
摘要：来源：CSS Modules 用法教程 后面项目地址：https://github.com/947133297/lwj-webpack-demo 关键是打开这一行，表示开启loader的css module功能： style-loader ：用于创建style标签 css-loader：使css文件
阅读全文
摘要：传送门： Flex 布局教程：语法篇 FLex 布局在线测试 CSS3弹性伸缩布局简介 CSS box-flex属性，然后弹性盒子模型简介
阅读全文
摘要：原理 栅格系统的核心就是媒体查询。指定的尺寸都是百分比，也就是流式布局。 查看bootstrap中的源码可以发现，对样式的定义次序全都是依次 xs、sm、md、lg，如： // grid-framework.less： // Common styles for all sizes of grid c
阅读全文
摘要：js中比较多是使用UA来判断当前浏览器环境： 对于不同的ie环境测试方案，IE11自带的开发者工具： 好奇为什么就是没有6呢？ 以下代码来自360导航，不同环境下，打上不同的类 总结出几个重要的： \9 ：所有IE浏览器都支持._和- ：仅IE6支持* ：IE6、E7支持\0\9 ：IE8、IE9支
阅读全文
摘要：浏览器根据html节点生成一颗dom树，接着根据这个dom树和css生成另外一棵树：render tree。最后浏览器就根据render tree来渲染界面。 dom树和render树的区别： 前者包含了隐藏的元素（display=none），后者不包含。render树仅仅包含了需要被渲染的dom节
阅读全文
摘要：transform 所做的一系列变换，都仅仅只是这个元素的样子，元素自身所在文档流中所占用的位置不会发生变化，所以是不会影响到其他元素的位置的 2D translate：平移，这点类似于 relative+top+left 的效果 skew（x，y）：翻转，180deg 和 0deg 的效果是一致的
阅读全文
摘要：默认情况下，如果同一行中某个单词太长了，它就会被默认移动到下一行去： word break（normal | break-all | keep-all）：表示断词的方式 word wrap（normal | break-word）：表示是否要断词 word wrap break-word 【要断词】
阅读全文
浙公网安备 33010602011771号