标签 css 下的文章

2024-08-22

CSS的弹性布局（Flexible Layout）是一种现代化的布局方式，可以简便高效地处理容器内部元素的排列、对齐和分配空间。

以下是一个简单的弹性布局的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex; /* 设定为弹性布局 */
  flex-direction: row; /* 设定主轴方向为水平方向 */
  justify-content: space-around; /* 设定项目沿主轴分布的方式 */
  align-items: center; /* 设定项目沿交叉轴分布的方式 */
  height: 100px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

这段代码会创建一个高度为100px的容器，其中包含三个水平排列的项目，每个项目都有自己的背景色和文字，并且这三个项目会平均分布在容器中，两边有些距离。

- 阅读更多 -

第05章 CSS 定位布局

System

2024-08-22

所有,css

CSS 定位布局主要是通过 position 属性来实现的，它有以下几个值：

static：默认值，没有定位。
relative：相对定位，相对于其正常位置进行定位。
absolute：绝对定位，相对于最近的非 static 定位的祖先元素进行定位。
fixed：固定定位，相对于浏览器窗口进行定位。
sticky：粘性定位，根据用户的滚动位置在相对和固定定位之间切换。

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  .relative {
    position: relative;
    left: 30px;
    top: 20px;
  }
  
  .absolute {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
  
  .fixed {
    position: fixed;
    left: 50px;
    top: 50px;
  }
  
  .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0; /* 粘性定位的位置 */
    background-color: yellow; /* 粘性定位的背景颜色 */
    border: 2px solid black; /* 边框 */
    padding: 50px; /* 内边距 */
    font-size: 20px; /* 字体大小 */
  }
</style>
</head>
<body>
 
<p>相对定位:</p>
<div class="relative">我是相对定位的元素。</div>
 
<p>绝对定位:</p>
<div class="absolute">我是绝对定位的元素。</div>
 
<p>固定定位:</p>
<div class="fixed">我是固定定位的元素。</div>
 
<p>粘性定位:</p>
<div class="sticky">我是粘性定位的元素。</div>
 
</body>
</html>

在这个例子中，我们创建了四个 div 元素，每个元素都应用了不同的定位方式。其中，sticky 类用于演示粘性定位，当用户滚动页面时，该元素会根据用户的滚动位置在相对和固定定位之间切换。其余三个类展示了常规的定位用法。

- 阅读更多 -

[CSS]了解REM移动端适配方案，给后辈的一点建议

System

2024-08-22

所有,css

REM是一种CSS单位，相对于根元素(即html元素)的字体大小。这使得REM适配方案在移动端适配上有很大的优势。

以下是一个基本的REM适配方案：

设置HTML的根字体大小。
使用媒体查询来根据屏幕宽度调整根字体大小。
使用REM单位来设置元素的宽度、高度、字体大小等。

示例代码：




html {
    font-size: 16px; /* 默认根字体大小 */
}
 
@media (min-width: 400px) {
    html {
        font-size: 20px; /* 当屏幕宽度至少为400px时，根字体大小调整为20px */
    }
}
 
/* 使用REM设置元素大小 */
.element {
    width: 10rem;   /* 相当于10*根字体大小 */
    height: 5rem;   /* 相当于5*根字体大小 */
    font-size: 1.5rem; /* 相当于1.5*根字体大小 */
}

这样，不同屏幕大小的设备都可以通过调整根字体大小来实现适配，保证了元素的尺寸和字体大小都能正常显示。

- 阅读更多 -

css实现鼠标悬停时元素的显示与隐藏

System

2024-08-22

所有,css

在CSS中，可以使用:hover伪类选择器来实现鼠标悬停时元素的显示与隐藏。这通常结合使用display属性或visibility属性来完成。

使用display属性，可以设置none来隐藏元素，设置block、inline或inline-block等来显示元素。

使用visibility属性，可以设置hidden来隐藏元素，但保留其在页面上的空间，设置visible来显示元素。

以下是一个使用display属性实现的示例：

HTML:




<div class="container">
  鼠标悬停我试试
  <div class="hover-content">
    我是要显示的内容
  </div>
</div>

CSS:




/* 初始状态下内容是隐藏的 */
.hover-content {
  display: none;
}
 
/* 当鼠标悬停在父容器上时，显示内容 */
.container:hover .hover-content {
  display: block;
}

以下是使用visibility属性实现的示例：

HTML:




<div class="container">
  鼠标悬停我试试
  <div class="hover-content">
    我是要显示的内容
  </div>
</div>

CSS:




/* 初始状态下内容是隐藏的 */
.hover-content {
  visibility: hidden;
}
 
/* 当鼠标悬停在父容器上时，显示内容 */
.container:hover .hover-content {
  visibility: visible;
}

