随笔分类 - HTML / CSS
notes for html & css
摘要：1、匹配以某字符串开头的 ID div: [id^= "item-" ] { color: red; } <div id="item-op"></div> 可匹配到 div 中 id为 item- 开头的元素 2、匹配以某字符串结尾的类名 div[class$="-btn"]:active { op
阅读全文
摘要：在 JSX 中可以通过 onClick 这样的方式给一个元素添加一个事件处理函数，当然，在 HTML 中也可以用 onclick (小写 c)，但在 HTML 中直接书写 onclick 一直就是为人垢病的写法，网页应用开发界一直倡导的是用 jQuery 的方法添加事件处理函数，直接写 onclic
阅读全文
摘要：###一、实现从右往左输入 实现代码： input { direction: rtl; } ###二、实现反向倒序输入 实现代码： input { direction: rtl; unicode-bidi: bidi-override; }
阅读全文
摘要：###一、input 实现代码： <input onfocus="this.select()"> ###二、textarea 实现代码： <textarea onfocus="this.select()">
阅读全文
摘要：###一、单行省略号 实现代码： <div class="text-container">AAAAAAAAAAAAAAAAAAAAAAAAA</div> .text-container { width: 100px; white-space: nowrap; overflow: hidden; te
阅读全文
摘要：###一、下拉实心尖角标 实现代码： <div class="angle" /> .angle { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; bord
阅读全文
摘要：实现效果： 1、用 float 实现 .html： <h3 class="title float-title"> <span class="title-main">Main Title Here</span> <span class="title-note">This subtitle is fl
阅读全文
摘要：实现效果： .html： <div class="filename"> <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span> <span class="filename__ext
阅读全文
摘要：指针锁定 Pointer Lock API 通过它可以访问原始的鼠标运动（基于指针的相对位移 movementX / movementY），把鼠标事件的目标锁定到一个特定的元素，同时隐藏视图中的指针光标（可通过 ESC 显示），并且可以消除鼠标在一个方向上移动的边界限制。 这个 API 对于需要大量
阅读全文
摘要：一、移动端 Mint Cube MUI Vant Vux Muse-ui 二、PC 端 Element UI iView Layui Ant Design Bootstrap vuetify 三、FrameWorks Flutter Taro Framework7
阅读全文
摘要：一、JPG 有损压缩，压缩率高 不支持透明 适用于不需要透明图片的业务场景 二、PNG 支持透明 浏览器兼容性好 适用于需要透明图片的业务场景 三、SVG 矢量图，代码内嵌，相对较小 适用于图片样式相对简单的场景 四、WEBP 压缩程度好 但在 ios webview 有兼容性问题 适用于安卓
阅读全文
摘要：一、png8 256 色 支持透明 png8 包括索引色透明和 Alpha 透明： 索引色透明只能指定一个像素点是否为透明 Alpha 透明则可指定一个像素点的透明度 二、png24 2^24 色 不支持透明 png24 不支持透明度设定，但可用的颜色比 png8 丰富 三、png32 2^24 色
阅读全文
摘要：样式的导入方式 link @import link @import 一、link 的使用 二、@import 的使用 三、link 和 @import 的区别 1、引入的内容不同 link 除了引用样式文件，还可以引用图片等资源文件，而 @import 只引用样式文件 2、加载顺序不同 link 引
阅读全文
摘要：一、DOM 事件模型 DOM 事件模型包括捕获和冒泡，捕获是从上往下到达目标元素，冒泡是从当前元素，也就是目标元素往上到 window 二、流 流的概念，在现今的 JavaScript 中随处可见。比如说 React 中的单向数据流，Node 中的流，还有 DOM 事件流，都是流的一种生动体现。至于
阅读全文
摘要：一、什么是 iframe iframe 用于在页面内显示页面，使用 <iframe> 会创建包含另外一个文档的内联框架（即行内框架） <iframe src="URL"></iframe> 二、iframe 的常用属性 1、width 定义 iframe 的宽度 2、height 定义 iframe
阅读全文
摘要：WebSocket 是 HTML5 新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。 为什么传统的 HTTP 协议不能做到 WebSocket 实现的功能？这是因为 HTTP 协议是一个请求－响应协议，请求必须先由浏览器发给服务
阅读全文
摘要：一、relative 与 absolute 定位的依据 1、relative 依据自身定位 2、absolute 向上查找最近一层的定位元素定位（即relative、fixed和absolute）作为依据进行定位，如果没定位元素则依据body定位 二、居中对齐的方式 1、水平居中 （1）通过 tex
阅读全文
摘要：实现效果： .html： <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> .css： .container { width: 100px
阅读全文
摘要：/* 手写一个clear fix */ .clearfix:after { content: ""; display: block; clear: both; } /* 兼容 IE 低版本 */ .clearfix { *zoom: 1; } 清除浮动本质上是要消除浮动元素带来的一些影响（例如高度塌
阅读全文
摘要：一、实现“左右定宽，中间自适应”三栏效果的5种方式 基本 DOM 结构： <article class="container"> <div class="left">this is left</div> <div class="center">this is center this is cente
阅读全文
浙公网安备 33010602011771号