CSS优先级
CSS优先级当样式表比较复杂时，很容易出现多个样式对作用于一个标签的情况，这时就需要注意CSS优先级来决定哪些样式会被作用于该标签，哪些会被覆盖。
选择器的优先级对于标签自有的属性，选择器的优先级规则为:
1内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
当如下几个选择器作用于同一个标签时本例显示的颜色为red，可以在浏览器的Elements选中相应元素，在Styles查看样式的覆盖情况并调试。
12345678910111213141516<div id="i1" class=&qu ...
CSS选择器
CSS选择器使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
id选择器1234567<div id="s1">id选择器</div><style type="text/css"> #s1 { color: red; }</style>
类选择器1234567891011121314<div class="s2">类选择器1</di ...
CSS3新特性
CSS3新特性CSS3是最新的CSS标准，旨在扩展CSS2.1。
圆角通过border-radius属性可以给任何元素制作圆角。
border-radius: 所有四个边角border-*-*-radius属性的缩写。
border-top-left-radius: 定义了左上角的弧度。
border-top-right-radius: 定义了右上角的弧度。
border-bottom-right-radius: 定义了右下角的弧度。
border-bottom-left-radius: 定义了左下角的弧度。
123456789<div id="t1">&l ...
伪类伪元素
CSS伪类与伪元素CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
伪类伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
状态性伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现 ...
CSS常用单位
CSS常用单位CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax，按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。
绝对长度单位px 像素通常而言，一个CSS像素代表屏幕设备的一个像素点，但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素，也就是说有多个屏幕像素点来表示1px，1px = 1in / 96。
1234567891011121314<style type="text/css"> div{ height: 30px; ...
垂直居中
垂直居中首先将<html>与<body>的高度设置为100%(为演示父元素不定宽高的效果)，并清除<body>的默认样式。
1234html,body{ margin: 0; height: 100%;}
垂直居中大致分为两类，父元素定宽高与父元素不定宽高，将两类样式以及子容器设定好。
123456789101112131415.set-parent,.dy-parent{ width: 300px; height: 200px; background: #eee; margin: 10px ...
图片懒加载
实现图片懒加载图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。
实例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<!DOCTYPE html><ht ...
默认行为及阻止
默认行为及阻止浏览器以及HTML元素提供了一些默认行为，也可以称作默认事件。
默认行为a标签点击跳转<a>标签在href存在的情况下会点击自动跳转链接或者定位锚点，通过对<a>的监听事件阻止默认行为后，点击链接不会跳转。
123456<a href="https://blog.touchczy.top" id="t1">点击跳转链接</a><script type="text/javascript"> document.getElementById("t1&q ...
图片等比缩放方案
图片等比例缩放方案在Web开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。
设定宽度或高度引入图片时，仅设置图片的width或者是height就可以使另一边自适应，从而实现等比例缩放。
123456789101112<section> <img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg"> <img id="t2 ...
实现消息提示组件
实现消息提示组件在浏览器页面中，通用的消息提示组件一般可以分为静态局部提示和动态全局提示，用于反馈用户需要关注的信息，使用频率较高。
实现实现消息提示组件，动态全局提示，主要使用原生JavaScript实现，实现的代码基本都作了注释。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<! ...