-
CSS3:如何设置一个元素的宽度等于100% 减去50px?
我们可以使用CSS3的calc方法, 而不需要去使用IE的expression。 代码如下: div { width: 100%; width: -webkit-calc(100%…
-
CSS3常见问题:100vh在移动浏览器中不是固定的,恒定的
前言 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动。这个时候该菜单会变小,由于100vh仅在视口的可见部分计算,因此会导致所有布局都…
-
flex-basis和width之间有什么不同?
flex-direction 首先我们需要知道的是,flex-basis属性并不是总是为width。 当flex-direction为row时,flex-basis控制的是widt…
-
移动web开发中,max-width和max-device-width有什么不同
max-width 是目标显示区域的宽度,例如浏览器。 max-device-width 是设备整个显示屏幕的宽度,例如设备屏幕。 类似的还有:max-height and max…
-
用css选择器选一个不包含某属性的元素
我们可以使用:not 选择器来实现。 代码如下: input:not([type]), input[type=’text’], input[type=’password’] { /…
-
利用CSS3 columns 列模块显示两列无序列表实现两栏布局
现代浏览器 现代的浏览器可以使用Css3列模块来实现该功能。 参考文档:http://www.w3schools.com/cssref/css3_pr_columns.asp CS…
-
如何使用CSS媒体查询检测设备方向
使用CSS检测设备方向的代码如下: @media screen and (orientation:portrait) { … } @media screen and (orient…
-
CSS:z-index属性没有作用不覆盖详解
z-index 属性只作用在 position 属性值不为static上。案例代码: position: absolute;, position: relative;, or po…
-
如何使用css3动画实现旋转效果
为了使用旋转动画,你必须定义css动画帧(animation keyframes) 阅读 https://developer.mozilla.org/en-US/docs/CSS/…
-
CSS: Animation 和 Transition对比
Animation和Transition在什么时候使用是新手常见的问题。?Transition是动画的一种,但是大多数执行在两个状态发生变化的时候,即开始状态和结束状态。另外特别重…