css绘制场景应用
css绘制场景应用1、三角形利用border属性，将border可视化，发现它并不是矩形组成的： 1234567div { width: 100px; height: 100px; background-color: rgb(70, 23, 114); border: 100px solid; border-color: aqua rebeccapurpl
定位与浮动
定位与浮动1、清除浮动浮动是什么 浮动float是一种css属性，将元素从正常的文档流取出，并将元素向容器的左侧或者右侧移动，使得其他元素（文本或者内联元素）围绕它排列。浮动元素碰到包含它的边框或者其他浮动元素的边框就会停留。 1、脱离正常文档流，占据一块区域。 2、其他元素产生环绕效果。 为什么要清除浮动 因为浮动元素不参与父容器的高度计算，如果容器只有浮动元素，父容器可能出现高度为0的情况，
页面布局
页面布局 1、常见的CSS布局单位像素、百分比、em、rem、vw/vh 像素 px css像素：在css中，px是逻辑像素，是一个抽象的单位，区别于屏幕上的物理像素。一个css像素不总是对应一个物理像素，例如在高分辨率显示器上，可能多个物理像素代表一个css像素。 物理像素：显示器上的实际的显示单元数量。如果显示器的分辨率是1920x1080，代表横向有1920个物理像素，纵向有10
CSS知识点（三）
CSS知识点（三） 1、CSS预处理器是什么是扩展css功能的工具，允许开发者使用类似编程语言的语法（变量、嵌套、函数、混入、运算等）编写样式代码。预处理器会将这种扩展语法的代码编译成标准的css代码，然后在浏览器中正常使用。 常见的css预处理器 Sass / SCSS 、Less、Stylus。 为什么要用 提高代码的可维护性：使用变量和混入可以减少重复代码，使得样式的维护和修改
CSS知识点（二）
CSS知识点（二） 1、对盒模型的理解每个 HTML 元素都被看作一个矩形的盒子，该盒子主要由以下四个部分组成： 内容content、内边距padding、边框border、外边距margin。 标准盒子模型（W3C盒模型、content-box） 通过css设置的宽高只是内容区域的宽高。 IE盒子模型（怪异盒模型、border-box） 通过css设置的宽高包含了内容、内边距、边框。 1
CSS知识点（一）
CSS知识点（一） 1、CSS选择器 基本选择器 元素选择器（直接使用HTML元素） 123p { color: blue;} 类选择器（使用 . 加上类名) 123.container{ margin: 0 auto;} ID选择器（使用 # 加上ID名） 123#header{ background-color
ServiceWorker
Service Worker 一、概述Service Worker 是一种在浏览器后台运行的脚本，与网页（主线程）完全分离。运行在独立线程中，不直接操作 DOM，而是通过事件机制与页面进行通信。它要求在 HTTPS 环境下运行（或 localhost 环境下开发）。 其主要作用包括： 拦截网络请求：通过监听 fetch 事件，Service Worker 能够捕获页面的网络请求，返回缓存内容或自定
ApplicationCache
应用缓存(Application Cache) 一、需求来源在 HTML5 出现之前，Web 应用主要依赖 Cookie 或服务器端技术来实现部分离线功能，但这两种方式都有明显的局限性（如容量小、同步性差等）。应用缓存旨在解决离线运行问题，使得用户即使在没有网络连接的情况下也能访问预先缓存好的静态资源，提升用户体验。 二、工作原理 清单文件（manifest file） 应用缓存的核心在于一个纯文
