【浅谈css3长度单位rem，以及移动端布局技巧】的更多相关文章

浅谈css3长度单位rem，以及移动端布局技巧

rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是html. 例:(下面例子中的根节点是html ,它的字体大小是100px,所以根节点下面的元素所设置的rem,都是1rem=100px.)rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px <html> <head> <style&…

浅谈CSS3中display属性的Flex布局

浅谈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中display属性的flex布局

最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*flex弹性布局*/ flex-direction: column; /*排列方向默认横向,column垂直*/ } .guide-top-text{ flex: 2 } .guide-top-text image{ width: 750rpx; height: 173rpx; transform: t…

浅谈 css3 box盒子模型以及box-flex的使用

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使用以及介绍: 1.要实现水平或者垂直切分,必须先满足以下要求   i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性   ii. .panel的元素定义box-flex,来实现按比例切分.如下图:就是将…

浅谈CSS3 box-reflect 属性

今天说一下 CSS3的box-reflect属性,也就是倒影特效. 语法: box-reflect:包括3个值. 1. direction 定义方向,取值包括 above . below . left . right. above: 指定倒影在对象的上边 below: 指定倒影在对象的下边 left: 指定倒影在对象的左边 right: 指定倒影在对象的右边   2. offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定.默认为0.用长度值来定义倒影与对象之间的…

浅谈CSS3动画的凌波微步--steps()

背景 一日敲代码的我,得到一个需求:写一个10秒的倒计时. 用JavaScript定时器麻溜写完之后,恰好同事勇司机接完水.瞟了一眼,然后凑过来说,这个用CSS3也可以写,而且一行JavaScript都不用写. "一行JavaScript都不用写,纯CSS3就可以写.CSS3有这么溜的操作!" ''对呀!CSS3 animation当中有一个steps(),你上网查一下就知道了!" "涨姿势了!赶紧查阅一下!" animation-timing-funct…

浅谈CSS3 box-sizing 属性 有趣的盒模型

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高, 而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高. css如何设置两种模型 这里用到了CSS3 的属性 box-sizing(默认值:content-box) /* 标准模型 */ box-sizing:cont…

浅谈css3有意思的属性pointer-events: none；

pointer-events: none: 可以让某个元素实现类似于海市蜃楼的效果,具体理解为,你可以看的到某个元素,但是你无法摸的着.   而display:none; 是你摸不着,但是你也看不见.   pointer-events: none:摸不着,但是看得见.如果把某个元素再加上opacity:0:则可以很容易实现类似display:none:的效果(摸不着,看不见).…

浅谈APP流式分页服务端设计（转）

http://www.jianshu.com/p/13941129c826 a.cursor游标式分页 select * from table where id >cursor limit pageSize 优点: 1).能够避免数据重复/遗漏 2).limit性能不会cursor数值大小影响,性能稳定缺点: 1).适用于只是按照时间追加的方式的简单排序…

VW结合rem进行移动端布局

---恢复内容开始--- html { font-size:10vw: } div { width: 1rem; height: 1rem; } VW这个单位适合用来适应不同设备的 一个设备的宽度就为100VW 比如说屏幕375px的宽度可以写为100vw,同样的 750px的宽度也是100vw 1vw=1%屏幕 的宽度 在上述例子中我们将根元素的字体大小也就是html的字体大小设置为10vw 当设备宽度为375px时 ,html的字体大小为37.5px;  而rem这个单位是根元素的倍数,1r…