css
CSS
CSS 什么是CSS Cascading Style Sheet层叠级联样式表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范--> <link rel="style ......
CSS 中遇到的问题和解决方法
连续的英文字符，符号单独占一行不换行的问题 通常中文会自动换行，英文符号如果没有回车换行符就会一直延伸，解决办法是，给文字的容器添加属性 word-break: break-word ......
css基础样式
CSS简介 CSS全称层叠样式表(Cascading Style Sheets) CSS也是一种标记语言,用于给HTML结构设置样式,例如文字大小、颜色元素宽高效果等等 核心思想:HTML搭建结构,CSS添加样式,实现结构与样式的分离 CSS行内样式 行内样式又称内联样式 直接在标签内通过style ......
成品直播源码推荐，原生button按钮css去掉默认样式
成品直播源码推荐，原生button按钮css去掉默认样式 button{border: none;margin: 0;padding: 0;outline: none;border-radius: 0;line-height: normal;}button::after { border: none ......
CSS 也能实现 if 判断？实现动态高度下的不同样式展现
最近在群里，有个小伙伴问了这么一道很有趣的问题： CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图： 可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会出现，可以算是一个 ......
使用scoped后，父组件的样式将不会渗透到子组件中。 不过一个子组件的根节点会同时受其父组件的scoped css和子组件的scoped css的影响。
下列关于scoped的描述错误的是（ ） A scoped原理是在标签上添加data-v属性，然后使用属性选择器实现样式局部化 B 使用scoped，父组件的样式会渗透到子组件内部的元素 C 使用scoped不会造成全局污染 D ">"可以实现样式穿透 正确答案：B 使用scoped后，父组件的样式 ......
webpack文档打包html,css,js文件
先用npm init -y，快速生成package.json文件，package-lock.json文件是用来固化依赖包的版本的，导入包后会自行生成，提交给他人项目时，只需要给这两个配置文件，然后输入npm i，即可自动下载依赖。 新建一个webpack.config.js配置文件，以下是配置文件的 ......
黑马pink css5
css有三大特性：层叠性，继承性，优先级。 层叠（覆盖）性：解决冲突 就近原则 恰当地使用继承可以简化代码，降低css的复杂性 行高的继承：font：12px/1.5 1.5表示当前文字大小的1.5倍 body行高1.5，这样写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高 优先级 继承 ......
微信小程序canvas 设置旋转css 不生效
问题 项目中有使用canvas 生成条码（一维码）的功能，使用的插件wxbarcode来生成的，但是项目需求的条码是要竖向的，插件的生成的是横向的，不知道是否有参数去控制，当时图省事想着直接用css 旋转一下好了，在模拟器上看到的确实也没有问题，但是在真机上就出问题，没有旋转，还发生了偏移 解决 开 ......
黑马pink css4
snipaste 将截图固定在桌面上-快捷键F3 在截图上点击后按alt键可以得到其RGB 让文字垂直居中的技巧是：盒子的行高height等于文本的行高line-height css背景：背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定 background-repeat：是否重复平铺 背景 ......
css3 弹性盒子
flex属性详解 juejin.cn溪阳 网页布局 最早的时候，网页排版通常是通过 table 元素实现的，在 table 的单元格里使用 align、valign 来实现水平和垂直方向的对齐 后来随着 html 语义化 和 CSS 的发展，浮动布局和定位布局也出现了，还有text-align: c ......
CSS实例-切换开关
在线展示： 矩形开关 圆形开关 代码： <!-- 矩形开关 --> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> <!-- 圆形开关 --> <label class="swi ......
CSS3学习笔记-动画
CSS3中提供了许多有趣和实用的动画效果，可以使页面更加生动有趣，下面介绍一些常用的动画效果。 @keyframes规则 使用@keyframes规则可以创建一系列动画帧，并定义它们的状态和样式，在页面中应用该动画后，浏览器会自动处理中间帧的变化。 语法如下： @keyframes animatio ......
CSS3学习笔记-过渡
学习CSS3过渡（Transitions）是为了在元素状态之间创建平滑的动画效果。下面是一些关于CSS3过渡的学习笔记： 过渡基础语法： 使用transition属性来定义过渡效果。 通过指定过渡的属性、持续时间、延迟和过渡速度来设置过渡。 可以使用逗号分隔多个属性，为每个属性设置不同的过渡效果。 ......
CSS3学习笔记-句子排版效果
CSS3提供了丰富的排版效果，可以通过样式属性来控制文本的排列方式、字体样式、行高、字间距等。以下是一些常用的句子排版效果示例： 文本对齐方式： .text-center { text-align: center; } .text-right { text-align: right; } .text ......
CSS3学习笔记-选择器
在CSS中，选择器是一种指定一个或多个元素的方法。可以根据元素的类型、类、ID、属性等特征来选择元素。CSS3引入了很多新的选择 器，让我们可以更加灵活和精准地选择元素。 下面介绍一些常用的CSS3选择器： 1. 元素选择器 元素选择器指定元素的标签名称，例如 p、h1、ul。 p { color: ......
CSS3学习笔记-字体属性
在CSS3中，可以使用字体属性来控制网页中文本的样式和排版。以下是常用的字体属性： font-family 该属性用于指定网页中的文本所使用的字体。我们可以通过使用通用的字体名称，或者直接使用字体名称，在多个字 体之间进行设置。例如： ```css body { font-family: Arial ......
CSS3学习笔记-盒模型
CSS盒模型是指包含内容（content）、填充（padding）、边框（border）和外边距（margin）几个方面的一个矩形框模型。 内容区（content）：指元素中显示内容的区域，它的大小由width和height属性决定。 填充区（padding）：用于控制内容区周围的空白区域或边距，p ......
CSS3学习笔记-文字特效
CSS3中提供了许多有趣和实用的文字特效，可以让我们的文本内容更加生动有趣，下面介绍一些常用的文字特效。 文本阴影 使用text-shadow属性可以为文本添加阴影效果，语法如下： text-shadow: h-shadow v-shadow blur-color; 其中，h-shadow和v-sh ......
CSS3学习笔记引言
开始我们要来介绍css: CSS（全称为Cascading Style Sheets）是一种用于描述HTML、XML等文档样式的样式语言，它能够定义元素的显示方式，如字体、颜色、布局等。 CSS可以把HTML文档的呈现样式和内容分离，使得网页的结构和表现更加清晰明了，并且可以减少重复的代码。 有了C ......
黑马pink css3
行内元素/内联元素：是最典型的行内元素 特点： 相邻行内元素在一行上，一行可以显示多个 高，宽度设置是无效的 默认宽度是他本身内容的宽度 行内元素只能容纳文本或其他行内元素 注意： 内部不能嵌套‘’ 可以嵌套块级元素 行内块元素：‘ ’ 特点： 一行可以有多个，之间有空隙 默认宽度是他本身内容的宽度 ......
vue完成记事本小功能（没有css样式）
app.vue <template> <div class=""> <SchuRuKuang @Add="handleAdd"></SchuRuKuang> <LieBiaoZhanShi :list="list" @delOne="handledelOne"></LieBiaoZhanShi> < ......
CSS：backdrop-filter实现磨砂玻璃(毛玻璃)的效果
一、什么是backdrop-filter backdrop-filterCSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 backdrop-filter与filter非常类似，可以取的值都是一样的 ......
CSS基础：你必须要知道的行高属性 line-height
作者:WangMin 格言:努力做好自己喜欢的每一件事 对于初学CSS的同学来说，会有很多属性相关的疑问，行高属性 line-height一定是其中一个，因为它是CSS中非常重要的一个属性，这个属性改变元素在网页中的行高，让你的网页看起来更加整洁，美观。 什么是行高？ CSS中的行高（line-he ......
CSS：箭头
一、箭头产生的原理 1、设置一个div，然后给他设置样式：边框100px，上右下左颜色分别为绿、蓝、橘、红。然后设置div的高度和长度均为100px <template> <div class="about"> <div id="demo12"></div> </div> </template> < ......
新建项目相关的css文件及设置
global.css /* 全局样式表 */html, body, #app { height: 100%; margin: 0; padding: 0;} 2.reset.css /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric ......
你不知道的CSS骚操作
1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件） .no-events { pointer-events: none } 2.移动端禁止用户长按文字选择功能 .unselect { -webkit-touch-callout:none; -we ......
vue+css实现的伪3d旋转罐+液位动态变化
话不多说先看效果： 设计思路： 罐是做了三个位置（中=>左，左=>右，右=>中）的动画效果，每个罐轮流使用一次，来实现旋转的效果。 中间的光亮做了个变形延迟。 罐的透明效果是使用了三层，即最底层是粒子不透明图片，中层是液体组件，最上层是罐体png图片。都是用了绝对定位，请务必设置好位置。 液体组件中 ......
11月10日css盒子模型的margin和padding属性
目录css盒子模型margin属性如何用margin来控制其上下左右的距离margin的缩写padding属性首先它如何进行上右下左的移动现在我有一个需求就是将内容在边框的正中央显示然后就是简写的方式 css盒子模型 有四个属性 属性 描述 margin 用于控制元素与元素之间的距离；margin的 ......
前端学习之html和css
前端 快速入门篇：首先给个title，就是页面标题，比如说这页的 博客后台 - 博客园 这种，第二就是我在它的页面身体里面的标题有h1——h6六种大小的标题，可以按需选择，这个是文字类，然后为了美观一点，可以放图片上去，然后图片也得有它的大小尺寸，包括文字标题也是对吧，所以就引入了css，，css就 ......