在不给 设置宽高时，它的默认宽度是 300px ，默认高度是 150px 。这点和 是一样的。...稍后还会说明如何设置样式（比如边框、填充色等），这里只列出矩形基础属性： x: 左上角x轴坐标 y: 左上角y轴坐标 width: 宽度 height: 高度 rx: 圆角，x轴的半径 ry: 圆角，y...="100"> 设置矩形位置 通过 x 和 y 可以设置矩形位置 <svg width="300" height="300" style="border: 1px solid...rx 的最大值是矩形宽度的一半，ry 的最大值是矩形高度的一半。 当只设置 rx 或者 ry 其中一个值时，另一个属性也会使用一样的值。...v: 这是一个小写的 v ，和大写 V 的差不多，但小写 v 是一个相对定位。 Z: 关闭当前路径，closepath 的意思。它会绘制一条直线回到当前子路径的起点。
英寸和厘米的换算： 1英寸=2.54厘米 二、分辨率 2.1 像素 像素即一个小方块，它具有特定的位置和颜色。 图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。...一张图片在屏幕上显示时，它的像素点数是规则排列的，每个像素点都有特定的位置和颜色。...5.4 svg 上面我们 border-image和 background-image都可以模拟 1px边框，但是使用的都是位图，还需要外部引入。...借助 PostCSS的 postcss-write-svg我们能直接使用 border-image和 background-image创建 svg的 1px边框： @svg border_1px {...vw(Viewport's width)： 1vw等于视觉视口的 1% vh(Viewport's height) : 1vh 为视觉视口高度的 1% vmin : vw 和 vh 中的较小值 vmax
1.viewBox 用于在实际的svg上截取一小块，放大到整个svg显示，属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。...如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。...不指定大小时，但是指定了viewBox时，svg元素的大小等于父容器的大小，viewBox按照父容器大小进行截取。 不指定大小，也没有指定viewBox，svg大小默认为300*150。...-- 105 表示相对于svg左上角的横坐标，55 表示相对于svg左上角的纵坐标，60 表示截取的视区的宽度，60 表示截取的视区的高度。...注意，描边是以路径为中心线绘制的，在上面的例子里，路径是粉红色的，描边是黑色的。如你所见，路径的每一侧都有均匀分布的描边。
如果您想要限制文本区域的大小，您可以使用最小宽度、最大宽度、最小高度和最大高度属性。但是，你应该拿起高度值，以便用户可以填补领域一个舒适的方式为自己。...图标会破坏您的界面 当您在 HTML 文档中使用 SVG 图标时，请注意设置宽度和高度属性。...如果你不这样做，你依靠你设置的宽度和高度属性在CSS你的界面将被打破。 您的CSS可能未加载，此时，图标将尝试填充所有可用空间。所以错误发生了。只需设置宽度和高度属性，即可轻松入睡。...此解决方案称为图片元素，允许定义一组图像的源路径，以便浏览器可以加载设备最合适的图像。 例如，我们可以创建 2 个源元素并定义宽度介质功能以检测垫和桌面。此外，我们将使用手机的img元素。...它代表它的孩子。它可以用于类、朗和标题属性，以标记一组连续元素常见的语义。 ⠀ 可以使用此元素的上下文：预期流量内容的位置以及作为 dl 元素的孩子。
解析： 1、:before top为0，:after bottom为0，高度height: 2px，而宽度为0，并且水平居中 2、在绝对定位的作用下，:hover改变:before、:after的宽度，...解析： 1、示例六，可以说和示例三有一点点相似之处吧，升级版 2、也是通过四个伪类，分别分布在按钮的上右下左位置，上下的伪类高度是1px，宽是100%，左右的伪类宽度是1px，高是100%，同时设置背景为线性渐变...linear-gradient 3、:hover时，上方伪类从左边-100%的位置，向左边100%的位置运动；右边伪类从上方-100%的位置，向上方100%的位置运动；下发伪类从右边-100%的位置，向右边...100%的位置运动；左边伪类从下方-100%的位置，向下方100%的位置运动。...就是设置实线和虚线的宽度。即有或者没有线段的长度。
，对应的是我们设计稿的宽度，一般是750 viewportHeight: 1334, //视窗的高度，根据750设备的宽度来置顶，一般指定1334，也可以不配置 unitPrecision...: 1, //小于或等于'1px'不转换为视窗单位，你也可以设置为你想要的值 mediaQuery: false //允许在媒体查询中转换'px' }, "postcss-viewport-units...一般是750 viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 unitPrecision: 3, ...// 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 mediaQuery: false // 允许在媒体查询中转换`px` } 1 2 ...postcss-write-svg postcss-write-svg插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
device px（设备像素）和 css px（css像素） 通常在PC端上面，我们并不需要考虑设备像素和css像素之间的差别，以目前的pc来看，1个设备像素通常等于1个css像素。...通常在没有设置宽度的情况下，所有块级元素都占用其父级宽度的100%。所以body和html元素一样宽。...那么html元素有多宽呢，默认情况下它和浏览器窗口一样宽，这也就是为什么div总是占据浏览器宽度的50%，而html元素则是受限于viewport(和viewport占据一样的宽度)，换句话说，viewport...所谓的ideal viewport则是当layout viewport等于屏幕的宽度， 如ip6，它的ideal viewport就是375px。...css像素和设备像素 在移动端中， 1个css像素并不等于1个设备像素， 而是取决于设备像素比（物理像素（设备像素）/独立像素（css像素）），像Iphone的Retina屏幕， 就有2倍屏（ip6s）
• 用法；<link rel="stylesheet,icon,image/png,shortlink,help,author,image/<em>svg</em>+xml" href="网络<em>路径</em>/相对<em>路径</em>/绝对<em>路径</em>"/...当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解，如何创建 BFC？...相对于父元素，rem相对于子元素 • vw/vh: 视图窗口单位，vw 宽度，vh 高度，还有 vmin 和 vmax 两个相关单位 20. px，em, rem 的区别以及使用场景？...• 1px 问题的本质：在一些 Retina 屏幕上，移动端页面的 1px 会变得很粗，所呈现出来不止是 1px 的效果，原因就是 CSS 中的 1px 不能和移动端的 1px 划等号，他们之间是有一个比例关系...0 // left 大于等于 0 // bottom 小于等于视窗高度 // right 小于等于视窗宽度 // 代码实现 function isInViewPort(element) {
3.svg的基本使用svg是在html和css里面操作的，不是在js里面。...-- cirle（圆弧）前面第一个值是设置圆的半径，后面值是位置。实心圆--> 好了，宏哥就是觉得好玩就简单的了解和介绍了一下SVG。...9.小结 今天主要讲解和分享了一些Canvas和SVG的基础知识和应用，然后进入主题SVG的定位相关知识的讲解。有一种会者不难，难者不会的感觉。
300px) 和 高度(150px) 如果不在 canvas 上设置宽高，那 canvas 元素的默认宽度是300px，默认高度是150px。... 复制代码 canvas 的默认宽度是300px，默认高度是150px。...使用 js 获取 canvas 的宽高，此时返回的是 canvas 的默认值。 最后出现的效果如上图所示。 4、线条默认宽度和颜色 线条的默认宽度是 1px ，默认颜色是黑色。...dw 用来定义图片的宽度，dh 定义图片的高度。...sw: 截取的宽度 sh: 截取的高度 dx: 图片左上角的横坐标位置 dy: 图片左上角的纵坐标位置 dw: 图片宽度 dh: 图片高度 <canvas id="c" width="500" height
二、案例相关知识点复习 这篇案例我们是通过JS代码，判断滚动条的位置，动态添加和移除表头的固定样式（fix属性），这里就需要运用几个和位置相关 DOM API 才能顺利完成本案例，相关 API 介绍如下所示...pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。...，上，右和下分别相对浏览器视窗的位置。...如果滚动到表格区域，获取重置后的表头宽度。 接下来我们来判断第三部分内容区域距离视口顶部的高度是否大于表头的高度。...由于窗口大小并非固定，我们会经常会拖动或调整窗口的大小，因此相关元素的宽度和视口高度都要重新计算，这里我们需要添加 resize 事件进行监听，示例代码如下： window.addEventListener
自适应的椭圆 自适应宽度 关键实现：min-content关键字 具体分析：如何实现一个元素的宽度根据后代元素的最大固定元素宽度自适应呢？...绞尽脑汁，也只能利用 display: inline-block 的包裹特性实现一个不完全的版本：地址 这种方法的缺陷是文本脱离了文档流，高度未计入包含块。...滤镜的染色和褪色效果 饼图 svg 饼图的 css 实现方案非常奇怪，所以我忽略之。...stroke-dasharray: 20 10; } 当把虚线的间隔设定为大于等于圆周时，虚线的线段长度就是一个扇形区域（当线段长度等于圆周时扇区达到100%）： ?...环形路径移动的动画
video的专有属性，poster为设置视频加载完成播放前显示的图片，属性值为图片url，width为设置视频播放器的宽度，height为设置视频播放器的高度。...moveTo(float x, float y)，从当前位置移动到坐标(x,y)；lineTo(float x, float y)，从当前位置向坐标(x,y)画一条直线路径；stroke()，对当前路径中的线段或曲线进行描边...在HTML5中使用svg： ? svg标签的属性，width表示用来控制svg视图的宽度，height表示用来控制svg视图的高度，viewBox表示用来定义用户视野的位置以及大小。 13....%：% 百分比，相对长度单位，相对于父元素的百分比值 vw、vh、vmin、vmax 主要用于页面视口大小布局 vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。...vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。
SVG标签用于标签行或路径的开始、中间和结尾。例如，可以用圆或正方形标签路径的起点，用箭头标签路径的终点。...其次，注意元素如何使用mark-start和marker-end CSS属性从其style属性内引用两个元素。这就是为给定路径指定要使用的标记的方式。 二、常见的标记 1....从其他形状引用标记 3.1 思路 元素不是唯一可以使用标记的SVG元素。 ，和元素也可以使用标记。...3.2 标记单位 （可以将标记的大小设置为缩放，以适合使用它的路径的描边宽度） 。 例： 通过将元素的markerUnits设置为strokeWidth，可以实现此效果。...为避免自动缩放标记以使其适应路径的笔触宽度，请将markerUnits属性设置为userSpaceOnUse。这样，无论使用它的路径的笔触宽度如何，标记都将保持其大小。
HTML5学堂：之前的文章与大家分享了SVG的一系列操作，但是SVG也是存在一些劣势，所以今天开始为大家分享介绍HTML5 Canvas的相关知识，Canvas是什么呢？...又如何进行Canvas进行图像的绘制呢？在Canvas当中有哪些绘制图形的方法？来看看下面的文章吧。 Canvas与SVG的比较 ?...Canvas的基本知识 - getContext对象 getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。...线段的起始点和结束点由锚点标记，就像用于固定线的针。 通过编辑路径的锚点，您可以改变路径的形状。 您可以通过拖动方向线末尾类似锚点的方向点来控制曲线。路径可以是开放的，也可以是闭合的。...y为文字起始位置的坐标，maxWidth为文字的宽度，能够防止文字太宽而溢出，浏览器会缩减文字以适应宽度 Canvas基本方法操作实例 <!
矢量网格 VECTOR Vector 是 Figma 的一种特殊的矢量网格图形，类似 SVG 的 path，但功能更强大。...它能够表达任意其他类型的图形，所以其他图形经常可以通过一些操作转换为矢量网格类型。 比如双击矩形，给它加一个路径点，然后确认，此时其实它就不再是矩形了，而是矢量网格了。...线 LINE 矢量网格图形的近亲，也有一个 vectorData 保存一些矢量信息。 对于线条，一般来说会往两边扩展宽度来绘制有宽度的线段（Canvas 2D 和 SVG 都是）。...这样在坐标 1 的位置绘制 1px 的线条，会导致 跨越多行像素 的情况，为了看起来不这么粗，就要做抗锯齿，使用半透明的像素去填充多行像素点，但却导致线条会看起来有些点模糊，给用户一种低画质的感觉。...默认为 WIDTH_AND_HEIGHT（宽高自动根据文字内容和换行适应），此外还有 HEIGHT（宽度固定，高度自适应）、NONE（文字内容不会改变矩形宽高，必要时会溢出矩形） 结尾 这些就是 Figma
盒模型重置 盒模型重置，使盒子的宽度和高度不受其边框(border)或填充(padding)的影响。...可在 CodePen 上查看真实效果和编辑代码 说明 box-sizing：当元素设置为border-box时，即便设置了padding或border也不会改变元素的宽度和高度。...让图片在容器中显示的更舒适 设置图像在其容器内的适合度和位置，同时保留其宽高比。以前只能使用背景图像和background-size属性来实现。...可在 CodePen 上查看真实效果和编辑代码 说明 删除所有边框 使用 clip 隐藏元素 设置宽高为1px 使用margin：-1px取消元素的高度和宽度 隐藏元素的溢出 移除所有的padding...可在 CodePen 上查看真实效果和编辑代码 说明 overflow:hidden 防止内容溢出 width:400px 确保元素有尺寸 height:109.2px 计算的高度值，它等于font-size
margin 和 padding 已为0， box-sizing可以管理您的CSS盒模型布局。...使用 SVG 图标 没有理由不使用 SVG 图标： .logo { background: url("logo.svg");} SVG 在所有分辨率下都可以良好缩放，并且支持所有 IE9 以后的浏览器...使得框等于其宽度的20％的高度。...与视口宽度无关，子元素的div将保持其宽高比（100％/ 20％= 5:1）。...你可以计算字体大小根据视口高度的字体大小和宽度，这时需要用到 :root: :root { font-size: calc(1vw + 1vh + .5vmin);} 现在，您可以使用 root em
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
