分类 css 下的文章

一文搞懂 CSS Flexbox 布局 - 2024年最新版，2024年五面蚂蚁

2024-08-06

CSS Flexbox（弹性盒子）是一种现代化的布局模型，主要用于在不同尺寸的屏幕上提供一致的用户体验。Flexbox 提供了一种更简单的方法来创建灵活的布局，无论是列或行方向，都可以很好地进行调整。

以下是一个简单的Flexbox布局示例，它将创建一个水平排列的项目列表：




.container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中所有子元素 */
  align-items: center; /* 垂直居中所有子元素 */
}
 
.item {
  margin: 5px; /* 设置元素之间的间隔 */
  padding: 10px; /* 设置元素内部间隔 */
  background-color: #f0f0f0; /* 设置背景色 */
}




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

在这个例子中，.container 类使用 display: flex; 属性来指定使用 Flexbox 布局。.item 类则用于定义子元素的样式。justify-content 和 align-items 属性分别用于控制水平和垂直对齐方式。

Flexbox 还提供了很多其他的属性，如 flex-direction 来控制布局的方向（列或行），flex-wrap 来处理项目在空间不足时的换行情况，以及 flex-grow, flex-shrink, 和 flex-basis 来控制项目的伸缩行为等。

System

2024-08-06

所有,css

在这个例子中，我们创建了一个简单的新浪微博登录页面。以下是HTML和CSS代码的核心部分：




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新浪微博登录</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <img src="sina-logo.png" alt="新浪微博logo">
        </div>
        <form class="login-form">
            <div class="input-group">
                <input type="text" required placeholder="手机号/邮箱">
            </div>
            <div class="input-group">
                <input type="password" required placeholder="密码">
            </div>
            <button type="submit">登录</button>
        </form>
        <div class="login-footer">
            <a href="#">忘记密码？</a>
            <a href="#" class="register-link">立即注册</a>
        </div>
    </div>
</body>
</html>

CSS (style.css):




body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
 
.login-container {
    width: 360px;
    margin: 120px auto 0;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
 
.login-header {
    margin-bottom: 30px;
    text-align: center;
}
 
.login-header img {
    width: 100px;
    height: 100px;
}
 
.login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
 
.login-form input[type="text"] {
    height: 40px;
}
 
.login-form input[type="password"] {
    height: 45px;
}
 
.login-form button {
    width: 100%;
    padding: 10px;
    background-color: #0078e7;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
 
.login-footer {
    text-align: center;
    margin-top: 20px;
}
 
.login-footer a {
    color: #0078e7;
    text-decoration: none;
}
 
.login-footer a.register-link {
    float: right;
}

这个例子展示了如何使用HTML和CSS创建一个简单的登录表单页面。其中包含了表单元素的创建、布局的设计和样式的应用。这是学习Web前端开发的基础知识。

- 阅读更多 -

vue项目中使用scss

System

2024-08-06

所有,css

在Vue项目中使用SCSS，首先需要确保你的项目支持SCSS。大多数现代Vue项目模板已经内置了对SCSS的支持。

安装依赖：
确保你已经安装了node-sass或sass-loader以及webpack。




npm install --save-dev sass-loader node-sass webpack

在Vue组件中使用SCSS：




<template>
  <div class="example">
    <p>This is a paragraph with SCSS styling.</p>
  </div>
</template>
 
<script>
export default {
  name: 'ExampleComponent'
}
</script>
 
<style lang="scss">
.example {
  p {
    color: blue;
    font-size: 16px;
  }
}
</style>

配置Vue CLI项目中的vue.config.js（如果需要）：

如果你的项目是通过Vue CLI创建的，并且你需要对默认配置进行修改，你可以添加或修改vue.config.js文件。




// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  }
};

这样配置后，你就可以在Vue组件的<style>标签中使用SCSS了。

- 阅读更多 -

css实现图片自适应容器的几种方式_css&lt；img&gt；大小自适应

System

2024-08-06

所有,css

在CSS中，要实现图片自适应容器，可以使用多种方法，以下是几种常用的方法：

使用 max-width 和 max-height 属性：




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

使用 object-fit 属性：




img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪并覆盖 */
  /* 或者使用 */
  object-fit: contain; /* 缩放以包含 */
}

