分类 css 下的文章

2024-08-07

CSS（层叠样式表）是一种用来描述网页和其他HTML文件样式的语言。CSS属性可以用来控制文本内容（如字体、大小、对齐方式等）、图片的外形（宽高、边框样式、阴影效果等）、版面布局（比如排列方式、空间分配等）、背景（颜色、图片、渐变等）等外观。

以下是一些常见的CSS属性及其简单说明：

color - 文本颜色
font-size - 字体大小
background-color - 背景颜色
background-image - 背景图片
border - 边框
padding - 内边距
margin - 外边距
width - 宽度
height - 高度
display - 显示方式（如 none 隐藏，block 显示为块级元素）
position - 定位方式（如 relative 相对定位，absolute 绝对定位）
top / right / bottom / left - 定位偏移
text-align - 文本水平对齐方式
vertical-align - 文本垂直对齐方式
font-family - 字体
font-weight - 字体粗细
text-decoration - 文本装饰（如 underline 下划线）
opacity - 透明度
z-index - 层叠顺序
filter - 滤镜效果（如 blur() 模糊效果）

CSS属性可以通过内联、内部样式表、外部样式表等方式应用到HTML文档中。

例如，设置一个元素的文本颜色为黑色，可以这样写：




p {
  color: black;
}

设置一个元素的背景图片：




div {
  background-image: url('image.jpg');
}

设置一个元素的宽度和高度：




img {
  width: 100px;
  height: 100px;
}

设置一个元素的内边距和外边距：




div {
  padding: 20px;
  margin: 10px;
}

设置一个元素的定位：




div {
  position: absolute;
  top: 50px;
  left: 100px;
}

设置一个元素的文本对齐方式：




p {
  text-align: center;
}

设置一个元素的透明度：




div {
  opacity: 0.5;
}

CSS属性是构建网页样式的基础，有了它们，开发者可以创建出丰富多样的网页布局和设计。

- 阅读更多 -

CSS响应式布局（网页如何根据不同尺寸调整状态）

System

2024-08-07

所有,css

CSS响应式布局是一种设计方法，使得网页可以在各种屏幕尺寸和设备上工作良好。实现方法是通过CSS媒体查询来应用不同的样式规则，以适应不同的屏幕宽度。

以下是一个简单的响应式布局示例：




/* 基础样式，适用于大屏幕设备 */
.container {
  width: 100%;
  margin: auto;
}
 
/* 当屏幕宽度小于或等于768像素时，调整布局 */
@media (max-width: 768px) {
  .container {
    width: 80%;
    margin: auto;
  }
}
 
/* 当屏幕宽度小于或等于480像素时，调整布局 */
@media (max-width: 480px) {
  .container {
    width: 100%;
    margin: 0;
  }
}

在这个例子中，.container 类定义了一个容器的基础样式。通过媒体查询，当屏幕尺寸减小时，.container 类的样式会相应调整，以适应不同的屏幕大小。

- 阅读更多 -

css的盒子模型，web开发框架

System

2024-08-07

所有,css

CSS盒子模型定义了如何在页面上组织和排列内容，是CSS的基础之一。它包括两部分：外边距（margin）、边框（border）、内边距（padding）和内容（content）。

基本的CSS盒子模型代码示例：




.box {
  content: "Hello, world!";
  padding: 10px;
  border: 1px solid black;
  margin: 15px;
  display: block; /* 或者其他布局属性，如flex, grid等 */
}

在实际开发中，可以使用不同的Web开发框架来简化开发流程，比如流行的框架有React、Vue、Angular等。

React的基本组件示例：




import React from 'react';
 
const Box = () => {
  return (
    <div style={{ padding: '10px', border: '1px solid black', margin: '15px' }}>
      Hello, world!
    </div>
  );
};
 
export default Box;

Vue的基本组件示例：




<template>
  <div class="box">Hello, world!</div>
</template>
 
<script>
export default {
  name: 'Box'
}
</script>
 
<style>
.box {
  padding: 10px;
  border: 1px solid black;
  margin: 15px;
}
</style>

这些示例展示了如何在Web开发框架中定义一个具有盒子模型特性的组件。

- 阅读更多 -

一文搞懂 CSS 盒子模型：概念、种类，三年老前端经验面经

System

2024-08-07

所有,css

CSS盒子模型定义了元素的宽度和高度，在网页设计中起着重要作用。盒子模型通常分为两种：标准模型和IE模型。

