您现在的位置是：亿华云 > 数据库

有用的 CSS，你学会了吗？

亿华云2025-10-02 18:51:10【数据库】1人已围观

简介1.盒模型两种）content + padding + border + margin1.1 标准盒模型1.2 IE盒模型/怪异盒模型1.3 其他box-sizing: border-box | co

1.盒模型（两种）

content + padding + border + margin

1.1 标准盒模型

1.2 IE盒模型/怪异盒模型

1.3 其他

box-sizing: border-box | content-box;IE默认border-box，有用其他浏览器默认content-box。有用此属性用以改变盒模型宽高的有用计量方式

outline位于边框边缘的外围，可起到突出元素的有用作用。

不属于盒模型的有用一部分，不占空间（这样不会导致浏览器渲染时出现reflow或是有用repaint）

颜色outline-color、线条样式outline-style、有用线条宽度outline-width

outline有可能是有用非矩形的（火狐浏览器下）

outline-offsetoutline内圈与border外圈的偏移box-shadow盒模型阴影，位于border外面

div {

width:100px;

height:100px;

background:red;

position:relative;

animation-name:myfirst;

animation-duration:5s;

animation-timing-function:linear;

animation-delay:2s;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

}

@keyframes myfirst {

0% { background:red; left:0px; top:0px;}

25% { background:yellow; left:200px; top:0px;}

50% { background:blue; left:200px; top:200px;}

75% { background:green; left:0px; top:200px;}

100% { background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and 有用Chrome */ {

0% { background:red; left:0px; top:0px;}

25% { background:yellow; left:200px; top:0px;}

50% { background:blue; left:200px; top:200px;}

75% { background:green; left:0px; top:200px;}

100% { background:red; left:0px; top:0px;}

}

注意: 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。

</body>

4.8 用户界面特性

4.9 媒体查询

viewport(视窗) 的宽度与高度设备的宽度与高度

name="viewport"

content="width=device-width,initial-scale=0,maximum-scale=1,user-scalable=no"

/>朝向 (智能手机横屏，竖屏)分辨率

4.10 rem、有用em、有用vw、有用vh

rem: 相对于根元素body字体设置的有用大小，默认字体大小为16px。有用（例：1rem = 16px 2rem = 32px）em: 相对于父元素字体设置的大小，与rem相似vw: 视口宽度（100vw = 100%视口宽度）vh: 视口高度（100vh = 100%视口高度）

5.Less - Leaner Style Sheets

Less是云服务器提供商CSS的预处理语言，扩展了CSS，增加了诸如变量、混合（mixin）、函数等功能，使得CSS更易制作和维护。

5.1 变量

普通用法：宽高成比例 aspect-ratio: 16/9;

// 定义变量

@width: 10px;

// 定义变量 + 使用变量

@height: @width + 10px;

// 使用变量

#header {

width: @width;

height: @height;

}

进阶：

变量定义类名@my-selector: banner;

// Usage

.@{ my-selector} { // 本行被编译为：.banner {

font-weight: bold;

line-height: 40px;

margin: 0 auto;

}变量定义URL// 图片路径

@images: "../img";

// Usage

body {

color: #444;

background: url("@{ images}/white-sand.png");

}

// import样式路径

@themes: "../../src/themes";

// Usage

@import "@{ themes}/tidal-wave.less";变量定义另一个变量@primary: green;

@secondary: blue;

.section {

@color: primary;

.element {

color: @@color;// 被编译为：color: green;

}

}将属性直接视为变量.widget {

color: #efefef;

background-color: $color;// 被编译为：background-color: #efefef;

}

映射

@sizes: {

mobile: 320px;

tablet: 768px;

desktop: 1024px;

}

.navbar {

display: block;

@media (min-width: @sizes[tablet]) {

display: inline-block;

}

5.2 混合

基础用法：

.my-mixin {

color: black;

}

.my-other-mixin() {

background: white;

}

.class {

// 注意两个混合方式不同

.my-mixin();

.my-other-mixin();

}

// 编译为

.my-mixin {

color: black;

}

.class {

color: black;

background: white;

}

进阶：

配合 !important.important {

.foo() !important;

// .foo()中的所有属性都加上!important列在这里

}配合变量.mixin(@color: black; @margin: 10px; @padding: 20px) { // 与函数相似，用分号隔开，可以有默认值

color: @color;

margin: @margin;

padding: @padding;

}

.class1 {

.mixin(@margin: 20px; @color: #33acfe);

}

.class2 {

.mixin(#efca44; @padding: 40px);

}守卫.mixin(@a) when (lightness(@a) >= 50%) {

background-color: black;

}

.mixin(@a) when (lightness(@a) < 50%) {

background-color: white;

}

.mixin(@a) {

color: @a;

}

.class1 { .mixin(#ddd) }

.class2 { .mixin(#555) }

// 编译为

.class1 {

background-color: black;

color: #ddd;

}

.class2 {

background-color: white;

color: #555;

}

// 守卫还可以加上

// 1、and关键字拼接模拟&&

// 2、逗号拼接模拟||

// 3、not模拟!

5.3 嵌套

// 让代码结构更加清晰，与html中嵌套关系一致

#header {

color: black;

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

}

// @media、@supports冒泡：@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变

.component {

width: 300px;

@media (min-width: 768px) {

width: 600px;

@media (min-resolution: 192dpi) {

}

@media (min-width: 1280px) {

width: 800px;

}

// 上面冒泡的代码编译为

.component {

width: 300px;

}

@media (min-width: 768px) {

.component {

width: 600px;

}

@media (min-width: 768px) and (min-resolution: 192dpi) {

.component {

}

@media (min-width: 1280px) {

.component {

width: 800px;

}

5.4 运算

// +、-、*、/ 可以对任何数字、颜色或变量进行运算

// 所有操作数被转换成相同的单位，计算的结果以最左侧操作数的单位类型为准

@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

background-color: #112244 + #111; // 结果是 #223355

5.5 转义

~"(min-width: 768px)"

@min768: ~"(min-width: 768px)";

// less3.5开始可以简写为：@min768: (min-width: 768px);

.element {

// @min768 被编译为(min-width: 768px)

@media @min768 {

font-size: 1.2rem;

}

5.6 命名空间和访问符

#bundle() {

.button {

display: block;

border: 1px solid black;

background-color: grey;

&:hover {

background-color: white;

}

.tab { ... }

.citation { ... }

}

// 复用button的内容

#header a {

color: orange;

#bundle.button();

// 还可以书写为 #bundle > .button 形式

// all do the same thing

// #outer > .inner();

// #outer .inner();

// #outer.inner();

}

5.7 映射 >3.5

#colors() {

primary: blue;

secondary: green;

}

.button {

color: #colors[primary];// 编译为：primary: blue;

border: 1px solid #colors[secondary];// 编译为：border: 1px solid green；

}

5.8 &代替父类名称

a {

color: blue;

&:hover {

// 如果没有&，将导致:hover规则匹配到内悬停元素的后代选择器

color: green;

}

//上面被编译为

a {

color: blue;

}

a:hover {

color: green;

}

// =======================

.button {

&-ok {

}

&-cancel {

}

//上面被编译为

.button-ok {

}

.button-cancel {

}

.button-custom {

}

// &&(同一个选择器出现多个&时) -> 第一个&代表父级，云服务器第二个&代表父级的父级

5.9 附加属性

// 用逗号拼接属性

.mixin() {

box-shadow+: inset 0 0 10px #555;

}

.myclass {

.mixin();

box-shadow+: 0 0 20px black;

}

// 编译为

.myclass {

box-shadow: inset 0 0 10px #555, 0 0 20px black;

}

// =========

// 用空格拼接属性

.mixin() {

transform+_: scale(2);

}

.myclass {

.mixin();

transform+_: rotate(15deg);

}

// 编译为

.myclass {

transform: scale(2) rotate(15deg);

}

5.10 extend

nav ul {

&:extend(.inline);

background: blue;

}

.inline {

color: red;

}

// 被编译为

nav ul {

background: blue;

}

.inline,

nav ul {

color: red;

}

// .c:extend(.d all)

// .e:extend(.f, .g) { }

// .some-class:extend(.bucket tr) { } // 扩展bucket > tr

相比于混合的区别在于，可以不用生成更多代码，举个例子

// 混合

.my-inline-block() {

display: inline-block;

font-size: 0;

}

.thing1 {

.my-inline-block;

}

.thing2 {

.my-inline-block;

}

// 编译为

.thing1 {

display: inline-block;

font-size: 0;

}

.thing2 {

display: inline-block;

font-size: 0;

}

// =======================

// 扩展

.my-inline-block {

display: inline-block;

font-size: 0;

}

.thing1 {

&:extend(.my-inline-block);

}

.thing2 {

&:extend(.my-inline-block);

}

// 编译为

.my-inline-block,

.thing1,

.thing2 {

display: inline-block;

font-size: 0;

}

5.11 @import

less会根据扩展名不同对导入的文件做不同处理：

@import "foo"; // foo.less is imported

@import "foo.less"; // foo.less is imported

@import "foo.php"; // foo.php imported as a Less file

@import "foo.css"; // statement left in place, as-is

import 参数：

interface：使用Less文件但不输出inline：在输出中包含源文件但不处理它less：无论文件扩展名如何，都将文件视为 Less 文件css：将文件视为 CSS 文件，无论文件扩展名是什么once：只包含一次文件（这是默认行为）multiple：多次包含文件optional：找不到文件时继续编译

eg：

@import (optional, reference) "foo.less";

5.12 @plugin

导入js插件，添加一些功能和属性：

@plugin "my-plugin"; // 没有扩展名时，自动导入.js文件

定义插件：

// 法一

registerPlugin({

install: function(less, pluginManager, functions) {

functions.add(pi, function() {

return Math.PI;

});

}

})

// 法二

module.exports = {

install: function(less, pluginManager, functions) {

functions.add(pi, function() {

return Math.PI;

});

}

};

// 如果想要将该节点与其他值相乘或执行其他Less操作，则需要返回一个适当的Less节

// 否则，样式表中的输出就是纯文本(这可能适合您的目的)。

functions.add(pi, function() {

return new tree.Dimension(Math.PI);

});

使用自定义：

@plugin "my-plugin";

.show-me-pi {

value: pi();// value: 3.141592653589793;

}

// 作用域

.el-1 {

@plugin "lib1";

value: foo();

}

6.CSS Modules

6.1 基本使用

作用：

解决冲突显示依赖无默认作用域

没有css modules的情况下，样式是全局的（当类名相同时，样式相互干扰）：

// 全局引入方式，所有文件的样式相互影响

import ./style.less;

className="element"

添加 css modules后，各个组件仅仅会引用自己import的样式，下面开始介绍如何配置css modules

下载相关依赖npm i css-loader -Dcss-loader 配置：{

loader: css-loader,

options: {

modules: {

localIdentName: [local]_[hash:base64:5]

}

}使用// css modules 依赖

import style from ./style.less;

class=`${ style.element}`

基本效果（类名生成相应的hash）

6.2 styleName方式使用

发现每次引入都需要使用import style from xxx; className={ style.title}这样。总是需要多写一个我们不太需要的亿华云计算style，下面介绍另一种方式：

引入相关依赖npm i css-loader -D

# less相关的依赖

npm install less-loader less -D

# 使用编译时CSS模块解析将styleName转换为className

npm i babel-plugin-react-css-modules --save

npm install postcss-less --save-dev

babel-plugin-react-css-modules实现编译时CSS模块解析将styleName转换为className。与react-css-modules相比，babel-plugin-react-css-modules具有更小的性能开销(0-10%vs+50%）和更小的大小占用空间（小于2kb vs 17kb react-css-modules+lodash依赖）

css loader配置webpack{

loader: css-loader,

options: {

modules: {

// 将样式文件中类名转化为指定格式

localIdentName: [local]-[hash:5],

}

},.babelrc中配置"plugins": [

[

"react-css-modules",

{

// 如果styleName只在其中一个中，则允许多个匿名导入

"autoResolveMultipleImports": true,

// 将react dom中类名转化为指定格式

"generateScopedName": "[local]-[contenthash:5]",

"filetypes": {

".less": {

"syntax": "postcss-less"

}

]

⚠️ localIdentName和generateScopedName配置的名字要保持一致。(这里有个坑，从css-loader6.2.0使用了新的hash算法，所以导致两者的生成的hash不一致，可以利用generic-names来生成一致的名字)

组件中引入样式文件方式// css modules styleName

import style.less;

styleName="element"

基本使用：

:local:global:export 将css变量输出到js组合实现复用.base { /* 所有通用的样式 */ }

.normal {

composes: base;

/* normal 其它样式 */

}

6.3 antd样式冲突方案

配置文件，修改less文件中类名的前缀// less-loader配置

{

loader: less-loader,

options: {

lessOptions:{

javascriptEnabled: true,

modifyVars: {

// 修改less文件中类名的前缀

@ant-prefix: mis-cpts__ant,

@primary-color: #C92E33

}

}修改html中类名的前缀

...

</ConfigProvider>

7.postcss

7.1 是什么

PostCSS 将 CSS 转换为 JavaScript 可以操作的数据结构。这些数据可以由插件理解和转换，然后处理成各种需要的格式。

接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。在这之后，这个 API 便可被许多插件利用来做有用的事情，比如寻错或自动添加 CSS vendor 前缀。

7.2 有什么用

可以检查（lint）你的 CSS支持 CSS Variables 和 Mixins编译尚未被浏览器广泛支持的先进的 CSS 语法内联图片模块化csscss in js...

7.3 webpack中怎么使用postcss

依赖于node.js引入postcssnpm install postcss -D

npm install postcss-loader -D引入一些需要的插件# eg：添加浏览器前缀的插件

npm install autoprefixer -Dwebpack配置loader（ps：可以直接在配置loader的地方配置options也可以添加postcss.config.js配置文件配置options）{

loader: postcss-loader,

options: {

postcssOptions: {

plugins: [

// autoprefixer插件：添加了 vendor 浏览器前缀，它使用 Can I Use 上面的数据。

autoprefixer({

// 适配99%的浏览器，最新两个版本

overrideBrowserslist: [> 1%, last 2 versions, not ie <= 8],

}),

]

};

7.4 常见postcss插件

autoprefixer: 给css属性添加兼容性前缀postcss-import: 合并样式cssnano: 压缩css代码postcss-preset-env: 允许你使用一些新的的css特性

7.5 自定义一个postcss插件

Root: PostCss处理过的Css，整个处理过程基本上都在围绕着Root，Commont，AtRule，Rule都是它的子节点。AtRule: 为带@标识的部分，name为标识名称，params为标识参数。nodes为内部包含的其他子节点，可以是Commont，AtRule，Rule，这让我们可以自定义更多的规则Rule: 选择器样式部分，一个选择器代表一个Rule，选择器对应的样式列表nodes为Declaration构造函数Declaration: 为Css样式属性,prop为样式属性，value为样式值。可给Rule手动添加样式属性，也可以修改prop,value。module.exports = (opts = { }) => {

// 此处可对插件配置opts进行处理

return {

postcssPlugin: postcss-test, // 插件名字，以postcss-开头

Once (root, postcss) {

// 此处root即为转换后的AST，此方法转换一次css将调用一次

Declaration (decl, postcss) {

// postcss遍历css样式时调用，在这里可以快速获得type为decl的节点(请参考第二节的AST对象)

Declaration: {

color(decl, postcss) {

// 可以进一步获得decl节点指定的属性值，这里是获得属性为color的值

// 下面的内容是把字体颜色替换了

if (decl.value === white) {