随笔分类 - CSS
摘要：一、属性选择器 1. 属性选择器 属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。
阅读全文
摘要：一、选择器类型 1、ID #id 2、class .class 3、标签 p 4、通用 * 5、属性 [type="text"] 6、伪类 ：hover 7、伪元素 ::first-line 8、子选择器、相邻选择器 二、权重计算规则 三、比较规则 1,0,0,0 > 0,99,99,99，也就是说
阅读全文
摘要：参考：http://www.zhangxinxu.com/wordpress/2011/03/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E
阅读全文
摘要：http://lesscss.cn/features/ Overview As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existi
阅读全文
摘要：demo：页面二等分 html 转载：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指
阅读全文
摘要：主要参考 http://www.jianshu.com/p/5bfc9411f58f sass基于ruby 需ruby解释器 1. 安装ruby 下载地址 https://rubyinstaller.org/downloads/ 选一个合适的版本下载并安装即可。安装中勾选第二项： 检测是否安装成功
阅读全文
摘要：1. transition动画：鼠标移上去 旋转放大 关键点-- :hover \ transform: scale(*) rotate(*deg) 2.关键帧动画： 位移动画 translateY(-100%) .box{ width: 300px; height: 300px; } .cd-re
阅读全文
摘要：css动画分两种：过渡效果transition 、关键帧动画keyframes 一、过渡效果transition 需触发一个事件（如hover、click）时，才改变其css属性。 过渡效果通常在用户将鼠标指针浮动到元素上时发生 过渡(transition)动画只能定义首尾两个状态 transiti
阅读全文
摘要：demoline01、02选一个用足够了 <style> .demo_line_01 { width: 200px;/*这指的是文字的宽度*/ padding: 0 20px 0; margin: 20px auto; line-height: 1px; border-left: 200px sol
阅读全文
摘要：转载：http://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html Triangle Up Triangle Up 1 2 3 4 5 6 7 #triangle-up { width: 0; height: 0; border-left: 50
阅读全文
摘要：现在移动端单位基本都用rem加百分比布局，能适应各种手机 垂直居中问题： https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/ 方法三 这种方法，在 content 元素外插
阅读全文