标准模型：宽度 = 内容宽度 + 边框宽度 + 内边距 + 外边距

高度 = 内容高度 + 边框宽度 + 内边距 + 外边距

IE模型：宽度 = 内容宽度 + 内边距 + 边框宽度

高度 = 内容高度 + 内边距 + 边框宽度

在CSS中，可以通过box-sizing属性来控制盒子模型的类型：

box-sizing: content-box：默认值，遵循标准模型
box-sizing: border-box：遵循IE模型

例如：




/* 设置元素遵循标准盒子模型 */
.element {
  width: 200px;
  padding: 10px;
  border: 5px solid;
  margin: 15px;
  box-sizing: content-box;
}
 
/* 设置元素遵循IE盒子模型 */
.element-ie {
  width: 200px;
  padding: 10px;
  border: 5px solid;
  margin: 15px;
  box-sizing: border-box;
}

在实际开发中，为了避免布局混乱，通常会统一使用标准盒子模型，并在必要时通过计算宽度和高度来适应不同的盒子模型。

- 阅读更多 -

前端之css层叠样式表一

System

2024-08-07

所有,css

CSS层叠样式表（Cascading Style Sheets, CSS）是一种用来描述HTML或XML（包括各种XML方言，如SVG，MathML等）文档样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的主要目的是确定页面元素如何展示，包括颜色、布局、字体、边距、宽度、高度等。

CSS的基本语法规则包括选择器和声明，其中每条声明由一个属性和一个值组成。

以下是一些CSS的基本使用示例：

改变文本颜色和字体：




p {
  color: red;
  font-family: Arial, sans-serif;
}

设置元素的宽度和高度：




div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

添加边框和边距：




h1 {
  border: 1px solid black;
  margin: 20px;
}

设置元素的显示类型：




span {
  display: block;
}

设置背景图片：




body {
  background-image: url('background.jpg');
}

CSS可以通过多种方式应用到HTML文档中，包括外部样式表、内部样式表和内联样式。

例如，外部样式表可以通过以下方式链接：




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

内部样式表可以直接在HTML的<head>部分编写：




<head>
  <style>
    p { color: red; }
  </style>
</head>

内联样式直接在元素的style属性中设置：




<p style="color: blue;">This is a paragraph.</p>

CSS是前端开发中一个非常重要的部分，可以实现页面的样式和布局，提高用户的体验。

- 阅读更多 -

css-img图像同比缩小

System

2024-08-07

所有,css

为了在CSS中使图像同比缩小，你可以使用width或height属性，并设置一个百分比值，或者直接设置一个具体的像素值。如果你想要图像同时在宽度和高度上同比缩小，你可以设置width和height属性为相同的百分比值，或者直接设置一个新的像素值。

以下是几种使用CSS缩小图像的方法：

使用百分比值来缩小图像：




img {
  width: 50%; /* 缩小到原来的50% */
  height: 50%; /* 同时缩小高度 */
}

使用具体的像素值来缩小图像：




img {
  width: 200px; /* 缩小到200像素宽 */
  height: 150px; /* 同时缩小到150像素高 */
}

如果你想保持图像的宽高比，只设置width或height中的一个：




img {
  width: 50%; /* 只设置宽度，高度将自动保持比例 */
}

确保你的HTML代码中有相应的<img>标签，并且已经引入了CSS。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  img {
    width: 50%; /* 或者使用具体的像素值，如：width: 200px; */
    height: auto; /* 高度自动保持比例 */
  }
</style>
</head>
<body>
  <img src="path/to/your/image.jpg" alt="Responsive Image">
</body>
</html>

在这个例子中，图像会同比缩小到原来的50%，而且高度会自动保持相应的比例。如果你设置了具体的像素值，记得同时设置height: auto以保持图像的宽高比。

- 阅读更多 -

用HTML和CSS实现提示工具（tooltip）及HTML元素的定位

System

2024-08-07

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tooltip Example</title>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 可选的下划线提示 */
  }
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
 
    /* 位置 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* 使用负的宽度来居中 */
  
    /* 动画效果 */
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
</style>
</head>
<body>
 
<p>悬停鼠标在文本上查看工具提示：
<span class="tooltip">悬停显示工具提示
  <span class="tooltiptext">工具提示文本</span>
