css

抖音页面上，随着屏幕宽度的缩放，div元素会一直保持一定的宽高比，这里的高度一直是宽度的75% 高度 = 父元素内容宽度 * 75% 设置padding-top或padding-bottom为75%即

效果： css：效果： css：效果： css：效果： css：效果： css：效果： css：效果： css：效果： css：

white-space中有2个属性，pre-line和pre-warp 如果希望识别每个换行符和每个空格，就需要使用pre-warp 我的需求是，管理员在审核时，备注信息输入了什么，包括格式，用户在详

一、flex布局中水平垂直居中 这还不简单？ 但还可以结合margin来实现，可以不用设置justify-content和align-items 二、最后一个元素靠右对齐 这还不简单？ 简单点： 是不

一、效果 二、实现 三、实现思路 input标签设置id="state"，label标签设置for="state"，这样可以在点击label的时候改变input的状态 #state:checked表示

一、效果 二、css实现 @keyframes turn { 0% { transform: rotate(0deg); } 100% {

一、效果 二、实现 DOM结构： css： position: sticky; top: 80px;的含义： 当视口滚动距离小于80px时，.title元素为相对定位； 当视口滚动距离大于等于80px

一、mask-image属性是什么 mask-image属性需要有一张png图片，这张图片遮挡在指定DOM上，图片中透明部分遮挡的部分将不显示；被不透明部分遮挡的部分将显示出来，显示的是背景图片或背景

一、效果 二、基础布局 grid-template-columns: 100px 100px 100px;表示第一列、第二列、第三列的宽度 grid-template-rows: 50px 50px;

一、效果 二、实现代码 三、思路总结 js可以通过事件对整个动画流程做控制，单个动画的渲染优先选择css3 灵动岛动画会有一种超出边界继续放大接着又收缩的效果，在选择css3动画时优先考虑animat

1、安装插件 2、修改package.json 修改前： 修改后： 3、和package.json同级创建craco.config.js 4、npm start重启项目，可以使用less了

一、flexible.js 前提是设计稿为750px，它的原理是将当前设备宽度划分10等份 二、设置meta标签 三、引入flexible.js文件 四、初始化style 五、修改vscode的默认R

一、flexible.js 二、引入 此时，html标签上的font-size会随着浏览器宽度的变化而变化 三、修改vscode的默认Root Font Size 默认为16px，改为80px，输入p

一、问题场景 css布局时很多时候需要用到calc计算宽高，或者使用flex布局，大多数场景下作用一样。 但是使用了ListScroller组件时，使用flex布局的flex: 1;时，会出现样式的错

效果 通过css+js实现 分析 结构：上下两层结构，都是同一个背景图，通过定位将两张图片重叠 js：由于document内部的mountain盒子高度为200vh，所以可以监听到document文档

效果 css实现 核心代码： 素材：背景图片效果 css实现 核心代码： 素材：背景图片效果 css实现 核心代码： 素材：背景图片

1、背景 UI设计的特殊字体需要另外提供一个字体 2、将下载好的字体放到assets中 3、src/styles/common.less 4、main.js中引入样式文件 5、使用：设置该字体便会生效

效果 vue中实现 原生js实现<template> <div class="ceiling"> <header></header> <div class="container">

一、为什么要从 html 元素中继承 box-sizing 二、如何设置全局的box-sizing 三、vue中如何设置 方式一：App.vue中 方式二：public/index.html 方式三：

flex的属性值可以是1个、2个、3个以及关键字属性值 对应： 一个值 两个值 数值，例如：flex: 1 2;，则这个2表示flex-shrink，此时flex-basis使用默认值auto 长度值