css3 自适应布局 vw,vh
1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。
- 博客
- CSS3中的transition和animation一、CSS3中的动画与JS中动画的差别 1、js使用 帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 2、在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡 3...博客
- CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比css单位我们常用的是px,也即是像素。随着网页开发自适应的要求，css3新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等。 em 做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px（浏览器的...博客
- 解决CSS3多列样式column-width布局时内容被截断、错乱一、问题 使用CSS3的column-width: auto | <length>属性时，出现排列的内容被截断，出现错位的现象。 二、原因 需要为图片容器设置高度，不然会崩掉。 三、解决方法 给需要分列的容器加上height:100%;overflow: auto;。 解决CSS3多列样式co...博客
- CSS3选择器:nth-child与:nth-of-type区别一、:nth-child 1.1 说明 :nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型。n可以是数字、关键词或公式。 注意：如果第N个子元素与选择的元素类型不同则样式无效！ 1.2 示例 <style> div>p:nth-child(2){ col...博客
- CSS3边框border-radius一、官方解释 设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数。 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下...博客
- 理解CSS3属性transition一、说明 1.1 定义和用法 transition 属性是一个简写属性，用于设置四个过渡属性： transition-property:规定设置过渡效果的CSS属性的名称。 transition-duration:规定完成过渡效果需要多少秒或毫秒。 transition-timing-func...博客
- CSS3 Flex布局（容器）一、flex-direction属性 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 <style> .box{ backg...博客
- CSS3 Flex布局（项目）一、order属性 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 二、flex-grow属性 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的...博客
- HTML5抽奖转盘-CSS3超简单版本核心思路 采用CSS3的transition（过渡效果），给定需要旋转的元素设置transform的rotate属性的结束角度，同时添加transition-timing-function来控制旋转的速率包括起始速率和结束速率，代码如下（浏览器前缀可自行添加）： #pointer { ...博客
