CSS3对media type的功能的增强就是添加了media queries功能。 Media Queries概念引入解决的问题是网页在不同设备的浏览器中显示风格的多样性需求。 问题1：如果针对特定窗口尺寸来设计网页（布局，显示），那么会在其他窗口尺寸中显示该网页会产生很多问题； 问题2：如果针对不同的窗口尺寸来制作不同的网页，则需要制作的网页会变得更多，消耗更多的人力时间。 通过Media Queries则可以通过针对不同的设备特性来使用不同的样式代码；大大减少了开发 ...

http://www.zhangxinxu.com/study/201503/css3-object-fit.html 这篇博客很好的演示了object-fit的各种设置。博主有很不错的前端笔记。 The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and ot ...

css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。 参照demo案例对照下面四个容器的css样式。 以前通过百分比来做相应式开发，但对于高度100%的设置总有一些限制。有了vh是否就消除了这些限制变的更简 ...

CSS3 filter滤镜效果太强大了，不用不知道。有了它ps可以少做做了。 Filters主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。 语法 elm { filter: none | <filter-function > [ <filter-function> ]* } 其默认值是none，他不具备继承性，其中fil ...

Inline-block是否可以代替float? inline-block是display的属性值，float是属性表示浮动。所以本身是有区别的，但是在某些场景下inline-block来编排layout有更好的编写效率。而不需要如float一样去clear浮动。 在排列一系列相同功能块展示(display)布局时以前常用float这些功能块来实现自动排列展示,最后在clear浮动来确保父块的高度。使用float一般都能工作，不过不得不承认，它们用起来有时候没那么简单。不过现在用in ...

设计responsive页面时的注意点： 使用media query增加breakpoint来实现responsive. 永远以mobile设计优先。 设计组件时经常长宽使用百分比。 如果需要设置一些长宽固定数值时，使用em作为单位是个不错的选择。然后针对字体大小设置对应的em大小。以字体作为参照物。 参考文档： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ...

学习css3的作业之一，制作一个简单的图表。 这里是源码和效果图。 参考文档:https://tympanus.net/Tutorials/Animated3DBarChart/ CSS源码： @media screen and (max-width: 450px) { .sm-graph-container { font-size: 0.22em; } ...

这是学习css3动画效果的示例，动态不停旋转文字。 可以参考网址：https://tympanus.net/Tutorials/CSS3RotatingWords/index4.html 这是简单效果图截屏。 首先HTML代码如下： <section class="rw-wrapper"> <h2 class="rw-sentence"> < ...

 本文收集了CSS实现的基本形状，以及border-radius的文档解释。 border-radius中比较难理解的是由/设置的附加弧度实现椭圆型的边角。 Syntax The border-radius property is specified as: 1.one, two, three, or four <length> or <percentage> values. This is used to set a single ...

本文收集了一些css3示例网站。 这些网站有： https://1stwebdesigner.com/css-effects/ https://tympanus.net/Tutorials/SwatchBook/index5.html https://nettuts.s3.amazonaws.com/771_sticky/step5.html https://designmodo.com/demo/interactivegraph/ https://ty ...