分类 css 下的文章

2024-08-17

在CSS中，Flexbox布局提供了一种更为有效的方式来对容器内的项目进行排版，它可以使容器的子项在任何方向上（横向或纵向），以一种灵活的方式进行排列。

以下是一些关于CSS Flex布局的基本概念和示例代码：

基本Flex容器




.container {
  display: flex; /* 或者 inline-flex */
}

在Flex容器中居中项目




.center-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

改变Flex项目的排列方向




.column-container {
  display: flex;
  flex-direction: column; /* 子项垂直排列 */
}

使用Flexbox创建一个网格布局




.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列等宽的网格 */
  grid-gap: 10px; /* 设置网格间隙 */
}

使用Flexbox对齐交叉轴




.cross-axis-container {
  display: flex;
  align-content: center; /* 交叉轴上的项目垂直居中 */
}

使用Flexbox对齐主轴内项目的对齐方式




.main-axis-container {
  display: flex;
  justify-content: space-between; /* 项目之间保持相等的空间 */
}

使用Flexbox进行弹性伸缩




.flex-item {
  flex: 1; /* 所有项目均分空间 */
}

使用Flexbox进行顺序更改




.order-container {
  display: flex;
}
.first-item {
  order: -1; /* 将此项目排列在前 */
}

以上代码展示了Flexbox布局的基本概念和使用方法，Flexbox提供了强大而灵活的工具来处理布局问题，并且能够适应各种屏幕尺寸和设备。

- 阅读更多 -

CSS基础之CSS元素显示模式，web开发框架

System

2024-08-17

所有,css

在CSS中，元素的显示模式是通过CSS的display属性定义的。常见的显示模式包括block、inline、inline-block和none。

block：块级元素，默认宽度自动填满其父元素的宽度，前后自动换行。典型例子有<div>、<p>等。
inline：内联元素，宽度仅包含内容的宽度，前后不会换行。典型例子有<span>、<a>等。
inline-block：内联块元素，既不会产生块级元素的换行，也可以设置宽度和高度。
none：元素不会显示，也不会占据任何空间。

CSS代码示例：




/* 块级元素 */
div {
  display: block;
}
 
/* 内联元素 */
span {
  display: inline;
}
 
/* 内联块级元素 */
button {
  display: inline-block;
  padding: 10px;
}
 
/* 不显示元素 */
a.hidden {
  display: none;
}

HTML代码示例：




<div>这是一个块级元素</div>
<span>这是一个内联元素</span>
<button>内联块级按钮</button>
<a href="https://example.com" class="hidden">隐藏的链接</a>

在实际开发中，可以根据需要选择合适的显示模式，以便更好地控制页面布局和元素的行为。

- 阅读更多 -

css心跳动画

System

2024-08-17

所有,css

CSS心跳动画可以通过关键帧（keyframes）和动画（animations）属性来实现。以下是一个简单的心跳动画示例：




/* 定义心跳的关键帧 */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
 
/* 应用动画到心形图案 */
.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
  animation: heartbeat 1s infinite;
}
 
/* 左半心 */
.heart:before {
  content: "";
  position: absolute;
  top: 50px;
  left: 25px;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
}
 
/* 右半心 */
.heart:after {
  content: "";
  position: absolute;
  top: 0;
  left: 75px;
  width: 50px;
  height: 100px;
  background: red;
  border-radius: 50px 50px 0 0;
}

在HTML中，你可以这样使用：




<div class="heart"></div>

这段代码会创建一个心形图案，并通过heartbeat动画使其进行心跳动画。通过调整animation属性中的时长和迭代次数，可以控制动画的速度和持续时间。

- 阅读更多 -

html+css+jquery实现简单的购物车功能，CSS复合选择器

System

2024-08-17

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易购物车示例</title>
<style>
    /* 复合选择器选中所有带有.item类的元素，并且它们的父元素具有.cart类 */
    .cart .item {
        margin-bottom: 10px;
    }
    .cart .item .quantity {
        width: 50px;
        text-align: center;
    }
</style>
</head>
<body>
 
