分类 css 下的文章

2024-08-27

在CSS中，可以使用word-wrap和word-break属性来控制英文或数字的自动换行。

word-wrap: break-word; 允许在长单词或URL地址内部换行。
word-break: break-all; 允许任意位置的单词或数字断行。

示例代码：




/* 允许在长单词中间换行 */
.word-wrap {
  word-wrap: break-word;
}
 
/* 允许在任意位置断行单词或数字 */
.word-break {
  word-break: break-all;
}

HTML使用方法：




<div class="word-wrap">ThisIsAVeryLongWordThatWillBeBrokenIfNeeded</div>
<div class="word-break">123456789012345678901234567890</div>

在这个例子中，第一个div使用word-wrap，当单词长度超过容器宽度时，会在容器边缘处断行。第二个div使用word-break，不论是数字还是英文，只要长度超过容器，就会在任意位置断行。

- 阅读更多 -

link 与 @import：CSS 样式表的加载策略

System

2024-08-26

所有,css

在CSS中，有两种方式可以引入样式表：

使用<link>标签直接引入外部样式表。
使用@import规则在CSS文件中引入其他CSS文件。

<link>标签用于HTML文档中，而@import规则用于CSS文件内。

<link>标签




<link rel="stylesheet" type="text/css" href="styles.css">

<link>标签是XHTML标准的一部分，用于定义文档与外部资源（如CSS、图片等）的关系。浏览器会在解析HTML结构的同时下载<link>引用的资源。

@import规则




@import url("styles.css");

@import规则用于CSS文件中，它允许在一个CSS文件中引入另一个CSS文件。

区别

加载顺序：使用<link>的样式表会同时加载，而使用@import的样式表会等到页面全部加载完毕后再加载。
兼容性：@import可能不被一些老旧浏览器支持。
控制能力：@import可以在CSS文件中根据条件引入不同的样式表，而<link>不具备这种灵活性。

综上所述，通常推荐使用<link>标签来引入CSS，因为它更加直接、简单，并且是所有现代浏览器都支持的标准方法。

- 阅读更多 -

前端三剑客 —— CSS （坐标问题、定位问题和图片居中）

System

2024-08-26

所有,css

在CSS中，解决坐标问题、定位问题和图片居中可以使用不同的技术。以下是一些常用的方法：

坐标问题：使用position属性结合top、right、bottom、left属性来控制元素的位置。




.element {
  position: absolute;
  top: 100px;
  left: 200px;
}

定位问题：使用flexbox或grid布局系统来对子元素进行排版。




.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

图片居中：可以使用margin属性设置为auto来实现水平居中。




img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* 根据需要设置宽度 */
}

或者使用flexbox来居中图片：




.container {
  display: flex;
  justify-content: center;
}
 
.container img {
  max-width: 100%; /* 根据需要设置最大宽度 */
}

这些是解决坐标问题、定位问题和图片居中的常见方法，具体使用哪种方法取决于具体的布局需求和上下文环境。

- 阅读更多 -

CSS-自适应导航栏（flex | grid）

System

2024-08-26

所有,css

以下是一个使用CSS Flexbox创建自适应导航栏的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应导航栏</title>
<style>
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #333;
  }
 
  .nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
 
  .nav ul li {
    margin-left: 10px;
    margin-right: 10px;
  }
 
  .nav ul li a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: block;
  }
 
  .nav ul li a:hover {
    background-color: #555;
  }
</style>
</head>
<body>
 
<div class="nav">
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</div>
 
</body>
</html>

这段代码创建了一个水平的导航栏，使用Flexbox布局进行对齐和空间分配。导航链接是一个无序列表，每个链接被包裹在一个列表项<li>中，并且使用了a元素的display: block属性来允许为链接指定宽度和填充。

- 阅读更多 -

Vite 中怎么添加全局 scss 文件

System

2024-08-26

所有,css

在Vite项目中添加全局SCSS文件，你需要做以下几步：

安装SCSS加载器：
确保你已经安装了sass或scss相关的包，例如sass或sass-loader。如果还没有安装，可以通过npm或yarn来安装：




npm install sass -D
# 或者
yarn add sass -D

创建全局SCSS文件：
在项目中创建一个全局的SCSS文件，比如styles/global.scss。
配置Vite配置文件：
在Vite配置文件中（通常是vite.config.js或vite.config.ts），使用Vite提供的插件API或配置选项来引入全局SCSS文件。

例如，你可以使用Vite提供的css.preprocessorOptions配置来指定全局样式文件：




// vite.config.js
import { defineConfig } from 'vite';
import scss from 'sass';
 
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
});

在这个配置中，@import "@/styles/global.scss";指令会被加入到每个被Vite处理的SCSS文件中，使得global.scss中的样式规则会被全局应用。

注意：@ 符号通常在Vite配置中代表项目的src目录。

确保你的全局SCSS文件中的样式规则是全局作用域的，或者使用Vite提供的additionalData选项来避免局部样式意外地污染全局命名空间。

- 阅读更多 -

常见需求：CSS 实现弧形卡片的 3 种方式

System

2024-08-26

所有,css




/* 方法 1: 使用 border-radius 创建弧形 */
.arc-card-1 {
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
 
/* 方法 2: 使用伪元素和 transform 创建弧形 */
.arc-card-2 {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  overflow: hidden;
}
.arc-card-2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: inherit;
  border-top-right-radius: 50%;
}
 
