justify content属性要点

只会在以下情况生效 如果你的flex item不是flexible的(属性设置成flex:none或flex: 0 0 auto),并且小于container的宽度 如果你的flex item是flexible的,但是因为在每个flex item上设置了max-width不能吸收所有的空余空间 以上二种情况justify-content会接管分配空余空间 »

Responsive Web Design 概述

什么是Responsive Web Deign Responsive Web Deign缩写为RWD,叫做响应式设计,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让网页在不同的设备中展现不同的设计风格。 Responsive设计特点 必须建立灵活哦的网格基础 引用的网站的图片必须是可伸缩的 不同的显示风格,需要在Media Query上设置不同的样式 缺少任何一个功能,就不能成为合格的RWD设计 流体网格 流体网格是一个简单的网格系统,这种网格设计参考了流体设计中的网格系统,将每个网格格子使用百分比单位来控制网格大小 ,随时可以根据屏幕尺寸大小做出相对应的比例缩放 弹性图片 弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放。用于适应各种网格的尺寸。 »

Media Query基本总结

Media Query 常用Media Type类型 all:所有设备 Screen:电脑显示器 Print:打印用纸或打印预览视图 Media Type引用方法 link方法 在<link>标签引用样式时,通过Link标签中的属性来指定不同的媒体类型. <link rel="stylesheet" type="text/css" »

animation属性总结

CSS3 animation CSS3的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步,可以实现复杂的效果 animation实现动画效果主要由二个部分组成 通过类型Flash动画中的关键帧来声明一个动画 在animation属性中调用关键词声明的效果,从而实现一个更为复杂的动画效果 CSS3动画属性animation animation-name:主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes规则。CSS加载时应用animation-name指定的动画,从而执行动画 animation-duration:主要用来设置动画播放所需时间,一般以秒为单位 animation-timing-function:主要用来设置动画的播放方式 animation-delay:主要用来指定动画开始时间 animation-iteration-count:主要用来指定动画播放的循环次数 animation-direction: »

CSS3 transition基本属性总结

transition属性主要包含4个属性值 transition-property:指定过度或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定过渡开始出现的延迟时间 transition-property 通过transition-property属性来指定过渡动画的CSS属性名称 none:没有指定任何样式 all:默认值,表示指定元素所有支持transition-property <single-transition-property>:指定样式 不是所有属性都可以过渡,只有属性具有一个中点值得属性才能具备过渡效果 颜色属性:通过红绿蓝和透明度组合的过渡(每个数值处理),如background-color, »