分类 css3 下的文章

2024-08-09

REM是CSS3中引入的一种长度单位，它是相对于根元素（即html元素）的字体大小。使用REM单位可以实现响应式布局，使得页面元素的大小随着根元素字体大小的变化而变化，从而提供一种灵活的方式来进行布局设计。

以下是一个简单的CSS示例，演示如何使用REM单位来设置元素的大小：




html {
    font-size: 16px; /* 假设浏览器默认字体大小是16px */
}
 
/* 使用REM单位设置元素宽度和高度 */
.element {
    width: 4rem;   /* 计算为 4 * 16px = 64px */
    height: 3rem;  /* 计算为 3 * 16px = 48px */
}
 
/* 使用媒体查询来调整根元素字体大小，实现响应式设计 */
@media (min-width: 768px) {
    html {
        font-size: 20px; /* 当屏幕宽度大于768px时，字体大小增加到20px */
    }
}

通过以上代码，.element类的宽度和高度会随着屏幕宽度的变化而变化，因为根元素的字体大小也会随之变化。当屏幕宽度超过768像素时，根元素的字体大小会增加到20px，.element的REM单位尺寸也会相应增大，从而保持相对宽度不变。这种方式使得页面布局能够适应不同屏幕大小和设备。

- 阅读更多 -

position:absolute实现水平居中

System

2024-08-09

所有,css3

要使用position: absolute实现元素的水平居中，你需要设置元素的左右margin为auto，并给定一个固定的宽度。此外，其父元素需要是相对定位(position: relative)，以确保绝对定位的参照是父元素而不是整个页面。

以下是实现水平居中的CSS代码：




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  width: 200px; /* 你需要给定一个宽度 */
  left: 50%;
  margin-left: -100px; /* 宽度的一半 */
}

HTML结构：




<div class="parent">
  <div class="child">
    水平居中的内容
  </div>
</div>

这样.child元素就会在.parent元素内水平居中显示。

- 阅读更多 -

【CSS】CSS选择器全解指南【CSS基础知识详解】

System

2024-08-09

所有,css3

CSS 选择器是用来指定样式规则应用于哪些元素的模式。CSS选择器有多种类型，包括基础的元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器等。

元素选择器：选择特定的HTML标签元素。




p { color: blue; }

类选择器：选择具有特定类的HTML元素。




.my-class { color: red; }

ID选择器：选择具有特定ID的HTML元素。




#my-id { color: green; }

属性选择器：选择包含特定属性的HTML元素。




input[type="text"] { background-color: yellow; }

伪类选择器：选择特定状态的HTML元素。




a:hover { color: purple; }

伪元素选择器：选择HTML元素的特定部分。




p::first-letter { font-size: 200%; }

组合选择器：结合多个选择器以选择更具体的元素。




div.container > p { border: 1px solid black; }

通配选择器：选择所有元素。




* { margin: 0; padding: 0; }

子选择器：选择直接子元素。




div > p { color: orange; }

相邻选择器：选择紧跟在另一个元素后的元素。




h1 + p { margin-top: 0; }

后代选择器：选择特定元素内的后代元素。




div p { text-indent: 2em; }

分组选择器：同时选择多个元素。




h1, h2, h3 { font-family: 'Arial Black'; }

伪元素选择器：选择元素的特定部分。




p::first-letter { font-size: 200%; }

否定选择器：选择不满足条件的元素。




:not(p) { color: grey; }

伪类选择器（伪类选择器与之前的伪类选择器略有不同，主要用于链接）：




a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

CSS选择器是CSS的核心部分，它决定了样式规则应用于哪些元素。了解和使用这些选择器是每个前端开发者必备的技能。

- 阅读更多 -

用css画一个三角形

System

2024-08-09

所有,css3

使用border属性：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

该方法通过设置元素的宽度和高度，并通过border属性画出三角形，其中border-left和border-right用于确定横向的底边长，border-bottom用于确定纵向的高。

使用transform属性：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

该方法与第一种方法类似，通过设置元素的宽度和高度，并通过border属性画出三角形，但是通过transform的rotate属性对元素进行旋转，使得实际显示为一个三角形。

使用伪元素：




.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}
 
.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: transparent red;
}

该方法通过添加一个伪元素(::before)来画出三角形，通过设置伪元素的边框宽度和样式，以及边框颜色来构造三角形。

以上是三种常见的使用CSS画三角形的方法，它们都可以很好地实现画出三角形的效果。

- 阅读更多 -

textarea利用css属性去掉右下角的小三角

System

2024-08-09

所有,css3

要通过CSS属性去掉textarea的右下角小三角，可以使用resize属性并将其设置为none。这样，用户就无法调整textarea的大小了。

下面是实现这一功能的CSS代码：




textarea {
  resize: none;
}

