❤️文章内包含个人理解，如有错误请指出。 ❤️   往期文章 轮播图swiper框架的基本使用【Transform3D】转换详解（看完就会）【css动画】移动的小车 【CSS3】 float浮动与position定位常见问题（个人笔记） 如何完成响应式布局，有几种方法？看这个就够了 详解 CSS3中最好用的布局方式——flex弹性布局（看完就会） [前端CSS高频面试题]如何画0.5px的边框线（详解）CSS3基础属性大全CSS3动画属性 animation详解（看完就会）

1 弹性盒子概述 Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式，主要表现在： 1、在不同方向排列元素 2、重新排列元素的显

一、前言 最近需要在弹窗中增加一个可折叠的备注栏，刚好Ant Design提供了Collapse折叠面板供我们使用，但放入后发现排版未对齐，如下图所示： 经过尝试后使用css子类选择器及设置样式优先级的方式解决了这个问题，解决后效果如下： 下面分享一下自己的解决过程和方案。 二、解决过程和方案 首先，分析界面元素发现将ant-collapse-header类中的padding属性导致了排版未对其： 去除该属性后就能够达到排版对齐的效果： 但该

css中实现动画有两种方式：transition过渡动画、 animation自定义动画。 transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。 之前：元素 -> 元素:hover 状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。 过渡：从开始状态到结束状态的中间过程可以查看 格式： transition:过渡的属性 完成时间(s) 运动曲线 延迟时间 trans

目录 一、单行文本溢出隐藏 二、多行文本超出指定行数隐藏 在我们编辑单行文本或者多行文本时文本溢出时，我们该如何进行隐藏呢？今天就来介绍一下单行文本溢出隐藏和多行文本超出指定行数隐藏的方法。 一、单行文本溢出隐藏 width: 250px; （固定宽度） white-space: nowrap; （不换行） text-overflow: ellipsis; (省略号） overflow: hidden; （多余部分隐藏） 二、多行文本超出指定行数隐藏 display:

Flex 布局详解 一、入门 1. flex 是什么？ flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思 2. 为什么我们需要 flex? 解决元素居中问题 自动弹性伸缩，合适适配不同大小的屏幕，和移动端 3.flex 常见术语 三个2 序号 简记 术语 1 二成员 容器和项目(container / item) 2 二根轴 主轴与交叉轴(main-axis / cross-axis) 3 二根线 起始线(main/cros

css标签的相对定位和绝对定位是通过position属性来控制的，相对定位和绝对定位不改变元素的大小形状，只改变元素的位置。 一、position属性的值有以下几种： static:默认值，没有定位，元素出现在正常的流中。 absolute:使用绝对定位，相对于static定位以外的最近一个祖先元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。 relative:使元素相对定位，相对于自己的正常位置进行定位。 fixed:使元素绝对定位，相对于浏览器窗口进行

在CSS中定位有以下4种： 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed 静态定位 - static 静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。 相对定位 - relative <style> div{ position: relative;

轮播图已经成了页面开发中不可缺少的一部分，日常生活中随处都能见到轮播图的身影，例如平常我们购物的淘宝，京东等等，都靠着轮播图在一片 有限的区域内展现出更多的商品。这也是前端程序员最早接触到的练手小项目，这篇文章带大家透彻拿下轮播图！从此不再迷茫  首先我们来看一下本次案例的效果： （下面有请本人女朋友出境！话说我是在搞不明白 gif 图怎么设置，但总之就是该有的功能都有，不该有的功能也有（例如杀狗 hhhhh），自动播放，点击切换按钮切换图片，点击下方圆点切换图片均可实现，就不一一

弹幕标签 1，注意弹幕标签marquee，现在一些浏览器是不支持的 2，弹幕标签也叫跑马灯 marquee格式及其含有的属性 1.基本格式 如下： <marquee></marquee> 2.一些属性 1，direction属性：表示的是弹幕行走的方向，如下面实现向左行走 <marquee direction="left">这波操作6</marquee> 其中direction还可以设置值为up right down，

        在网页中，我们经常会看到各种轮播图的效果，它们到底是怎样实现的呢？今天，我们就一起来看一下！首先，我们需要准备若干张图片，在这里我准备了五张图片。 功能需求： 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图， 轮播图也会自动播放图片。 鼠标经过，轮播图模块， 自动播放停止。 我们页面布局如下所示： 接下来就一步

前端学习路线小总结： 基础入门： HTML CSS JavaScript 三大主流框架： VUE REACT Angular 深入学习： 小程序 Node jQuery TypeScript 前端工程化 一.CSS简介 1.什么是CSS？ CSS 指层叠样式表 (Cascading Style Sheets)。 样式定义如何显示 HTML 元素 样式通常存储在样式表中 外部样式表可以极大提高工作效率，通常存储在CSS文件中 多个样式定义可层叠为一个 p