<div class="cart">
    <div class="item">
        <span class="quantity">2</span> 件物品
    </div>
    <div class="item">
        <span class="quantity">1</span> 件物品
    </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 更新购物车中物品的总数量
    function updateCartQuantity() {
        var totalQuantity = 0;
        $('.cart .item .quantity').each(function() {
            totalQuantity += parseInt($(this).text(), 10);
        });
        $('#totalQuantity').text(totalQuantity);
    }
 
    // 页面加载完成后绑定更新方法
    $(document).ready(function() {
        updateCartQuantity();
    });
</script>
 
<div>总共有 <span id="totalQuantity">0</span> 件物品。</div>
 
</body>
</html>

这个简化的购物车示例展示了如何使用jQuery遍历特定元素，并执行一些操作（例如更新总数量）。这里使用了.each()方法来遍历所有的.quantity元素，并将它们的数量累加起来。这个例子教会用户如何在实践中使用复合选择器来选择特定的DOM元素，并通过jQuery操作它们。

- 阅读更多 -

【前端】CSS（引入方式+选择器+常用元素属性+盒模型+弹性布局）

System

2024-08-17

所有,css

CSS (级联样式表) 是一种用来描述网页和其他HTML文件样式的语言。以下是关于CSS的一些主要概念：

CSS的引入方式：
- 内联样式：直接在HTML元素的style属性中添加CSS代码。
- 内部样式表：在HTML文档的<head>标签中添加<style>标签，并在其中编写CSS代码。
- 外部样式表：创建一个单独的CSS文件，并通过HTML文档的<link>标签引入。




<!-- 内联样式 -->
<p style="color: red;">This is a paragraph.</p>
 
<!-- 内部样式表 -->
<head>
  <style>
    p { color: red; }
  </style>
</head>
 
<!-- 外部样式表 -->
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS选择器：
- 标签选择器：直接使用HTML标签作为选择器。
- 类选择器：在HTML元素的class属性中指定一个或多个类名，并在CSS中以"."开头定义。
- ID选择器：在HTML元素的id属性中指定一个ID名，并在CSS中以"#"开头定义。
- 伪类选择器：用于向某些选择器添加特殊的效果，如:hover和:active。




/* 标签选择器 */
p { color: red; }
 
/* 类选择器 */
.center { text-align: center; }
 
/* ID选择器 */
#logo { width: 200px; }
 
/* 伪类选择器 */
a:hover { color: blue; }

CSS常用元素属性：
- color：文本颜色。
- background-color：背景颜色。
- font-size：字体大小。
- border：边框。
- padding：内边距。
- margin：外边距。




/* 文本颜色 */
p { color: red; }
 
/* 背景颜色 */
div { background-color: blue; }
 
/* 字体大小 */
h1 { font-size: 24px; }
 
/* 边框 */
table { border: 1px solid black; }
 
/* 内边距 */
div { padding: 10px; }
 
/* 外边距 */
body { margin: 0; }

CSS盒模型：
- content box：内容区域，用于存放文本和图像等元素。
- padding box：内边距区域，扩展了内容区域的尺寸，有padding属性控制。
- border box：边框区域，围绕内边距区域，由border属性定义。
- margin box：外边距区域，最外层的区域，由margin属性定义。