/* 方法 3: 使用 SVG 创建弧形 */
.arc-card-3 {
  width: 200px;
  height: 100px;
  background-color: #f3f3f3;
  mask: url(#arc-mask); /* 引用 SVG 中定义的遮罩 */
}




<!-- 在 HTML 中的 <head> 或 <body> 里定义 SVG 遮罩 -->
<svg width="0" height="0">
  <defs>
    <clipPath id="arc-mask">
      <path d="M0,0 L200,0 A50,50 0 0 1 200,100 L0,100 Z" fill="white"></path>
    </clipPath>
  </defs>
</svg>

以上 CSS 代码展示了创建弧形卡片的三种不同方法：使用 border-radius、伪元素和 transform，以及 SVG 遮罩。每种方法都有各自的优点和适用场景，可以根据实际需求选择合适的方法实现弧形卡片效果。

- 阅读更多 -

【前端基础系列】CSS篇-带你了解position:sticky

System

2024-08-26

所有,css

position: sticky; 是CSS中的一个位置值，它使元素在达到某个滚动位置时变为固定定位。这种行为类似于position: relative;和position: fixed;的结合体，但是它只在达到某个阈值时变为固定，这个阈值由用户设置。

解决方案：

使用position: sticky;




.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 离顶部的距离 */
  background-color: green; /* 背景颜色 */
  border: 2px solid #fff; /* 边框 */
}

使用场景：




<div>
  <h2>我是一个普通的标题</h2>
  <div class="sticky">我是一个粘性定位的元素</div>
  <!-- 更多的内容 -->
</div>

在这个例子中，.sticky元素在滚动时会“粘”在顶部，直到其父元素的顶部与视窗顶部对齐时，它才会变为固定定位。

注意：position: sticky; 的兼容性较好，但是在使用时需要设置top、right、bottom、left其中之一的值，这个值决定了当滚动到何种程度时元素变为固定定位。此外，position: sticky; 在移动端的表现可能不同于在桌面端，因为移动端的滚动行为不同。

- 阅读更多 -

CSS图片对齐方式以及定义div边框最后多出一行div边框的解决方法

System

2024-08-26

所有,css

问题1：CSS图片对齐方式

CSS中可以通过设置vertical-align属性来控制图片或其他行内元素（inline element）相对于其父元素的对齐方式。常用的对齐方式有：

baseline：默认值，元素放置在父元素的基线上。
top：使元素与父元素的顶部对齐。
middle：使元素的中部与父元素的中部对齐。
bottom：使元素与父元素的底部对齐。
text-top：使元素的顶部与父元素字体的顶部对齐。
text-bottom：使元素的底部与父元素字体的底部对齐。

示例代码：




img {
  vertical-align: middle; /* 将图片垂直居中对齐 */
}

问题2：解决div边框多出一行的问题

这个问题通常是由于块级元素（如div）之间的空白间隔引起的。解决方法有：

去除div之间的空格：将div的结束标签和下一个div的开始标签紧密放置在一起，避免在它们之间产生空格或换行。




<div>Content 1</div><div>Content 2</div>

使用CSS的font-size: 0;技巧：在父元素上设置font-size为0，然后在子元素上重新设置正确的字体大小。




.parent {
  font-size: 0;
}
 
.child {
  font-size: 16px; /* 或其他需要的字体大小 */
}

使用CSS的margin属性：设置div的margin为负值，或者使用overflow: hidden属性来防止边框的扩展。




.div-container {
  overflow: hidden;
}

使用CSS的display: flex;或者display: grid;属性：这样可以避免块级元素的空白引起的边框问题。




.div-container {
  display: flex;
}

选择合适的方法应用到具体的HTML结构中即可解决多出的div边框问题。

- 阅读更多 -

简单实现文字滚动效果-CSS版本

System

2024-08-25

所有,css




/* 设置滚动容器 */
.scroll-text-container {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
 
/* 设置滚动文本 */
.scroll-text {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-left 10s linear infinite;
}
 
/* 定义关键帧动画 */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
 
/* 示例用法 */
<div class="scroll-text-container">
  <div class="scroll-text">这是一个滚动的文本效果 - 欢迎访问我们的网站</div>
</div>

这段代码定义了一个简单的文字滚动效果。.scroll-text-container 是一个容器，它设置了滚动的宽度和滚动的基本属性。.scroll-text 是滚动的文本，通过设置 padding-left 为 100%，文本会比容器宽度多出一倍的空间，从而实现循环滚动的效果。@keyframes scroll-left 定义了从左至右的平滑滚动动画。

- 阅读更多 -

{技术操作} element 表单验证，CSS外边距塌陷问题

System

2024-08-25

所有,css

在处理CSS外边距塌陷（Collapsing Margins）问题时，可以采用以下几种方法：

使用内部容器：在element内部创建一个额外的容器元素，并对此容器应用外边距。




<div class="element">
  <div class="inner-container">
    <!-- 内容 -->
  </div>
</div>
 
<style>
.inner-container {
  margin-top: 20px;
}
</style>

使用边框：为element添加一个边框，这样外边距就不会塌陷到相邻元素上。




.element {
  border-top: 1px solid transparent; /* 添加透明边框避免margin塌陷 */
  margin-top: 20px;
}

使用overflow: auto或overflow: hidden：这会创建一个块格式化上下文（BFC），使得外边距不会塌陷。




.element {
  overflow: auto; /* 或者使用 'hidden' */
  margin-top: 20px;
}

使用padding：通过在element添加内边距来创建可见的间隔，而不是外边距。




.element {
  padding-top: 20px;
}

使用position: absolute：绝对定位的元素不会与其他元素的外边距发生塌陷。




.element {
  position: absolute;
  margin-top: 20px;
}

选择哪种方法取决于具体的布局需求和上下文。

- 阅读更多 -