分类 css3 下的文章

2024-08-13

在Flex布局中，如果想要子div在容器中换行显示，可以将子div的flex-wrap属性设置为wrap。这样，当空间不足以容纳所有子div时，它们会自动移动到新的行或列。

以下是一个简单的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <!-- 更多的flex-item -->
</div>

CSS:




.flex-container {
  display: flex;
  flex-wrap: wrap;
}
 
.flex-item {
  width: 100px; /* 或者其他宽度 */
  height: 100px; /* 或者其他高度 */
  margin: 5px; /* 为了美观，可以添加一些外边距 */
}

在这个例子中，.flex-container是一个Flex容器，它的flex-wrap属性被设置为wrap，这意味着当Flex项目（.flex-item）无法在一行内放下时，它们会自动移动到新的一行中显示。每个.flex-item被设置了固定宽度和高度，以及一些外边距用于美观。当窗口或容器大小减小时，子div将会根据需要换行显示。

System

2024-08-13

所有,css3

要使用Flex布局实现3个div并排，两侧div宽度固定，中间div自适应，可以给包含div的父容器设置display: flex，然后给两侧的div设置固定宽度，中间的div则会自动填充剩余空间。

以下是实现这种布局的示例代码：

HTML:




<div class="container">
  <div class="side">左侧固定宽度</div>
  <div class="middle">中间自适应区域</div>
  <div class="side">右侧固定宽度</div>
</div>

CSS:




.container {
  display: flex;
}
 
.side {
  width: 200px; /* 或者你想要的固定宽度 */
  background-color: #f9f9f9; /* 仅为了视觉效果 */
}
 
.middle {
  flex-grow: 1; /* 中间div自适应 */
  background-color: #ddd; /* 仅为了视觉效果 */
}

这段代码会创建一个包含三个div的容器，两侧的div宽度固定，中间div自动填充剩余空间。

- 阅读更多 -

css两种设置透明度的方法

System

2024-08-13

所有,css3

在CSS中，设置元素的透明度有两种主要方法：

使用 opacity 属性：这个属性设置元素及其子元素的不透明级别。数值介于0（完全透明）和1（完全不透明）之间。




.element {
  opacity: 0.5; /* 50% 透明度 */
}

使用 rgba 颜色格式：在为颜色属性设置值时，可以使用RGBA格式，其中A代表Alpha通道，即透明度。




.element {
  background-color: rgba(255, 0, 0, 0.5); /* 50% 透明度的红色 */
}

opacity 影响整个元素及其所有子元素的透明度，而使用RGBA的方法可以为颜色设置透明度，而不影响子元素。

- 阅读更多 -

【css】5种方法实现div居中（自用）

System

2024-08-13

所有,css3




/* 方法1: 使用flexbox */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法2: 使用grid */
.container {
  display: grid;
  place-items: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法3: 使用绝对定位和transform */
.container {
  position: relative;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}
 
/* 方法4: 使用margin:auto */
.container {
  position: relative;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  width: 50%; /* 或者其他尺寸 */
  margin: auto;
  /* 其他样式 */
}
 
/* 方法5: 使用text-align和inline-block */
.container {
  text-align: center;
  height: 100vh; /* 使用视窗高度来保证div可以居中 */
}
 
.child {
  display: inline-block;
  width: 50%; /* 或者其他尺寸 */
  /* 其他样式 */
}

以上代码提供了5种不同的方法来实现div的水平和垂直居中。每种方法都有其适用的场景，开发者可以根据具体需求选择合适的方法。

- 阅读更多 -

CSS3-盒子模型-边距问题

System

2024-08-13

所有,css3

在CSS3中，盒子模型包括了内容区域（content）、填充区域（padding）、边框区域（border）和外边距区域（margin）。设置这些区域的大小可以通过相关的CSS属性进行控制。

如果你遇到了CSS3盒子模型中的边距问题，可能是由于以下几个原因造成的：

外边距合并（Margin Collapsing）：当两个垂直外边距相遇时，它们会合并成一个单一外边距，大小为两者中的较大者，这一现象称为外边距合并。
边框与填充不存在外边距合并：即使填充和边框也不会发生外边距合并。
使用box-sizing属性：可以通过设置box-sizing: border-box;，使元素的实际宽度/高度包含了边框和内边距，从而避免额外的计算。

下面是一个简单的例子，演示如何设置元素的边距，并尝试解决外边距合并问题：




/* 设置元素的边框和填充 */
.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 50px;
  box-sizing: border-box; /* 包含边框和内边距 */
}
 
/* 解决外边距合并问题 */
.box-no-collapse {
  margin: 50px 0; /* 上下的外边距为50px，左右保持默认 */
}




<!-- 外边距合并示例 -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>
 
<!-- 解决外边距合并示例 -->
<div class="box box-no-collapse">Box 3</div>
<div class="box box-no-collapse">Box 4</div>

在这个例子中，.box类定义了一个盒子模型，.box-no-collapse类避免了垂直方向上的外边距合并。第一组盒子（没有应用.box-no-collapse类）会出现外边距合并，而第二组盒子（应用了.box-no-collapse类）则避免了垂直外边距合并，上下方向的外边距分别为50px和0。