在这两个示例中，.hover-content元素默认是隐藏的。当鼠标悬停在.container元素上时，.hover-content元素的显示状态会根据选择的属性进行切换。

- 阅读更多 -

使用HTML CSS制作静态网站【中秋节】

System

2024-08-22

所有,css

以下是一个简单的HTML和CSS代码示例，用于创建一个展示中秋节元素的静态网页。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中秋节页面</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fde6e6;
            font-family: Arial, sans-serif;
        }
        .moon {
            width: 200px;
            height: 200px;
            background-color: #fde6e6;
            border-radius: 50%;
            position: relative;
            box-shadow: 0 0 20px #cac5c5;
            z-index: 10;
        }
        .moon::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: #fde6e6;
            border-radius: 50%;
            box-shadow: 0 0 20px #cac5c5;
            z-index: -1;
        }
        .moon::after {
            content: '';
            position: absolute;
            bottom: 10%;
            right: 10%;
            width: 60px;
            height: 60px;
            background-color: #fde6e6;
            border-radius: 50%;
            box-shadow: 0 0 20px #cac5c5;
        }
        h1 {
            color: #5a3939;
            font-size: 5em;
            text-align: center;
            margin-bottom: 20px;
        }
        p {
            color: #5a3939;
            font-size: 1.5em;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="moon"></div>
    <h1>中秋节快乐!</h1>
    <p>月亮照耀美好的一天。</p>
</body>
</html>

这段代码展示了如何使用CSS创建一个简单的中秋节页面背景，包括一个圆形的月亮图案，以及中秋节的祝福文字。这个示例简单易懂，适合作为学习HTML和CSS的入门级教程。

System

2024-08-22

所有,css

在Nuxt 3项目中，如果你在Vite配置中全局引入了CSS文件，并发现页面中有大量的内联样式，这通常是因为CSS在JavaScript中被处理成了字符串。这是Vite的预处理样式方式，它将样式文件视为模块，并在构建时将它们内联到JavaScript chunk中。

要解决这个问题，你可以采取以下步骤：

确保你的CSS文件是以正确的方式导入的。通常，你应该在vite.config.ts中使用css.preprocessorOptions.additionalData来全局导入你的CSS文件。
如果你不需要在JavaScript中导入样式，可以在CSS文件的顶部添加注释/*! no-inject */来告诉Vite不要将这个文件视为模块。
如果你需要在JavaScript中使用样式变量，考虑使用CSS-in-JS库，如styled-components或emotion，这样样式就可以保持在JS模块中，而不会产生额外的内联样式。

下面是一个示例配置，演示如何在vite.config.ts中全局引入CSS文件：




// vite.config.ts
import { defineConfig } from 'vite'
import css from 'vite-plugin-css'
 
export default defineConfig({
  plugins: [css({
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./path/to/your/global.scss";`
      }
    }
  })],
  // 其他配置...
})

在你的global.scss文件中，确保有注释/*! no-inject */：




/*! no-inject */
@import "./base.scss";
@import "./layout.scss";
// 其他全局样式...

这样配置后，Vite应该不会将这些样式文件当作模块处理，从而避免产生大量的内联样式。

- 阅读更多 -

UI自动化-(web端元素定位CSS实操入门)

System

2024-08-22

所有,css

在Web自动化测试中，使用CSS选择器定位页面元素是一种常见的方法。以下是一个使用Python和Selenium库定位Web页面元素的简单示例：

首先，确保你已经安装了Selenium库和对应的WebDriver。




from selenium import webdriver
 
# 启动浏览器驱动
driver = webdriver.Chrome()
 
# 打开网页
driver.get('http://example.com')
 
# 定位元素
element = driver.find_element_by_css_selector('#loginForm input[type="text"]')
 
# 输入文本
element.send_keys('username')
 
# 关闭浏览器驱动
driver.quit()

在这个例子中，我们使用了find_element_by_css_selector方法来定位ID为loginForm的表单中类型为text的输入框。CSS选择器#loginForm input[type="text"]表示选择ID为loginForm的元素内部的所有<input>标签，且这些标签的type属性值为text。

这只是CSS定位的一个简单入门示例，实际应用中CSS选择器可能会更加复杂，用以定位页面上更深层次的元素。

- 阅读更多 -

CSS移动端适配方案，渣本大数据开发开发小伙如何一步步成为架构师

System

2024-08-22

所有,css

要解决移动端适配问题，可以使用以下方法：

响应式设计：使用CSS媒体查询来根据屏幕宽度应用不同的样式规则。




/* 标准浏览器 */
@media screen and (max-width: 960px) {
    body {
        background-color: blue;
    }
}
 
/* iPhone 5/SE */
@media screen and (max-width: 320px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        background-color: red;
    }
}