</span>
</p>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的工具提示（tooltip）。.tooltip 类用于定义一个包含工具提示文本的元素，.tooltiptext 类用于定义工具提示的样式，并在鼠标悬停时显示。通过使用position属性和transition属性，实现了平滑的显示效果。

- 阅读更多 -

CSS-定位算法

System

2024-08-07

所有,css

CSS定位算法主要是指通过CSS属性来控制元素在页面中的位置，常用的定位属性包括position, top, right, bottom, left, 以及 z-index。

position属性：
- static：默认值，无定位。
- relative：相对定位，相对于其正常位置进行定位。
- absolute：绝对定位，相对于最近的非static定位父元素进行定位。
- fixed：固定定位，相对于浏览器窗口进行定位。
- sticky：粘性定位，根据用户的滚动位置在相对和固定定位之间切换。
top, right, bottom, left属性：
用来指定元素相对于其最近的定位父元素的偏移量。
z-index属性：
用来控制元素的堆叠顺序，值大的元素将会覆盖值小的元素。

实例代码：




/* 相对定位 */
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}
 
/* 绝对定位 */
.absolute-box {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
/* 固定定位 */
.fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
}
 
/* 粘性定位 */
.sticky-box {
  position: sticky;
  top: 0;
}

HTML结构：




<div class="relative-box">相对定位</div>
<div class="absolute-box">绝对定位</div>
<div class="fixed-box">固定定位</div>
<div class="sticky-box">粘性定位</div>

- 阅读更多 -

用CSS+SVG做一个优雅的环形进度条

System

2024-08-07

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>环形进度条示例</title>
<style>
  .circle-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
  }
 
  .circle-progress .circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 5;
  }
 
  .circle-progress .circle-progress-bar {
    fill: none;
    stroke-linecap: round;
    stroke-width: 5;
    stroke: #3498db;
    r: 45;
  }
 
  .circle-progress .circle-text {
    position: absolute;
    text-align: center;
    line-height: 1;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
<div class="circle-progress" data-progress="75">
  <svg viewBox="0 0 100 100">
    <circle class="circle-bg" r="45" cx="50" cy="50"/>
    <circle class="circle-progress-bar" r="45" cx="50" cy="50"
            stroke-dasharray="282.74" stroke-dashoffset="213.74"/>
  </svg>
  <div class="circle-text">75%</div>
</div>
 
<script>
  const circleProgress = document.querySelector('.circle-progress');
  const progressBar = circleProgress.querySelector('.circle-progress-bar');
  const progress = parseInt(circleProgress.dataset.progress, 10);
  const circumference = progressBar.r.baseVal.value * 2 * Math.PI;
  progressBar.style.strokeDashoffset = `${circumference - (progress / 100 * circumference)}`;
</script>
</body>
</html>

这段代码展示了如何使用SVG和CSS创建一个简洁的环形进度条。.circle-progress是容器，.circle-bg是进度条的背景环，.circle-progress-bar是进度条本身，.circle-text是显示进度百分比的文本。通过JavaScript动态计算进度条的stroke-dashoffset属性，实现进度条的绘制。

- 阅读更多 -

【uniapp】vue3+vite模版的uniapp引入tailwindcss

System

2024-08-07

所有,css

在uniapp项目中引入Tailwind CSS需要以下步骤：

创建或选择一个Vue3 + Vite模版的uniapp项目。
安装Tailwind CSS和postcss。
配置postcss和Tailwind。
使用Tailwind CSS类。

以下是具体步骤和示例代码：

确保你的项目是基于Vue3和Vite的uniapp项目。
安装Tailwind CSS和postcss：




npm install -D tailwindcss postcss postcss-loader autoprefixer

创建Tailwind CSS配置文件 tailwind.config.js 和 postcss.config.js：

tailwind.config.js:




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

postcss.config.js:




module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

在项目的入口文件（如 main.js 或 main.ts）中引入Tailwind CSS:




import 'tailwindcss/tailwind.css';

使用Tailwind CSS类：

在.vue文件中，可以这样使用Tailwind CSS类：




<template>
  <view class="text-center p-4 bg-blue-500 text-white">Hello Tailwind</view>
</template>

确保在实际使用时，Purge部分的配置是根据你的项目实际情况来配置的，以避免生成不必要的CSS。

以上步骤完成后，运行项目，Tailwind CSS应该已经可以正常工作了。

- 阅读更多 -