- 阅读更多 -

CSS Grid 网格布局详解

System

2024-08-13

所有,css3

CSS Grid 网格布局是一种强大的工具，可以用来创建复杂的布局而不需要使用多个嵌套的 HTML 元素。以下是一个简单的 CSS Grid 布局示例：




<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  gap: 10px;
}
 
.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
}
</style>
</head>
<body>
 
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>
 
</body>
</html>

这个示例中，.grid-container 类定义了一个网格容器，它有三列和两行。grid-template-columns 和 grid-template-rows 属性分别定义了网格的列宽度和行高度。gap 属性定义了网格项之间的间隙。.grid-item 类定义了网格项的样式。这个布局创建了一个有着固定列宽和行高的 6 个方格的网格。

- 阅读更多 -

如何用CSS实现响应式布局

System

2024-08-13

所有,css3

CSS响应式布局是通过媒体查询（Media Queries）来实现不同屏幕尺寸下的布局适配。你可以定义不同的样式规则，针对不同的屏幕宽度。

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




/* 基础样式 */
body {
  font-family: Arial, sans-serif;
}
 
.container {
  padding: 10px;
  margin: 0 auto;
}
 
/* 普通屏幕样式 */
.header, .content, .footer {
  background-color: #f8f8f8;
  border: 1px solid #eee;
  padding: 20px 0;
  text-align: center;
}
 
/* 当屏幕宽度小于或等于768像素时 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 20px;
  }
 
  .header, .content, .footer {
    padding: 10px 0;
  }
}
 
/* 当屏幕宽度在600像素到768像素之间时 */
@media (min-width: 600px) and (max-width: 768px) {
  .container {
    width: 90%;
  }
}
 
/* 更大屏幕的样式 */
@media (min-width: 992px) {
  .container {
    width: 80%;
  }
}
 
/* 超大屏幕的样式 */
@media (min-width: 1200px) {
  .container {
    width: 75%;
  }
}

在这个例子中，.container 类定义了页面内容区域的基础样式。媒体查询规则定义了在不同屏幕尺寸下这个区域的宽度和其他样式。例如，在屏幕宽度小于或等于768像素时，.container 的宽度设置为100%，并且内边距设置为20px。随着屏幕宽度的增加，.container 的宽度和内边距逐渐增大，直到屏幕宽度超过1200像素时，.container 的宽度被设置为75%。

- 阅读更多 -

移动WEB开发flex布局

System

2024-08-13

所有,css3

Flex布局是CSS3中的一种新布局模式，它允许开发者通过简单的CSS属性来控制容器内部组件的排列方式。在移动Web开发中，Flex布局非常实用，因为它可以使应用程序在不同的屏幕尺寸和设备上保持一致的布局。

以下是一个简单的Flex布局示例，它将创建一个水平居中的容器，其中包含三个等宽的子元素：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 使用Flex布局 */
  justify-content: center; /* 水平居中 */
}
 
.flex-item {
  width: 100px; /* 子元素宽度 */
  height: 100px; /* 子元素高度 */
  margin: 5px; /* 子元素间距 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex 属性来指定这个容器使用Flex布局。.flex-item 类定义了子元素的宽度、高度和外边距。justify-content: center 则使得所有子元素在容器中水平居中。

2024-08-13

以下是一个使用纯CSS3实现的水波纹从中心向四周扩散的动画示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Wave Ripple Animation</title>
<style>
  .wave {
    width: 200px;
    height: 200px;
    background: #f0f0f0;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }
 
  .wave::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: rgba(0, 0, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 5s infinite linear;
  }
 
  @keyframes ripple {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }
</style>
</head>
<body>
<div class="wave"></div>
</body>
</html>

这段代码中，.wave 类用于创建一个圆形的容器，.wave::before 伪元素用于创建水波纹的效果。@keyframes ripple 定义了水波纹的动画，从初始的无显示（透明度为0），到水波纹最大（透明度为1）。这个动画是无限循环的，并且以线性的速度进行。

- 阅读更多 -

css3新增属性

System

2024-08-13

所有,css3

CSS3 是最新的 CSS 标准，它引入了许多新特性和改进，以下是一些常见的 CSS3 新增属性：

圆角（border-radius）




div {
  border-radius: 10px;
}

阴影（box-shadow）




div {
  box-shadow: 5px 5px 10px #888888;
}

渐变（gradient）




div {
  background: linear-gradient(to right, red, yellow);
}

变换（transform）




div:hover {
  transform: rotate(360deg);
}

动画（animation）




@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}

多列布局（multi-column layout）




div {
  column-count: 3;
}

用户界面（UI）




input[type="range"] {
  -webkit-appearance: none;
  background: #333;
  height: 10px;
}

2D/3D转换（transform）




div {
  transform: translate(50px, 100px) rotate(360deg) scale(1.5);
}

过渡效果（transition）




div:hover {
  transition: all 0.3s ease-in-out;
}

文字效果（text-effects）




div {
  text-shadow: 2px 2px 2px #888888;
}

这些只是 CSS3 新特性中的一部分，还有许多其他的特性，如伪元素（::before, ::after）、媒体查询（@media）、字体图标（@font-face）等。

- 阅读更多 -