分类 css 下的文章

2024-08-08

CSS实现元素水平或垂直居中的方法有很多种，以下是14种常见的实现方式：

使用flexbox布局




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用grid布局




.parent {
  display: grid;
  place-items: center;
}

使用绝对定位和transform




.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用绝对定位和margin:auto




.parent {
  position: relative;
}
.child {
  width: 50%;
  height: 50%;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

使用line-height（适用于单行文本）




.parent {
  height: 100px;
  line-height: 100px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

使用text-align和inline-block（适用于单行文本或图像）




.parent {
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
  line-height: normal; /* 重置line-height */
}

使用table-cell和margin（IE8+）




.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

使用margin:auto（IE10+）




.parent {
  display: -webkit-flex;
  display: flex;
}
.child {
  width: 50%;
  margin: auto;
}

使用writing-mode和text-align（垂直居中）




.parent {
  width: 100px;
  height: 100px;
  writing-mode: vertical-lr;
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
  writing-mode: horizontal-tb;
}

使用writing-mode和line-height（垂直居中）




.parent {
  width: 100px;
  height: 100px;
  writing-mode: vertical-lr;
  line-height: 100px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

使用writing-mode和text-align（水平居中）




.parent {
  width: 100px;
  height: 100px;
  writing-mode: horizontal-tb;
  text-align: center;
}
.child {
  display: block;
  vertical-align: middle;
}

使用writing-mode和margin（水平居中）




.parent {
  width: 100px;
  height: 100px;
  writing-mode: horizontal-tb;
}
.child {
  display: inline-block;
  margin: auto;
}

使用transform和absolute定位（水平或垂直居中）




.parent {
  position: relative;
}
.child {
  position: absolute;
  transform: translate(50%, 50%);
}

- 阅读更多 -

学透CSS-你不知道的下划线属性-text-decoration 文本属性

System

2024-08-08

所有,css

在CSS中，text-decoration属性用于设置或删除文本的装饰。这种装饰通常用于添加下划线、上划线、删除线等效果。

以下是text-decoration属性的一些常用值：

none：定义标准的文本，没有任何装饰。
underline：定义文本下的线。
overline：定义文本上的线。
line-through：定义穿过文本的线。
inherit：从父元素继承text-decoration属性的值。

实例代码：




/* 无下划线 */
.no-underline {
  text-decoration: none;
}
 
/* 有下划线 */
.underline {
  text-decoration: underline;
}
 
/* 有删除线 */
.line-through {
  text-decoration: line-through;
}
 
/* 继承父元素的下划线属性 */
.inherit-decoration {
  text-decoration: inherit;
}

在HTML中使用这些类：




<p class="no-underline">这段文本没有下划线。</p>
<p class="underline">这段文本有下划线。</p>
<p class="line-through">这段文本有删除线。</p>
<p class="inherit-decoration">这段文本继承了父元素的下划线属性。</p>

在实际应用中，可以根据需要选择合适的text-decoration属性值。

- 阅读更多 -

React Native支持Tailwind CSS 语法

System

2024-08-08

所有,css

React Native 不直接支持 Tailwind CSS，因为 Tailwind CSS 是为 web 开发而设计的，它提供了一套预定义的实用程序类用于快速样式 your HTML 元素。然而，你可以使用一些技巧让 Tailwind CSS 在 React Native 应用中工作。

一种可能的方法是使用 react-native-web 库，它允许你在 React Native 应用中使用一些 web 技术，包括 Tailwind CSS。首先，你需要安装 react-native-web 和 Tailwind CSS：




npm install react-native-web tailwindcss

然后，你需要创建一个 Tailwind CSS 配置文件 tailwind.config.js：




// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

接下来，在你的 index.html 或入口文件中引入 Tailwind CSS：




/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS with React Native</title>
  <style>{tailwindCss}</style>
</head>
<body>
  <div id="app"></div>
</body>
</html>

最后，你可以在你的 React Native 组件中使用 Tailwind CSS 类：




import React from 'react';
import { Text, View } from 'react-native';
 
const App = () => (
  <View className="bg-blue-500 p-4">
    <Text className="text-white text-2xl">Hello Tailwind CSS!</Text>
  </View>
);
 
export default App;

请注意，这种方法可能会有性能和兼容性问题，因为它在底层使用了 react-native-web，它并不是为了完全兼容所有 Tailwind CSS 功能而设计的。如果你需要在 React Native 应用中使用更加原生的样式解决方案，你可能需要考虑使用其他如 styled-components 或者 native-base 等库。

- 阅读更多 -

【CSS】简单的抽屉面板展开收起自然过渡效果的css

System

2024-08-08

所有,css




/* 设置抽屉面板的基本样式 */
.drawer {
  width: 200px; /* 抽屉宽度 */
  height: 100vh; /* 抽屉高度 */
  position: fixed; /* 抽屉固定定位 */
  top: 0; /* 抽屉顶部与视窗顶部对齐 */
  left: -200px; /* 初始时抽屉在视窗左侧，不可见 */
  background-color: white; /* 抽屉背景色 */
  transition: left 0.3s ease-out; /* 平滑移动left属性变化，时长0.3秒 */
  overflow-y: auto; /* 抽屉内容超出时显示滚动条 */
  z-index: 10; /* 确保抽屉在内容之上 */
}
 
/* 当抽屉处于展开状态时的样式 */
.drawer.open {
  left: 0; /* 抽屉在视窗右侧，可见 */
}
 
/* 触发抽屉展开的按钮样式 */
.drawer-toggle {
  position: fixed;
  top: 16px; /* 距离视窗顶部 */
  right: 16px; /* 距离视窗右侧 */
  z-index: 11; /* 确保按钮在抽屉之上 */
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
}
 
/* 抽屉展开按钮的图标样式 */
.drawer-toggle .icon {
  width: 48px;
  height: 48px;
  fill: black; /* 可以替换为SVG图标颜色 */
}

这段代码定义了一个抽屉面板的基本样式，并通过.open类来控制抽屉的展开和收起。当.drawer元素被添加.open类时，抽屉会从左侧滑入视窗。此外，抽屉的高度被设定为视窗高度(100vh)，确保它至少与视窗一样高，并且内容过长时会出现滚动条。平滑过渡效果由transition属性实现，时长为0.3秒。

- 阅读更多 -

WebKit的图像魔法：深入CSS Image Values支持

System

2024-08-08

所有,css




/* 定义一个简单的CSS规则，使用WebKit的图片值特性 */
@-webkit-keyframes {
  0% {
    background-image: -webkit-canvas(magic_sponge);
  }
  100% {
    background-image: -webkit-canvas(oil_slick);
  }
}
 
/* 在canvas上定义魔法动画 */
body {
  -webkit-animation-name: magic;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
 
/* 在WebKit内核的浏览器中，这将创建一个背景图像的变化动画 */

这个CSS样例展示了如何在WebKit浏览器中使用@-webkit-keyframes规则和-webkit-canvas功能来创建一个简单的背景图像动画。这个特性在旧版的WebKit浏览器中可能不被支持，但在一些移动浏览器中可能会有奇特的视觉效果。注意，由于这是一个非标准特性，最好在较新的浏览器中测试其兼容性。

- 阅读更多 -

跟着大佬学web前端笔记【CSS篇】

System

2024-08-08

所有,css

在这一部分中，我们将介绍CSS的基本选择器和一些常用的样式属性。

基本选择器：
- 标签选择器：直接使用HTML标签作为选择器。
- 类选择器：通过class属性指定，以.开头。
- ID选择器：通过id属性指定，以#开头。
- 通用选择器：用*表示，匹配所有元素。
- 分组选择器：用,分隔，可以将多个选择器组合在一起。
常用样式属性：
- color：文字颜色。
- background-color：背景颜色。
- font-size：字体大小。
- font-weight：字体粗细。
- text-align：文本水平对齐。
- padding：内边距。
- margin：外边距。
- border：边框。
- width和height：宽度和高度。

示例代码：




/* 标签选择器 */
p {
  color: blue;
}
 
/* 类选择器 */
.my-class {
  background-color: yellow;
}
 
/* ID选择器 */
#my-id {
  font-size: 20px;
}
 
/* 通用选择器 */
* {
  padding: 10px;
}
 
/* 分组选择器 */
h1, h2, h3 {
  font-weight: bold;
  text-align: center;
}

在HTML中使用这些选择器：




<p>这是一个段落。</p>
 
<div class="my-class">这是一个具有my-class类的div。</div>
 
<div id="my-id">这是一个具有my-id的div。</div>
 
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

以上代码展示了如何使用不同的选择器和样式属性来修饰HTML元素。

- 阅读更多 -

【热门话题】PostCSS：现代前端开发中的CSS增强工具

System

2024-08-08

所有,css

PostCSS 是一个使用 JavaScript 插件来转换 CSS 的工具。这些插件可以增加 CSS 的功能，比如变量、混合、预处理器语言，内嵌图片等。

以下是一个简单的例子，展示如何使用 PostCSS 插件：

首先，安装 PostCSS 和所需的插件：




npm install postcss-cli autoprefixer --save-dev

创建一个 postcss.config.js 文件，并配置所需的插件：




module.exports = {
  plugins: [
    require('autoprefixer'), // 自动添加浏览器厂商前缀
    // 可以添加更多插件
  ]
};

创建一个 CSS 文件（例如 input.css）：




/* input.css */
:root {
  --color: #333;
}
 
.button {
  background-color: var(--color);
  display: flex;
}

在命令行中运行 PostCSS：




npx postcss input.css -o output.css

这将转换 input.css 文件，并输出到 output.css，其中包含了自动添加的浏览器厂商前缀和转换后的 CSS 变量。

PostCSS 非常灵活，可以通过安装不同的插件来实现不同的功能，比如 postcss-simple-vars 用于变量解析，postcss-nested 用于嵌套规则等。

- 阅读更多 -

CSS系列之颜色代码大全、颜色对照表

System

2024-08-08

所有,css

CSS中并没有内置的颜色名称列表，因为颜色可以通过多种方式表示，包括十六进制、RGB、RGBA、HSL、HSLA以及使用颜色名称。

十六进制颜色代码是最常见的表示方法，它由6个十六进制数字组成，前2个表示红色，中间2个表示绿色，最后2个表示蓝色。例如，#FF5733。

RGB颜色代码表示红色、绿色、蓝色的强度，每一个颜色的范围是0到255。例如，rgb(255, 87, 51)。

RGBA颜色代码在RGB基础上增加了一个alpha通道，表示透明度，取值范围是0（完全透明）到1（完全不透明）。例如，rgba(255, 87, 51, 0.5)。

HSL颜色代码表示色调（Hue）、饱和度（Saturation）、亮度（Lightness），色调是色环中的角度，饱和度和亮度的取值是百分比。例如，hsl(359, 100%, 50%)。

HSLA颜色代码在HSL基础上增加了一个alpha通道，表示透明度。例如，hsla(359, 100%, 50%, 0.5)。

颜色名称是通过CSS颜色模块定义的，包括一些基本颜色和一些标准的颜色名称。例如，red、blue、green、yellow等。

如果你需要一份颜色代码的对照表，可以在网上搜索“颜色代码对照表”，有很多在线工具和资源提供这样的信息。

以下是一个简单的CSS样例，展示了几种颜色的表示方法：




.color-example-1 {
  color: #FF5733; /* 十六进制颜色 */
  background-color: rgb(255, 87, 51); /* RGB颜色 */
}
 
.color-example-2 {
  color: rgba(255, 87, 51, 0.7); /* RGBA颜色 */
  background-color: hsl(359, 100%, 50%); /* HSL颜色 */
}
 
.color-example-3 {
  color: hsla(359, 100%, 50%, 0.5); /* HSLA颜色 */
  background-color: red; /* 颜色名称 */
}

在实际应用中，可以根据需要选择最适合的颜色表示方法。

- 阅读更多 -

在React项目中使用css modules

System

2024-08-07

所有,css

在React项目中使用CSS Modules，你需要做以下几步：

安装css-loader和style-loader，通常会安装react-app-rewired来重写Create React App的配置（如果你还没有ejected）：




npm install --save-dev css-loader style-loader react-app-rewired

在项目根目录下创建一个config-overrides.js文件来重写webpack配置：




const { override, addCSSModuleSupport } = require('react-app-rewired');
 
module.exports = override(
  addCSSModuleSupport({
    fileTypes: {
      '.scss': {
        syntax: 'postcss-scss',
        plugins: ['postcss-modules-values']
      }
    }
  })
);

在你的React组件中引入CSS模块：




import React from 'react';
import styles from './App.module.scss'; // 注意这里的文件扩展名是.scss
 
const App = () => {
  return <div className={styles.app}>Hello, CSS Modules!</div>;
};
 
export default App;

使用CSS Modules特有的类名引用：




/* App.module.scss */
.app {
  color: blue;
}

确保你的.scss文件名为*.module.scss，这样webpack会自动为其启用CSS Modules支持。在你的React组件中，通过styles对象访问CSS模块中定义的类名，这些类名会被自动转换为唯一的标识符，从而避免了全局样式冲突的问题。

- 阅读更多 -

如何使用 CSS 自定义浏览器的滚动条

System

2024-08-07

所有,css

在CSS中，可以使用::-webkit-scrollbar和相关伪元素来为浏览器的滚动条自定义样式，但请注意这些伪元素仅在基于WebKit的浏览器中（如Chrome和Safari）支持。Firefox和其他浏览器可能不支持这些伪元素。

以下是一个自定义滚动条的例子：




/* 自定义滚动条的整体样式 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}
 
/* 自定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置轨道的背景颜色 */
}
 
/* 自定义滚动条的样式 */
::-webkit-scrollbar-thumb {
  background: #888; /* 设置滚动条的背景颜色 */
}
 
/* 当鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置鼠标悬停时滚动条的背景颜色 */
}

将上述CSS代码添加到你的样式表中，就可以实现自定义的滚动条效果。

请注意，如果你需要跨浏览器兼容性，你可能需要使用第三方库或者JavaScript来实现类似的功能，因为::-webkit-scrollbar及其相关伪元素仅适用于WebKit内核的浏览器。

- 阅读更多 -