随笔分类 - HTML/CSS
摘要：属性 stroke-width SVG具有stroke-width定义笔触宽度的CSS属性。 <svg width="500" height="120"> <circle cx="50" cy="50" r="25" style="stroke: #000066; fill: none;stroke
阅读全文
摘要：先看个示例 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>svg-viewbox</title> <style> body { text-align: center; } svg { margin-top: 100
阅读全文
摘要：方式一 <style> .border { width: 200px; height: 200px; position: relative; } .border::before { content: ""; position: absolute; left:0; top: 0; width: 200
阅读全文
摘要：一般场景 我们看下，我们在高清显示屏下，实现这样一个内容，里面填充颜色及文字。第一种是用普通div元素的方式绘制，第二种就是用canvas的方式来绘制，示例效果如下： 从图上我们可以看出，普通div的绘制方式是清晰的，但是用canvas的绘制方式是模糊的。 参考示例代码如下： css代码： html
阅读全文
摘要：前言 先看一个例子，html代码如下： <ul> <li>1</li> <li>2</li> <li>3</li> </ul> CSS样式如下： html,body,ul,li { padding: 0; margin: 0; } ul { display: flex; list-style: no
阅读全文
摘要：使用canvas rotate实现一个旋转的矩形，并且以矩形的中心为原点，围绕原点旋转： <canvas id="canvas" width="800" height="400"></canvas> <script type="text/javascript"> var canvas = docum
阅读全文
摘要：前提知识 canvas是提供了各种各样的接口去控制画布，比如旋转rotate方法。 这里的旋转并不是真的把这个画布旋转了，例如ctx.rotate(90 * Math.PI / 180)顺时针旋转90°了，并不是说我们在页面上就会看到canvas旋转了90°。我们可以理解为其实canvas是有两个部
阅读全文
摘要：CSS3中的background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。 语法如下： background-clip ： border-box || padding-box || content-box 取值说明： border-box:此值为默认值，
阅读全文
摘要：Pointer Events API 是Hmtl5的事件规范之一，它主要目的是用来将鼠标（Mouse）、触摸（touch)和触控笔（pen）三种事件整合为统一的API。 Pointer Event Pointer指可以在屏幕上反馈一个指定坐标的输入设备。Pointer Event事件和Touch E
阅读全文
摘要：HTML元素属性分类 全局属性和局部属性 属性可以分为两类：全局属性和局部属性。 其中全部元素都能使用的通用属性称为全局属性。只能运用在某些特定元素的属性，称为局部属性，例如form的action属性、textarea的rows属性等。 全局属性可简单分为5种，如下： HTML4原有的全局属性acc
阅读全文
摘要：为了能在HTML文档中正确显示某些特殊字符，就需要使用HTML实体（entity）。HTML实体就是对当前文档的编码方式不能包含的字符，提供一种转义表示。 HTML实体定义 1.名称方式 名称方式会以“&”开头，然后紧跟由英文字母组成的名称（下面格式中的name）,最后以分号结尾。注意，这种方式对大
阅读全文
摘要：css单位我们常用的是px,也即是像素。随着网页开发自适应的要求，css3新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等。 em 做前端的应该对em不陌生，不是什么罕见的单位，是相对单位，参考物是父元素的font-size，具有继承的特点。如果字体大小是16px（浏览器的默认值
阅读全文
摘要：阅读过几篇关于 px rem 的文章，感觉 rem 很强大。但是自己接触到的公司项目全部都使用 px，想知道为什么。是我司技术更新落后了吗？ 我们当然有在用 vw 和 vh，但是只是在 layout 层级，组件层使用 px。 人数赞同最多的回答 先抛出观点： 本文建议读者不要使用flexible或者
阅读全文
摘要：ruby标签实现给汉字加拼音 ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。 <ruby> 、<rt>、<rp> 标签一同使用，代码如下： <ruby> 这是一个汉字 <rp>(z
阅读全文
摘要：clip-path介绍 clip-path 直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的： clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪
阅读全文
摘要：首先设置meta属性，如下代码： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 使用如下代码就能实现移动端的适配： html { font
阅读全文
摘要：webSocket是什么 webSocket是HTML5新出的一种协议，底层是基于TCP/IP协议的。跟http没有关系，只是复用了http握手通道，用来升级协议。 webSocket的作用 轮询：客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步。缺点： 浏览器需
阅读全文
摘要：常用Grid布局属性介绍 下面从一个简单Grid布局例子说起。 CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。 下面是一个 wrapper 元素，内部包含6个 i
阅读全文
摘要：基本代码 html代码： 首先定义一些基本的样式和动画： background-size: auto 100%; 这段代码的意思是让图片的高等于容器的高，并且水平方向自动，即图片最左边贴着容器左侧。 执行动画的流程是：周而复始、往复交替、线性并且时间周期是10s。 手动控制动画执行 现在我们实现当鼠
阅读全文
摘要：下面代码只是实现了上下滑动惯性，没有写水平滑动惯性。（临时代码笔记，可能会在以后的过程中不断更新优化代码） 注：当滑动到页面底部的时候才触发touchmove事件。 调用方式： 参考地址： 移动端拖动惯性 原生移动端滑动js
阅读全文
