Transform 属性
摘要：Transform 属性 定义 2D 平移转换 translate(x，y) 在 X 轴方向平移，>0 向左平移， <0 向右平移 translateX(x) 在 Y 轴方向平移， >0 向下平移，<0 向上平移 translateY(y) 定义 2D 缩放转换 scale(x, y) 定义 2D
阅读全文
posted @ 2022-03-01 11:11
随笔分类 - CSS
scoped属性与 element-ui 样式
摘要：1 、vue 文件中 style 标签内 scoped 后，有时候需要修改 elemet-ui 控件样式，但是发现不成功。 想找到解决方案，首先来看看不生效的原因 1)、首先，scoped 是如何实现局部样式的？ 查看 vue-loader 文档，根据文档可以知道，当 <style> 标签有 sco
阅读全文
posted @ 2022-02-25 14:41
PostCSS
摘要：PostCSS是一个使用JS插件转换样式的工具。这些插件可以检查(lint)你的CSS，支持CSS Variables 和 Mixins，编译尚未浏览器广泛 支持的先进的CSS语法，内联图片，以及其他很多优秀的功能。 PostCSS 在工业界被广泛地应用 PostCSS 接收一个CSS文件并提供了一
阅读全文
posted @ 2022-02-24 11:21
sass安装报错
摘要：这个错误是因为sass安装时获取源的问题，先修改sass安装的源，再运行npm install就成功了 在命令行中敲入： npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
阅读全文
posted @ 2021-07-27 14:56
浏览器运行机制
摘要：浏览器运行机制 1、构建DOM树（parse）:渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM节点，生成内容树。 2、构建渲染树：解析对应的csss样式文件信息（包括js生成的样式和外部css文件），而这些文件信息构建渲染树。 3、布局渲染树：从根节点递归调用，计算每个元素的大小、位置
阅读全文
posted @ 2021-04-12 15:13
重排和重绘
摘要：重排和重绘 每个页面至少在初始化的时候会有一次重排操作，任何对渲染树的修改，都可能引发重排或者重绘。 重排： 当渲染树中一部分，因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。 重绘（repaint）: 当盒子的位置、大小以及其
阅读全文
posted @ 2021-04-12 15:11
border属性
摘要：border属性： 示例一、 样式代码： display: block; width: 240rpx; height: 240rpx; border-right: 100px solid #d8d8d8; border-top: 100px solid red; border-bottom: 100
阅读全文
posted @ 2021-04-09 14:01
外部引用CSS
摘要：link和@import 外部css导入方式一 <html> <head> <title>css导入</title> <link rel="stylesheet" type="text/css" href="../../xxx.css"> </head> <body> </body> </html>
阅读全文
posted @ 2021-04-02 15:23
优雅降级和渐进增强
摘要：渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进，以达到更 好的用户体验。渐进增强是从一个非常基础的，能够起作用的下一个版本开始，并不断扩充，以适应未来环境的需要。 优雅降级 graceful deg
阅读全文
posted @ 2021-03-30 19:39
盒子模型
摘要：什么是盒子模型？ 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容content、元素的内边距padding、元素 的边框border、元素的外边距margin四个部分。 元素的宽度和高度 当指定一个css元素的宽度和高度属性时，只是设置内容区域的宽度和高度，要知道，完整大小的元素
阅读全文
posted @ 2021-03-30 16:01
css小样式
摘要：知识点： 1 定位position , 在父元素相对定位的基础上对子元素绝对定位 2 border-radius: 圆角 3 border设定 4 box-sizing 和 -webkit-border-radius ，border-radius和-webkit-box-sizing的双设定 5 p
阅读全文
posted @ 2021-01-28 11:31
垂直居中
摘要：1 让一些<div>显示成table-cell ，结合vertical-align属性 ，vertical-align作用在一些元素上会表现得可能会匪夷所思 <div id="cell"> <div class="content">Content goes here</div> </div> #ce
阅读全文
posted @ 2021-01-27 10:24
vertical-align 属性
摘要：vertical-align属性与垂直居中 下面来详细介绍下vertical-align这个属性以及实现垂直居中的若干方法。 1、根据W3C Spec 中对 vertical-align属性的定义： This property affects the vertical positioning ins
阅读全文
posted @ 2021-01-27 09:56
nth-child的运用
摘要：CSS3 :nth-child() 选择器 1、下面的语句表示选择someOnediv下的第二个li标签 .someOnediv li:nth-child(2){background:#090} 2、下面的语句表示选择某一同名集合class中的第二个（scss样式中较常见） ... &:nth-ch
阅读全文
posted @ 2020-12-29 09:00
box-shadow
摘要：box-shadow前言 box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。 box-shadow参数解释 @1、inset 有inset 则为内阴影，没有insert则为外阴影，默认为外阴影。 @2、offset-x 横向阴
阅读全文
posted @ 2020-09-08 17:47
css属性opacity
摘要：CSS 属性opacity，规定不透明度，从 0.0（完全透明）到1.0（完全不透明） opacity: value| inherit; 规定 <!DOCTYPE html> <html> <head> <script> function ChangeOpacity(x) { // 返回被选选项的文
阅读全文
posted @ 2020-01-02 23:34
css属性clear
摘要：clear 属性规定元素的哪一侧不允许其他浮动元素。 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。
阅读全文
posted @ 2020-01-02 22:12
css属性position
摘要：在html中网页可以看成一个立体的空间，一个完整的页面是由很多个页面堆积形成的，如下图所示 CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。 ◆position:static 无定位 该属性值是所有元素定位的默认情况，在一般情况下，
阅读全文
posted @ 2020-01-02 21:05
css知识清单
摘要：CSS样式 1 自定义CSS样式.font01{font-family:"宋体"；font-size:12px;color:#333333}在需要调用的区域，添加class属性，例 <td class="font01"> 2 HTML样式.body{background-color:#FFFFFF;
阅读全文
posted @ 2020-01-02 16:38