/* 设置元素的宽度和高度 */
div {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

CSS弹性布局：
- 使用display属性的flex值可以创建一个弹性容器。
- 使用flex-direction控制项目的方向。
- 使用justify-content控制项目在主轴上的对齐方式。
- 使用align-items控制项目在交叉轴上的对齐方式。




/* 创建弹性容器 */
.container {
  display: flex;
  flex-direction: row; /* 主轴方向 */
  justify-content: center; /* 主轴对齐 */

- 阅读更多 -

解密Web前端开发常见误区，css基础，课程前端开发

System

2024-08-17

所有,css

在CSS中，我们可以使用不同的单位来指定尺寸和位置。以下是一些常用的单位：

像素(px)：像素是Web开发中最常用的单位。
百分比(%)：可以用来指定相对于其父元素的大小。
em：相对于当前元素的字体大小。如果用于设置字体大小，则相对于父元素的字体大小。
rem：相对于根元素(html)的字体大小，使得字体大小可以在全局范围内统一设置。
vh和vw：分别相对于视口的高度和宽度，1vh等于视口高度的1%，1vw等于视口宽度的1%。
cm、mm、in等：这些是绝对长度单位，主要用于打印媒体。

CSS中的伪类和伪元素可以用来添加特殊的样式，例如：:hover、:focus、:first-child、::before和::after等。

CSS中的布局方式有：

浮动(float)：元素会移动到其父容器的左边或右边，或浮动到文字的上方。
绝对定位(position: absolute)：元素将相对于其最近的已定位的祖先元素定位。
相对定位(position: relative)：元素相对于其正常位置进行定位。
固定定位(position: fixed)：元素相对于视口进行定位，而不受滚动条的影响。
表格布局(display: table)：通过设置display: table、display: table-row和display: table-cell可以模拟表格布局。
Flexbox布局：通过设置display: flex可以使用弹性盒模型进行布局。
Grid布局：通过设置display: grid可以使用网格布局系统进行布局。

CSS中的盒模型包括标准盒模型和IE盒模型。标准盒模型的宽度和高度只包括内容区域，而边框和内边距要在此基础上增加。

CSS中的特殊属性如opacity和visibility可以用来控制元素的透明度和可见性。

CSS中的z-index属性用于控制元素的堆叠顺序。

CSS中的cursor属性可以用来设置鼠标指针移动到元素上时的样式。

CSS中的@import规则可以用来导入其他CSS文件。

CSS中的@media规则可以根据不同的媒体类型和条件来应用不同的样式。

CSS中的transition和animation属性可以用来创建动画效果。

CSS中的box-shadow和text-shadow属性可以用来添加阴影效果。

CSS中的border-radius属性可以用来制作圆角边框。

CSS中的user-select属性可以控制元素文本的可选中性。

CSS中的filter属性可以应用各种图像效果，如模糊、饱和度调整等。

CSS中的flex-grow、flex-shrink和flex-basis属性用于Flexbox布局中的项目。

CSS中的grid-row、grid-column和grid-area属性用于Grid布局中的项目。

CSS中的justify-content和align-items属性用于Flexbox布局中的容器。

CSS中的place-items属性是justify-items和align-items的简写。

CSS中的all属性可以将样式应用于所有属性。

CSS中的inherit关键字可以使元素继承其父元素的属性值。

CSS中的min-width、min-height、

- 阅读更多 -

教你CSS Grid布局实现响应式设计，web前端开发如何自学

System

2024-08-17

所有,css

CSS Grid 是一种强大的布局系统，可以帮助开发者创建复杂的响应式网页设计。以下是一个简单的例子，展示如何使用 CSS Grid 来创建一个基本的布局：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-gap: 10px; /* gap between items */
    padding: 10px; /* container padding */
  }
  .grid-item {
    background-color: #f0f0f0; /* item background color */
    border: 1px solid #ccc; /* item border */
    padding: 20px; /* item padding */
    text-align: center; /* text alignment */
  }
 
  /* Media query for tablets and smaller devices */
  @media (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
  }
 
  /* Media query for phones and smaller devices */
  @media (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr; /* 1 column */
    }
  }
</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 class="grid-item">6</div>
</div>
 
</body>
</html>

这个例子中，.grid-container 类定义了一个网格容器，其中的 grid-template-columns 属性设置了三个等宽的列。CSS 媒体查询（media queries）用于根据屏幕宽度调整列的数量，实现响应式设计。当屏幕宽度小于768像素时，列数变为两列，而当屏幕宽度小于480像素时，网格整体呈现为一列。这样，开发者可以通过调整网格的列数和大小，来创建适应不同屏幕尺寸的布局。

- 阅读更多 -

CSS基础---新手入门级详解

System

2024-08-17

所有,css

CSS (Cascading Style Sheets) 是用来定义网页样式的计算机语言，可以使网页元素如文本，图片，布局等更加美观。

CSS的引入方式：

内联样式：通过标签的style属性为其添加样式。




<p style="color: red;">这是一个段落。</p>

内部样式表：在HTML文档的<head>标签中添加<style>标签，然后在其中添加CSS规则。




