响应式布局
响应式布局的实现响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。
媒体查询通过使用CSS媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。
使用link链接12<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="exampl ...
Position
Position定位CSS中position属性是比较常用的元素定位方案，position常用的取值有static、relative、absolute、fixed、sticky、inherit。
staticstatic属性是HTML元素的默认值，即没有定位，遵循正常的文档流对象，对于top、bottom、left、right、z-index属性的设置都被忽略。文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离 ...
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 ...