css3
starwmx520
这个作者很懒,什么都没留下…
展开
-
css3 多列显示属性column
column可以实现文字排版的多列显示。column-count:3; 显示的列数,会自动平分三列,宽度一样column-gap:30px;设置列间的间距,三列话会有两个间距。column-rule:4px solid #f00;设置间距中间的线,线会显示在间距的正中间,间距中包含线。不会因为线宽而改变实际的间距。column-width:200px;设原创 2015-10-16 18:31:42 · 715 阅读 · 0 评论 -
css 常用总结
1、字体font-family: STHeitiSC-Light, 'Helvetica Neue', Roboto, 'microsoft yahei', Arial;life.html5.qq.comAvenir, "Hiragino Sans GB", "Noto Sans S Chinese", "Microsoft Yahei", "Microsoft Sans原创 2016-01-14 17:16:22 · 360 阅读 · 0 评论 -
css3 flex
以前用的是box,最新的是flexdisplay:flex。display:flex 应用于子集flex:num 设置元素分配的比例flex-grow:num 分配剩余空间此元素分配的比例flex-direction:主轴显示方向 row 默认从左到右 row-reverse 从右到左 column 从向向下 column-reverse 从下向上 flex-wrap:设置原创 2016-03-09 18:25:46 · 343 阅读 · 0 评论 -
css 常用技巧
1、禁止用户选中文字 -webkit-user-select:none2、原创 2016-01-08 13:59:14 · 299 阅读 · 0 评论 -
css 边框箭头和三角形写法
border边框线的样式并不是长方形的如上边线放大是一个四边形下窄上宽的,其他边线也是一样的。这样呢,当宽高都为0时,并显示为块时,样子如下。中心到四边是四边框的宽四边一样边框会显示正三角形。上边三角形指向下,下边三角形指向上。正好是相反的指向。改变边框宽显示会不一样当把上下边框设置为透明左边框有颜色,左边框会是一个右箭头当把上下边框设置为透明右边框有颜原创 2015-12-07 17:10:02 · 2714 阅读 · 0 评论 -
css3 新属性
1、box-sizing有三个值:content-box 默认值,order padding不计算在width内padding-box padding计算在width内border-box padding border计算在width内 是怪异模式ie8+支持content-box border-box如在bootstrap里会在*上设置为怪异模式,会隐藏原创 2015-12-21 11:17:04 · 372 阅读 · 0 评论 -
css3 中的尺寸单位
1、em它是我们常用的,经常用在字的大小上。它是大小是相对于父级的大小。1em=父级px2、百分比指的是相对于父级的,在定义标签的width时会用3、rem它是em的增强版,ie9+它相对于根html来设置大小。不会像em,依赖于父级大小。一般都是:html{font-size:62.5%}原因:页面默认的大小是16px;但这样我想要12px时就应该原创 2015-12-21 16:39:08 · 1298 阅读 · 0 评论 -
css3 中transition监听事件
开始动画监听内可以触发其他的动画和业务事件结束监听最有用,如当动画执行完后需要隐藏none这个标签$(function(){//transitoin 只支持transitoinend事件 $(".box1").on('click',function(){$(this).toggleClass('current')}).on('transitionend',funct原创 2016-01-18 15:44:18 · 4823 阅读 · 0 评论 -
css3 动画中display none
在写移动开发时经常会遇到弹出层动画。默认它是隐藏的none的。但是在这个基础上加动画就麻烦了。可以把动画写在一个类内,另一个是none类。默认两个都引用显示时先把none去掉,再去掉动画的那个类,动画类可以在requestAnimationFrame函数内执行隐藏时先添加 上动画,在transitionend回调里添加上none类.box{ background: go原创 2016-01-18 15:43:08 · 5155 阅读 · 0 评论 -
css 选择器
1、选择某元素后的第一个元素,且二者在相同父级下.div_1 > span + p{color:#ccc;}//选择div 子下的span 的同级下一个p的样式如有多个span,会应用到多个span后的第一个p2、选择子元素.div_1 >span{color:red;}会应用div下的子元素内的所有span 和div span区别在于此会应用div下所有span样原创 2016-01-15 18:12:42 · 256 阅读 · 0 评论 -
css3 @media 用法
今天在做一个ipad min 上运行app程序浏览web页面时,发现了不兼容问题。以前在写配置时都是用(device-height:568px)这样的来写 iphone 4 5 6 6plus现在要写一个范围内的配置,也是语法有些绕max-height:450px 当height 小于450时应用样式。可能会有些无语,我写的是max大于450为什么应用时是小于450呢。转载 2015-11-12 17:17:56 · 706 阅读 · 0 评论 -
flex兼容性写法
.box{height:200px;display:-moz-box;display: -webkit-box;display: box;-webkit-box-direction:reverse;/*子元素的显示方向 */-webkit-box-orient:horizontal ;/*子元素水平或垂直排列*/}.item{-webkit-box-flex:1;-原创 2015-11-11 18:13:30 · 2303 阅读 · 0 评论 -
rem 通常用法
html{font-size:62.5%;}body{font-size:1.2rem;}p{font-size: 2rem;}@media (max-width: 32rem) { p{background: #ccc;} html{font-size:10px;}}@media (max-width: 37.5rem) { p{background: #333;原创 2016-10-24 18:42:42 · 428 阅读 · 0 评论