浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 background-color: #b3d4db; 6 } 编译之后的效果很明显,界面的布局也很合理,看起来很清晰.那么究竟这个属性是干嘛用的呢? Flex是Flexible Box的缩写,…

CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数.需要先有transform-origin定义旋转的基点可为left top center right…

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform…

最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器兼容性可以看[这里] 2.counter的作用 实际上是代替了javascript作为一种计数器工具,在css中使用.元素出现了几次就默认增加多少对应值.增加值大小还可以由自己设置. 可以想象当我们设置好一次规矩之后,以后无论添加多少标签,计数工具自动帮我们算计数,不必手动输入那些值.而且这些不必借…

border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”,通俗的说也就是使用图片作为(对象的)边框,这样一来边框的样式就不像以前那样只有实线.虚线.点状线...那样单调了,下面我们就来具体看一下应该怎样使用它. 首先我们来看一下与border-image相关的一些属性,有border-image-source.border-image-slice.bord…

可以使用css3中content功能为html元素增减内容.content需要配合 E:before和E:after使用. 废话少说,看代码和效果说明: 第一种: css代码: #div1:before { content: "你使用的浏览器属性太低."; } html代码: <div id="div1">div</div> 显示效果: 第二种: css代码: #div1:after { content:"我使用的浏览器版本不低呀.…

css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transition 属性设置元素当过渡效果,是一个复合属性,包括四个简写属性: transition-property:指定CSS属性的name,transition效果(默认值:all) transition-duration(必须):过渡效果持续时间(不指定默认为0,不会有任何效果) transition…

好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang :active :focus :hover :link :visited CSS中伪元素包括: :first-letter :first-line :before :after CSS3中明确规定伪元素用::表示,伪类用:表示,因此, CSS3中的伪类有 动态伪类 :active :focus :h…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo…

最近为了微信小程序,回忆起之前有接触过的弹性布局(display:Flex) 网上摘录的原文地址:https://www.cnblogs.com/xuyuntao/articles/6391728.html 因为一直是一个大概能用的状态,今天来系统的掌握一下这块,据说这是趋势,在移动端用的比较多一点,在PC端因为浏览器兼容性问题还是没有广泛引用.本人能力有限,如果有整理的不好的地方还请指出,我会第一时间更正. 话不多说,下面开始系统整理 先看上面的代码,解释一下意思,看你能认识多少(后面有注释)…