<head>
  <style>
    p { color: blue; }
  </style>
</head>
<body>
  <p>这是一个段落。</p>
</body>

外部样式表：创建一个CSS文件，然后在HTML文档的<head>标签中添加<link>标签，引用该CSS文件。




<!-- 创建一个style.css文件，内容如下 -->
p { color: green; }
 
<!-- 在HTML文件中引用 -->
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>这是一个段落。</p>
</body>

CSS的基本语法：
```
selector {
  property: value;
  property: value;
  ...
}
```
- selector：选择器，用于选择需要添加样式的HTML元素。
- property：属性，表示要改变的样式属性。
- value：值，表示属性的值。
CSS的选择器：
- 标签选择器：直接使用HTML标签作为选择器。
```
p { color: red; }
```
- 类选择器：在HTML元素上添加class属性，然后在CSS中使用.前缀。
```
<p class="para">这是一个段落。</p>
```
```
.para { color: orange; }
```
- ID选择器：在HTML元素上添加id属性，然后在CSS中使用#前缀。
```
<p id="paraId">这是一个段落。</p>
```
```
#paraId { color: purple; }
```
- 组选择器：使用,分隔多个选择器，可以同时选择多个元素。
```
h1, h2, h3 { color: grey; }
```
- 嵌套选择器：可以在选择器之间添加空格，表示后代选择器，即选择特定父元素的子元素。
```
div p { color: pink; }
```
CSS的属性：
- 文本属性：color, text-align, text-decoration, ...
- 背景属性：background-color, background-image, ...
- 列表属性：list-style, ...
- 布局属性：width, height, margin, padding, float, position, ...
- 边框属性：border, ...
- 字体属性：font-size, font-family, font-weight, ...
- 透明度属性：opacity, ...
CSS的优先级：
- 内联样式 > 内部样式表和外部样式表。
- 具体性选择器：ID选择器 > 类选择器 > 标签选择器。
- 当选择器相同时，最后声明的样式会被应用。
- 可以使用!important

- 阅读更多 -

DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题

System

2024-08-17

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 将CSS放在<head>中以避免阻塞渲染 */
        body {
            background-color: #f3f3f3;
        }
        .content {
            width: 600px;
            margin: 20px auto;
            background-color: #fff;
            padding: 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 页面内容 -->
    </div>
    <!-- 将JS放在<body>结束标签前以减少阻塞 -->
    <script src="main.js"></script>
</body>
</html>

这个例子展示了如何优化HTML文档以减少CSS、JavaScript和DOM解析对渲染的影响。通过将CSS放在文档的<head>中，并将JavaScript代码放置在文档的<body>标签的末尾，可以减少页面首次渲染的阻塞。这样做可以改善用户体验，提升页面加载性能。

- 阅读更多 -

CSS css简介和语法，字节跳动前端岗经典面试真题

System

2024-08-17

所有,css

CSS简介：

CSS (Cascading Style Sheets) 是用来样式定义，布局，和在网页中的文本，图片，音频，视频等元素的显示。CSS 可以使你的网页更加美观，并且可以在不改变内容的情况下改变网页的外观。

CSS 语法：

CSS 规则由两个主要的部分构成：选择器和声明。每个声明包含一个属性和一个值，属性（property）是你想要改变的样式属性，每个属性由一个值所定义。




/* 选择器 { 属性: 值; } */
p { color: red; }

CSS 注释：




/* 这是一个 CSS 注释 */

CSS 的一些基本语法规则：

每条声明由一个属性和一个值组成，以分号结束。
可以将多个相同样式的选择器合并为一个，以逗号分隔。
可以使用十六进制、RGB、RGBA、HSL、HSLA 等多种方式来表示颜色值。
可以使用像素或其他单位来表示尺寸。
可以使用百分比或其他单位来表示位置。
可以使用关键词、URL 或其他方式来表示背景图片。

CSS 的优点：

内容与表现分离，使得工作更加容易管理。
提高页面加载速度，因为CSS文件可以进行缓存。
使用CSS可以很容易地实现响应式设计。
有很多预处理器如Sass、Less等，可以使CSS代码更加简洁和结构化。

- 阅读更多 -