css
关注
分享
扫一扫
文章平均质量分 79
半点寒12W
分享编程知识
展开
-
Bootstrap4网格系统详解
列的工作原理：列是网格系统的基本组成部分，它们通过设置不同的类，可以在不同的屏幕尺寸下占据不同的宽度。**排序的好处：**当你需要在不同设备上调整元素的显示顺序，而又不想改变HTML结构时，列的排序功能就显得非常方便，可以根据不同的设备特性灵活调整布局。**行的重要性：**如果不使用行元素，直接将列元素放在容器中，列元素的布局可能会出现混乱，因为行元素起到了水平排列和清除边距的作用。**嵌套的意义：**嵌套列可以让你创建更复杂的布局，比如在一个主要的列中再划分出多个子区域，满足不同的内容展示需求。原创 2025-01-18 18:35:59 · 940 阅读 · 0 评论 -
CSS3 动画详解
关键帧是CSS3动画的核心部分，它定义了动画的起始状态、结束状态以及中间的过渡状态。原创 2025-01-17 18:16:17 · 1157 阅读 · 0 评论 -
css3过渡总结
CSS3过渡（Transitions）允许CSS属性在一定的时间区间内平滑地过渡，从一个值转变为另一个值。它能够让网页元素的状态变化更加自然、流畅，给用户带来更好的视觉体验。例如，当一个元素从隐藏状态变为显示状态，通过过渡可以使其淡入，而不是生硬地突然出现。原创 2025-01-17 17:57:08 · 1451 阅读 · 0 评论 -
CSS3 3D 转换介绍
参数：x、y、z分别表示在X轴、Y轴、Z轴方向上的移动距离，单位可以是像素（px）、百分比（%）等。例如，translate3d(100px,50px,20px)将元素在X轴方向移动100px，在Y轴方向移动50px，在Z轴方向移动20px。X轴是水平方向（从左到右为正方向），Y轴是垂直方向（从上到下为正方向），Z轴是垂直于屏幕的方向（从屏幕外指向屏幕内为正方向）。preserve-3d：子元素将在3D空间中进行转换，这使得可以创建复杂的3D结构。原创 2025-01-17 17:27:01 · 966 阅读 · 0 评论 -
CSS3 2D 转换介绍
CSS3 中的 2D 转换（2D Transforms）允许你在二维平面上对元素进行操作，如移动、旋转、缩放和倾斜等，这可以让网页的布局和动画效果更加丰富多样。原创 2025-01-17 15:09:01 · 927 阅读 · 0 评论 -
css3网格布局
定义列和行grid-template-columns属性用于定义网格的列轨道。可以使用多种单位和方式来定义列的宽度。还可以使用fr（fractional unit）单位来创建弹性列。grid-template-rows属性用于定义网格的行轨道。和grid-template-columns类似。网格间距（Gap）grid-column-gap和grid-row-gap属性（已废弃，建议使用gap属性）原创 2025-01-16 16:04:59 · 1294 阅读 · 0 评论 -
css实现响应式详解
常见的值有flex - start（默认值，项目向主轴起点对齐）、flex - end（项目向主轴终点对齐）、center（项目在主轴上居中对齐）、space - between（项目在主轴上均匀分布，两端对齐）和space - around（项目在主轴上均匀分布，每个项目两侧的间隔相等）。可以分别设置行间隙和列间隙，如grid - row - gap和grid - column - gap，也可以使用grid - gap同时设置行和列的间隙（grid - gap: 10px 20px;原创 2025-01-15 23:10:05 · 1048 阅读 · 0 评论 -
meta name=“viewport“ content=“width=device-width, initial-scale=1.0“
meta name=“viewport” content=“width=device-width, initial-scale=1.0” 这段代码在网页设计中扮演着非常重要的角色，尤其是在响应式设计中。原创 2025-01-14 21:28:23 · 949 阅读 · 0 评论 -
css选择器
CSS（层叠样式表）提供了多种选择器，以便开发者能够精确地选择HTML元素并应用样式。原创 2025-01-14 20:43:01 · 841 阅读 · 0 评论 -
弹性盒子模型
CSS3 弹性盒子模型（Flexbox）是一种用于在页面上布置元素的强大工具。它提供了一种更有效、灵活和响应式的方式来对容器中的项目进行布局、对齐和分配空间。原创 2025-01-14 15:08:34 · 411 阅读 · 0 评论 -
less 入门
变量可以设置变量，同一个变量可以重复被使用。@width: 10px;#header{ width: @width;}编译：header{ width: 10px;}混合混合是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。.test{ width: 10px;}.main{ .test(); height: 10px;}编译：.main{ width: 10px; height: 10px;}嵌套#header{ width: 100p原创 2021-12-25 21:43:37 · 116 阅读 · 0 评论 -
外边距塌陷和margin-top失效问题及解决方案
外边距塌陷外边距塌陷是小白在写CSS最常遇见的问题，我们可以看一下下面的这个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-12-04 22:56:31 · 567 阅读 · 0 评论