使用百分比或者视口单位：让元素宽度根据父容器的宽度来定，或者使用vw（视口宽度）和vh（视口高度）单位。




.container {
    width: 80%; /* 相对于父容器的百分比宽度 */
}
 
.full-width {
    width: 100vw; /* 视口宽度 */
}

使用flexbox布局：灵活的布局模型，可以使元素在不同屏幕大小下有更好的伸缩性。




.flex-container {
    display: flex;
}
 
.flex-item {
    flex: 1; /* 可以使元素平均分配空间 */
}

使用Grid布局：更强大的布局模型，可以创建复杂的网格布局。




.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

字体大小的缩放：使用rem单位或vw单位来控制字体大小，这样可以保持文字的可读性。




body {
    font-size: 2vw; /* 字体大小随视口宽度变化 */
}

使用CSS预处理器（如Sass/LESS）：可以使用变量、函数等特性来提高代码的可维护性和重用性。




$base-font-size: 16px;
 
body {
    font-size: $base-font-size;
}

使用CSS框架：例如Bootstrap、Foundation等，这些框架提供了预定义的类和响应式布局功能。
图片响应式：使用max-width和height属性自动缩放图片，不失真。




img {
    max-width: 100%;
    height: auto;
}

使用Viewport元标签：确保网站在移动端上正确显示。




<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用Web字体时进行限制：为了避免移动设备因网络问题加载缓慢，可以限制Web字体的使用。




@font-face {
    font-family: 'CustomFont';
    src: url('customfont.woff2') format('woff2');
    font-display: swap; /* 在字体下载期间使用系统字体 */
}

以上是一些基本的移动端适配策略，实际项目中可能还需要考虑其他因素，如LightHouse性能优化、使用Web Workers分离耗时的JavaScript任务等。

- 阅读更多 -

CSS提高篇（复合选择器）

System

2024-08-22

所有,css

复合选择器是CSS中用来选择特定元素组合的规则。有几种不同类型的复合选择器，包括交集选择器、并集选择器和子选择器等。

交集选择器（Adjacent Selector）

交集选择器是由两个选择器直接连接构成，其中第一个选择器选取的元素与第二个选择器选取的元素必须是紧邻的兄弟元素。

例如：




p + div {
  color: red;
}

这段代码会选择每一个紧跟在 <p> 元素后的 <div> 元素，并将它们的颜色设置为红色。

并集选择器（Selector List）

并集选择器是由逻辑“或”操作符分隔的一组选择器，任何一个选择器可以选取元素。

例如：




div, p, span {
  color: blue;
}

这段代码会选取所有 <div>, <p>, 和 <span> 元素，并将它们的颜色设置为蓝色。

子选择器（Child Selector）

子选择器用于选取指定父元素的子元素。

例如：




div > p {
  color: green;
}

这段代码会选取所有 <div> 元素的直接子元素 <p>，并将它们的颜色设置为绿色。

后代选择器（Descendant Selector）

后代选择器用于选取指定父元素的后代（子元素，子元素的子元素，以此类推）。

例如：




div p {
  color: purple;
}

这段代码会选取所有 <div> 元素的 <p> 后代，并将它们的颜色设置为紫色。

相邻后代选择器（Adjacent Sibling Selector）

相邻后代选择器用于选取指定父元素的相邻子元素。

例如：




div + p {
  color: orange;
}

这段代码会选取每个紧跟在 <div> 元素后的 <p> 元素，并将它们的颜色设置为橙色。

通用选择器（Universal Selector）

通用选择器用于选取所有元素。

例如：




* {
  margin: 0;
  padding: 0;
}

这段代码会选取所有元素，并将它们的上下边距设置为0，左右边距也设置为0。

- 阅读更多 -

CSS整理总结2

System

2024-08-22

所有,css




/* 设置元素的基本字体和背景样式 */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f8f8f8;
  color: #333;
  line-height: 1.4; /* 设置行高以保持良好的可读性 */
}
 
/* 设置链接的默认颜色和鼠标悬停时的颜色 */
a {
  color: #08c;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
 
/* 设置标题的样式 */
h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -1px;
  margin-top: 0;
  padding: 0;
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
h1 {
  font-size: 3em;
  text-align: center;
}
h2 {
  font-size: 1.2em;
}
 
/* 设置段落元素的样式 */
p {
  margin: 0 0 1.4em 0;
}
 
/* 设置列表元素的样式 */
ul, ol {
  padding-left: 2em;
  margin: 0;
}

这个代码实例展示了如何设置网页的基本字体、背景色和链接样式，以及如何设置标题和段落元素的样式。同时，它还展示了如何使用text-rendering属性来优化可读性。这些基本样式为构建一个有组织的和可读的网页布局奠定了基础。

- 阅读更多 -