css
文章平均质量分 75
啊啊啊~~
这个作者很懒,什么都没留下…
展开
-
svg-基础变形
svg-基础变形1.元素作用:把属性赋给一整个元素集合<g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /></g>2.SVG嵌在SVG内部比之HTML,SVG允许你无缝嵌入别的svg元素。因此你可以利用内部svg元素的属性viewBox、属性width和属性height简单创建一个新的坐原创 2021-09-14 14:46:52 · 371 阅读 · 0 评论 -
css 中用来表示颜色的属性和方法
CSS 中的颜色可以通过以下方法指定:十六进制颜色带透明度的十六进制颜色RGB 颜色RGBA 颜色HSL 颜色HSLA 颜色预定义/跨浏览器的颜色名称使用 currentcolor 关键字1. 十六进制颜色#p1 {background-color: #ff0000;} /* 红色 */#p2 {background-color: #00ff00;} /* 绿色 */#p3 {background-color: #0000ff;} /* 蓝色 */2.带透明度的十原创 2021-09-08 11:17:05 · 901 阅读 · 0 评论 -
postcss插件学习总结
PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 C原创 2021-08-23 11:38:27 · 1946 阅读 · 0 评论 -
CSS3 transition(过渡)属性详解
CSS3 transition(过渡)属性详解语法transition: property duration timing-function delay;transition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transition-delay 定义过渡效果何时开始。1.propertynone 没有属性会获得过渡效果。原创 2020-11-19 09:49:45 · 627 阅读 · 0 评论 -
CSS伪类和伪元素的区别
CSS伪类和伪元素的区别1.简介css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释。伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样原创 2020-10-18 22:55:42 · 1131 阅读 · 0 评论 -
script标签在html中的放置位置引起的错误
script标签在html中的放置位置引起的错误1.首先把script放在前面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>函数</title> <s原创 2020-10-16 15:14:56 · 535 阅读 · 0 评论 -
CSS 弹性盒子flexbox和grid布局
一.弹性盒子flexbox1.简介CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。2.组成弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了原创 2020-10-15 19:03:10 · 780 阅读 · 0 评论 -
CSS line-height和vertical-align详解
一.line-height首先看一张图:从上到下分别是top(顶线),middle(中线),baseline(基线),bottom(底线)1.line_height:行高,等于内容区域高度+行间距,在图中就是上一行文字底线到下一行文字底线之间的距离。2.font-size:font-size为字体的高度,图中就是一行文字顶线到底线之间的区域的高度,也就是内容区域高度,即为图中深灰色部分。3.行间距:两行文字之间的距离,图中就是上一行文字底线到下一行文字顶线之间的距离。4.行内框:行内框是一原创 2020-10-13 16:49:21 · 606 阅读 · 0 评论