将上述CSS添加到您的样式表中，然后应用到相应的textarea元素上即可。例如：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Resize Example</title>
<style>
  textarea {
    resize: none;
  }
</style>
</head>
<body>
  <textarea rows="4" cols="50">这是一个不可调整大小的文本区域。</textarea>
</body>
</html>

在这个例子中，textarea元素将不会显示右下角的小三角，用户无法调整其大小。

- 阅读更多 -

Vue3新属性 — css中使用v-bind（v-bind in css）

System

2024-08-09

所有,css3

在Vue 3中，你可以使用内联样式或者CSS绑定来动态地改变元素的CSS属性。这里有一个例子，展示了如何在Vue 3中使用v-bind绑定一个CSS属性：




<template>
  <div>
    <div :style="{ color: dynamicColor }">这是一段文本</div>
    <button @click="changeColor">改变颜色</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const dynamicColor = ref('red');
 
    function changeColor() {
      dynamicColor.value = dynamicColor.value === 'red' ? 'blue' : 'red';
    }
 
    return { dynamicColor, changeColor };
  }
};
</script>

在这个例子中，我们创建了一个名为dynamicColor的响应式引用，并通过v-bind将其绑定到div元素的style属性上。当点击按钮时，changeColor函数会被触发，从而改变dynamicColor的值，进而更新元素的颜色。

- 阅读更多 -

css3单行省略和多行省略

System

2024-08-09

所有,css3

CSS3中实现文本单行省略和多行省略的方法是使用text-overflow属性配合其他属性。

单行省略：




.single-line-ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出容器部分的文本隐藏 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
}

多行省略需要使用-webkit-line-clamp属性，该属性是一个不是标准的CSS属性，它需要配合display: -webkit-box和-webkit-box-orient: vertical使用。

多行省略（例如显示3行）：




.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直方向的子元素排列 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  overflow: hidden; /* 超出容器部分的文本隐藏 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
}

注意：-webkit-line-clamp属性是一个不是标准的属性，它在非WebKit浏览器中可能不会生效。以上代码主要适用于WebKit内核的浏览器，例如Chrome、Safari等。

- 阅读更多 -

Vue3 + Vite + Css3切换主题

System

2024-08-09

所有,css3




<template>
  <div class="theme-switcher">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const theme = ref('light');
 
function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
  document.body.classList.toggle('theme-light', theme.value === 'light');
  document.body.classList.toggle('theme-dark', theme.value === 'dark');
}
</script>
 
<style>
.theme-light {
  background-color: #fff;
  color: #000;
}
 
.theme-dark {
  background-color: #000;
  color: #fff;
}
</style>

这个简单的Vue 3组件使用Vite创建，包含一个按钮来切换主题。点击按钮时，会更新页面的主题类，从而切换背景和文字颜色。这个例子展示了如何使用Vue 3的<script setup>语法糖以及Vite开箱即用的热重载功能。

- 阅读更多 -

前端01-css3-flex布局

System

2024-08-09

所有,css3

在CSS中，Flexbox布局提供了一种更为有效的方式来对容器内的项目进行排列、对齐和分配空间。Flexbox可以使容器内的项目能够在任何方向上动态扩展和收缩，以最佳方式填充可用空间。

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

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布局 */
  flex-direction: row; /* 设置主轴方向为水平方向 */
  justify-content: space-around; /* 项目在主轴方向上平均分布 */
  align-items: center; /* 项目在交叉轴方向上居中 */
  height: 200px; /* 容器高度 */
  background-color: lightblue; /* 背景颜色 */
}
 
.flex-item {
  margin: 5px; /* 项目间距 */
  padding: 10px; /* 项目内填充 */
  background-color: coral; /* 项目背景颜色 */
  color: white; /* 项目文字颜色 */
  font-size: 16px; /* 项目文字大小 */
}

在这个例子中，.flex-container 类使用了 display: flex 属性来指定这个div是一个Flex容器。flex-direction 属性设置了主轴的方向（row为水平，column为垂直），justify-content 属性设置了项目在主轴方向上的对齐方式（这里是平均分布），align-items 属性设置了项目在交叉轴方向上的对齐方式（居中）。.flex-item 类则是对Flex容器内的每个项目进行样式设置。

- 阅读更多 -

使用CSS3实现围绕圆心旋转

System

2024-08-09

所有,css3

要使用CSS3实现元素围绕圆心旋转，可以使用transform属性中的rotate函数。以下是一个简单的例子，演示了如何让一个元素围绕它自己的中心旋转。

HTML:




<div class="rotating-element"></div>

CSS:




.rotating-element {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px;
  animation: rotate 2s infinite linear;
}
 
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

在这个例子中，.rotating-element是需要旋转的元素。animation属性定义了一个名为rotate的关键帧动画，该动画会使元素持续地旋转360度，每次旋转时间为2秒，并且无限循环。linear关键字确保旋转速度是均匀的。

- 阅读更多 -