预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画 廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本

写给自己看的display: grid布局教程CSS TricksCSS Grid 布局完全指南

display:inline-block; /*变成行内块元素，让元素宽度自适应，不继承父元素宽度；*/

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？像素px是相对于显示器屏幕分辨率而言的。所有未经调整的浏览器都符合: 1em=16px。选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最

CSS预处理器，如Sass和Less，使得CSS代码易于组织和维护。通过提供变量、混合、循环等特性，使得CSS具有动态编写的能力，从而减少重复性工作，提高开发速度。CSS变量已经加入规范，并且获得了大多数浏览器的支持。在这篇文章中，我们将会向你展示怎么把C

写过 HTML upvote arrow，speech bubble或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。不得不说，这些 CSS Hack

css中::before和::after的区别/* ::after表示法是在CSS 3中引入的，::符号是指伪元素，:符号是指伪类.element::after { style properties } /* CSS3 语法 */同：

CSS3@media查询使用@media查询，你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重

<input type="text" id="form-name" class="g-text-entry" placeholder="请输入4-10字符" />.

实现思路：网格背景，由css3的线性渐变来实现。纸上的打孔，由圆和圆柱组成，多个打孔，可以由box-shadow的平铺来实现。

}2，app.component-en.css 代码中的样式均以 -en结尾.class-name-en {. }3，app.component.html ，通过[class]=""方式引入动态类名<div [class]=&qu

overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。}接下来制作动画效果。}接下来制作容器的动画效果，为了

相邻兄弟选择器（+）相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。

div:nth-of-type{flex-basis:80px;}效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-basis29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-web

div:nth-of-type{flex-grow:1;}div:nth-of-type{flex-grow:3;}div:nth-of-type{flex-grow:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。定义和用法

CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。CSS3 定义了两种

我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提起。这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦

作者认为以流动性网格为基础的简单双栏布局，加上若干弹性布局，这种非固定式的布局，更能接受住未来的考验。弹性设计不对浏览器的宽度作任何假设，因而能优雅地适应不论是水平式的还是竖直式的终端设备。如果只是通过弹性布局，如果是在较大窗口是没问题的，但是当分辨率降低

<p> 最近在学一部分前端，知识点很多，却没怎么系统地应用过，因而理解可能不够深吧。所以我想做点片段似的东西，不懂的再在网上搜一搜，这样可能会更有意思点，所以做了这个记录，希望自己坚持下去！<span>My todolist<