使用 background-image 属性：




div {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

使用 padding-top 或 padding-bottom 百分比：




div {
  width: 300px;
  position: relative;
}
 
div::before {
  content: '';
  display: block;
  padding-top: 100%; /* 使得div的padding-top等于其width */
}
 
img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以上方法可以根据具体需求选择使用。

- 阅读更多 -

让图片适应标签的CSS object-fit属性

System

2024-08-06

所有,css

object-fit 属性用于指定可替换元素（例如 <img> 或 <video>）的内容应该如何适应容器的尺寸。以下是几种常见的 object-fit 值及其作用：

fill：默认值。拉伸图片以填满容器，可能会改变图片的比例。
contain：保持图片的原始比例，缩放图片以适合容器内部，完全包含在容器内。
cover：保持图片的原始比例，缩放图片以覆盖容器，可能会超出容器边界。
none：不改变图片大小，图片可能会溢出容器。
scale-down：效果跟 none 或 contain 中较小的那个相同。

如果你想让图片适应标签的大小，你可以在 CSS 中这样写：




.my-image {
  width: 100%; /* 让图片宽度适应容器的宽度 */
  height: auto; /* 高度自动，确保不会失真 */
  object-fit: contain; /* 或者其他你需要的值 */
}

然后在 HTML 中使用这个类：




<img src="path/to/image.jpg" alt="描述" class="my-image">

这样图片就会根据标签的大小和 object-fit 的值来显示了。

- 阅读更多 -

最新【CSS】CSS字体样式【CSS基础知识详解】

System

2024-08-06

所有,css

在CSS中，我们可以使用font-family属性来定义文本的字体系列。CSS还允许我们为字体指定备用字体，以防首选字体不可用。

解决方案1：




p {
  font-family: "Helvetica", "Arial", sans-serif;
}

在上述代码中，我们首先指定了Helvetica作为段落文本的字体。如果Helvetica字体不可用，则浏览器会尝试使用Arial，如果Arial也不可用，则会使用计算机的默认无衬线字体。

解决方案2：




body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

在这个例子中，我们将Georgia设置为页面主体的默认字体。如果Georgia不可用，浏览器将尝试"Times New Roman"，然后是Times，最后是衬线字体。

解决方案3：




h1 {
  font-family: "Open Sans", Verdana, sans-serif;
}

在这个例子中，我们将Open Sans设置为h1元素的字体。如果Open Sans不可用，浏览器将尝试Verdana，然后是无衬线字体。

解决方案4：




code {
  font-family: "Courier New", Courier, monospace;
}

在这个例子中，我们将Courier New设置为代码元素的字体。如果Courier New不可用，浏览器将尝试Courier，然后是等宽字体。

注意：

当你在font-family属性中列出多个字体时，浏览器会使用第一个识别的字体。
如果字体名称包含空格，则必须用引号括起来。
最后，你应该总是在font-family属性的列表中包含一个通用字体族。

以上就是CSS中关于字体样式的基础知识。

- 阅读更多 -

css文本溢出处理——单行、多行

System

2024-08-06

所有,css

在CSS中，处理文本溢出可以使用以下属性：

white-space：控制如何处理元素内的空白。
overflow：指定如何处理溢出容器的内容。
text-overflow：指定如何显示被截断的文本。

对于单行文本溢出处理：




.single-line-ellipsis {
  white-space: nowrap; /* 保证文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}

对于多行文本溢出处理：




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

注意：多行文本溢出处理的-webkit-line-clamp属性是非标准属性，但在大多数现代浏览器中得到支持。

- 阅读更多 -

前端 CSS 经典：省略号

System

2024-08-06

所有,css

在CSS中，我们可以使用text-overflow属性来实现文本的省略号效果。这通常用于处理长字符串或者长单词，当内容超出其容器的宽度时，可以在末尾显示省略号。

解决方案1：单行文本省略号




.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




<div class="ellipsis">This is a long text that will be truncated with an ellipsis</div>

在上述代码中，如果文本宽度超出其父元素的宽度，则会在末尾显示省略号。

解决方案2：多行文本省略号




.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* number of lines to show */
  overflow: hidden;
  text-overflow: ellipsis;
}




<div class="ellipsis-multiline">This is a long text that will be truncated with an ellipsis after three lines</div>

在上述代码中，如果文本的行数超出了设置的值，那么超出的文本将会在末尾显示省略号。注意，这种方法在非webkit内核的浏览器中可能不适用。

解决方案3：使用JavaScript实现省略号

如果你需要更多的灵活性，你可以使用JavaScript来实现省略号。下面是一个简单的例子：




function addEllipsis(element, maxLength, appendToEnd = true) {
  const text = element.textContent;
  if(text.length > maxLength) {
    const trimmedText = text.substr(0, maxLength) + '...';
    element.textContent = appendToEnd ? trimmedText : '...' + trimmedText;
  }
}
 
const myElement = document.getElementById('myElement');
addEllipsis(myElement, 5);

在这个例子中，我们定义了一个函数，它接受一个元素，一个最大长度和一个布尔值，该布尔值决定省略号是添加到开头还是结尾。如果元素的文本长度超过了最大长度，那么就会在开头或结尾添加省略号。

注意：这些解决方案都需要你的元素有固定的宽度或高度，否则文本可能不会被截断。如果你的元素宽度或高度是动态的，你可能需要使用JavaScript来动态地设置宽度或高度，以确保文本可以正确地被截断。

- 阅读更多 -

3种CSS实现背景图片全屏铺满自适应的方式

System

2024-08-06

所有,css




/* 方法1: 使用CSS3的background-size属性 */
body {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
 
/* 方法2: 使用背景图片作为HTML元素，并利用CSS的filter属性进行模糊效果 */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(5px);
}
 
/* 方法3: 使用伪元素来实现全屏背景图片 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

这段代码展示了三种不同的方法来实现背景图片全屏铺满且自适应。第一种方法使用了background-size属性的cover值，确保背景图片覆盖整个元素并且保持其宽高比。第二种方法通过创建一个模糊的背景层，并设置其pointer-events属性为none来实现背景图片的全屏显示。第三种方法则是使用::after伪元素来创建一个全屏的背景图层。每种方法都有其特点，可以根据实际需求选择合适的方式实现背景效果。

- 阅读更多 -

使用 CSS 实现多立方体悬停颜色效果实现

System

2024-08-06

所有,css

以下是一个使用CSS实现的简单的多立方体悬停颜色变化的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube Hover Effect</title>
<style>
  .cube {
    width: 150px;
    height: 150px;
    background-color: #555;
    margin: 50px;
    float: left;
    transition: 0.3s;
  }
 
  .cube:hover {
    background-color: #333;
    cursor: pointer;
  }
 
  .cube1 {
    transform: translateZ(75px);
  }
 
  .cube2 {
    transform: rotateX(90deg) translateZ(75px);
  }
 
  .cube3 {
    transform: rotateY(90deg) translateZ(75px);
  }
 
  .cube4 {
    transform: rotateX(90deg) rotateY(90deg) translateZ(75px);
  }
 
  .cube5 {
    transform: rotateX(-90deg) translateZ(75px);
  }
 
  .cube6 {
    transform: rotateY(-90deg) translateZ(75px);
  }
 
  .cube7 {
    transform: rotateX(-90deg) rotateY(-90deg) translateZ(75px);
  }
</style>
</head>
<body>
<div class="cube cube1"></div>
<div class="cube cube2"></div>
<div class="cube cube3"></div>
<div class="cube cube4"></div>
<div class="cube cube5"></div>
<div class="cube cube6"></div>
<div class="cube cube7"></div>
</body>
</html>

这段代码定义了七个立方体，每个立方体都有不同的旋转角度，并且在悬停时改变颜色。这是一个简单的3D空间效果，展示了如何使用CSS的transform和transition属性来创建交互式的视觉效果。

- 阅读更多 -