随笔分类 - CSS
css/css3
摘要：.flex-container{ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-fle...
阅读全文
摘要：1.使用媒体查询来适应不同视口的固定宽度设计，例如bootstrap的container类。2.将固定像素布局转换成灵活的百分比布局，才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式。3.目标元素宽度 / 上下文元素宽度 = 百分比宽度4.响应式的文字，使用百分比和em，em的实际大小是...
阅读全文
摘要：box-flex的写法比flex的写法要复杂一些，兼容性的前缀要多带几个，真希望有一天flex布局能够纳入w3c标准啊！ box-orient, box-direction, box-align, box-pack, box-lines box-orientbox-orient用来确定子元素的方向。
阅读全文
摘要：Flexible Box是什么？Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。浏览器兼容性作为非常现实的开发者，是否对一个新技...
阅读全文
摘要：在这篇文章里，我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式。事情是这样的，您的设计师团队向您发送一个新的PSD（Photoshop文档），它是一个新的网站的最终设计。一切看起来很好，很正常，直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同！你说：“这没办法...
阅读全文
摘要：很久以前，我们如何使用图标？1.切图2.拼合（Sprites）原始社会啊！后来CSSGagagrunt-css-sprite字体图标相见不曾相识Emoji绘文字iconfont.cn直接上传SVG如何使用字体@font-face { font-family: 'FontName'; src:ur...
阅读全文
摘要：关于居中，你会想到什么？div{margin: auto;}常见的居中方法水平居中.demo{ text-align: center; margin: auto; position: absolute; left: 50%; margin-left: -?px;...
阅读全文
摘要：vertical-align对一些特定显示样式（例如单元格显示方式：table-cell）的元素才会起作用。div{display:table-cell; vertical-align:middle;}vertical-align只对行内元素有效，对块级元素无效。语法：vertical-align:...
阅读全文
摘要：在CSS属性能中，我们常常能看到-webkit-，-moz-之类的前缀，这种就叫做浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持。-webkit-是webkit内核的，-moz-是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。 为什么要有私有前缀呢？因为...
阅读全文
摘要：html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}该属性的作用是在iPhone 横屏时默认会放大文字。iPhone 和 Android 的浏览器纵向 (Portr...
阅读全文
摘要：CSS预处理器有很多，最早的是2006年的Less，到后来2010年的SASS，还有现在也很出名的Stylus。不过要使用它们都要使用一些工具，比如Less的话要使用Grunt或者Gulp或者Node.js，SASS要用Ruby的环境来编译。我个人对工具依赖性太强的东西并无好感，我还是喜欢只要给我一...
阅读全文
摘要：伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中，a:hover必...
阅读全文
摘要：重新撸一遍CSS的基础，因为以前面试的时候被问到，突然发现某些概念搞不清楚，瞬间懵逼了，其实我都知道的，就是因为不会炒概念，导致面试官觉得我很low，你特么连这个都不知道还敢来面试，回家种田去好嘛！样式分类1.行内样式/行间样式虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性...
阅读全文
摘要：Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。媒体查询有两种玩法，第一种，直接在link中判断设备的尺寸，然后引用不同的css文件意思是当屏幕的宽度大于等于500px的...
阅读全文
摘要：我想让鼠标放在div上就让它旋转变大，离开div后它又恢复本来的样子。于是我就想写一个JS，监听一个hover事件，当hover发生的时候，触发一个计时器，在计时器里写两个值，一个管角度，一个管宽度，随着时间的变化逐渐增加，不断地重写div的style。当达到我期望的limit的值后让它停止（或者干...
阅读全文
摘要：2D旋转先给个容器2D 旋转再给个样式（乱写的，可随意修改。）.animated_div{width:60px; height:40px; color:#ffffff; position:relative; font-weight:bold; padding:20px 10px 0px 10px; ...
阅读全文
摘要：一. Webkit浏览器.xSelector{background:-webkit-gradient(linear, 0 0, 100% 100%, from(#FF82AB), to(#FFA07A));}第一个参数：表示的是渐变的类型第二个参数：分别对应x，y方向渐变的起始位置第三个参数：分别对...
阅读全文
摘要：1.圆角矩形.border_radius_test{border-radius:25px;-moz-border-radius:25px;}数值越大越圆2.容器阴影.box_shadow_test{box-shadow:1px 1px 20px #888888; -moz-box-shadow: 1...
阅读全文