随笔分类 - css
摘要：一些CSS不经常用就会忘记，好吧，现在整理再学习一下，也留做备忘，方便以后查看。。。 perspective的理解: 1、数值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻（比如看电影，越前面的人屏幕越大） 2、数值大，用户与3D空间Z平面距离越远，视觉效果就很小 3、数值无穷大 | 为
阅读全文
摘要：CSS优先级（从低到高）： 1、* 2、元素（div）| 伪元素 3、class | 属性 | 伪类 4、id 5、行内<style...> 6、!important 注： 当权重相同的时候，后定义的生效 :not没有权重 css选择器的效率(从右到左的原则) 1、id选择器(#content) 2
阅读全文
摘要：伸缩项目的父元素: display:flex || display:inline-flex fiex-direction: row(默认) | row-reverse | column | column-reverse flex-wrap : nowrap(默认) | wrap | wrap-rev
阅读全文
摘要：css3图片与文字3D transform切换: http://www.w3cplus.com/demo/419.html详细的CSS3属性详解： http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-...
阅读全文
摘要：深入了解 Flexbox 伸缩盒模型http://www.w3cplus.com/blog/666.html
阅读全文
摘要：display:inline-block与text-align:justify配合实现两端对齐http://www.zhangxinxu.com/wordpress/2011/03/displayinline-blocktext-alignjustify%E4%B8%8B%E5%88%97%E8%A...
阅读全文
摘要：background-clip:border-box(默认)、padding-box、content-box background-origin:border-box、padding-box(默认)、content-box 背景色是从border开始到border结束,如图： 背景图片是从paddi
阅读全文
摘要：http://www.w3cplus.com/content/css3-animation@-webkit-keyframes 'test' { 0% {} 50% {} 100% {}}-webkit-animation:'test' 2s linear 1s infinite alternate...
阅读全文
摘要：transform是变形,下面有translatetransform: rotate旋转/scale缩放/skew扭曲/translate移动/matrix矩阵变形transform连写:rotate scale skew translate translate移动，transform:transl...
阅读全文
摘要：http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page方法一：结构如下： 头部 内容区 尾部 CSS注意事项： 1、html,body设置height:100%;清除margin和padding 2、box，相对定位，min-height:100%， 考虑到兼容性，如下设置： /*标准浏览器*/ min-height:100%; height:auto!important; /*IE6*/ height:100%; 2、尾部，因为是在最下...
阅读全文
摘要：解释：Resets解决不同浏览器对HTML元素的默认CSS设置的差异。CSS normalization则与CSS Resets不同，为了页面具有相同的表现，CSS Resets对大多元素的样式进行了复位操作，而normalize.css则在保留原有表现的基础上进行值的重设并修复一些Bug。下载地址：http://necolas.github.io/normalize.css/reset.csshttp://shawphy.com/2009/03/my-own-reset-css.html
阅读全文
摘要：http://jsfiddle.net/joya0411/S8N2j/3/embedded/result/word-wrap:normal(默认)/break-word;希望超长英文/网址，在下一行显示，显示不下折行，使用：word-wrap:break-word;word-break:normal(默认)/break-all/keep-all(chrome不支持)希望超长英文/网址，立即折行显示(全部显示在容器内)，使用: word-break:break-all; ＝>不利用阅读超长文本/英文/网址,遇到'-/空格'才折行显示，否则在一行显示，keep-allwhit
阅读全文
摘要：meta标签宽度＝设备宽度，初始比例＝1，阻止放大，最小比例＝1，最大比例＝1；target-densityDpi=device-dpi 阻止缩放（有时user-scalable=no没有效果，需要加上这句）使用rem * IE9开始支持 * IOS4.0开始支持 * 安卓支持Android2...
阅读全文
摘要：-webkit-overflow-scrolling:touch;下拉滚动回弹
阅读全文
摘要：/*Webkit,Opera9.5+,IE9+*/::selection {background:red;color:white;}/*Firefox*/::-moz-selection {background:red;color:white;} 文章来源：http://www.w3cplus.com/content/css-selection
阅读全文
摘要：overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline;jquery写法：$(".figcaption").each(function(i){ var divH = $(this).height(); var $p = $("p", $(t...
阅读全文
摘要：参考文章：http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/总结：display:inline-block：1、不规则的高度2、vertical-align:topfloat:left：1、高度相等，如果不相等，第二行的第一个元素会排到最高元素的右侧。
阅读全文
摘要：1、使用有语义的标签2、IMG标签中加上alt3、a标签中加上title4、meta中使用5、无障碍role的使用
阅读全文
摘要：文章来源：http://www.w3cplus.com/css/create-css-browers-hacks条件注释：http://www.w3cplus.com/create-an-ie-only-stylesheet条件注释：lt低于，lte低于等于，gt高于，gte高于等于常用Hack写法：IE6:div { _width:100px; }*html div { width:100px;}IE7:div{ +width:100px;}*+html div { width:100px;}*:first-child+html { width:100px; }IE6和...
阅读全文
摘要：方法一：单行文字height:50px;line-height:50px;text-align:center;方法二：绝对定位父元素{ position:relative; }子元素{ position:absolute; left:50%; top:50%; width:value; ...
阅读全文
浙公网安备 33010602011771号