【零基础入门前端系列】—动画和弹性盒模型（二十四）
过渡和动画的区别过渡只能制作简单的动画（没有过程），动画可以制作复杂的动画（控制过程）过渡必须要有触发事件，动画可以没有过渡只能执行一次，动画可以执行无数次。
CSS架构之BEM设计模式
B代表：Black（块），独立实体，独立的意义，每个页面都可以看做是多个Block组成,见下图1-1；E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素，多个元素形成一个组件，见下图1-2；M代表： Modifier （修饰符），block 或 element 上
完美解决：flex布局中设置宽度被压缩的问题
问题描述：在父级中设置了display:flex;父元素宽度不够的时候，子元素就算设置的宽度，也会被压缩；产生原因：当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩解决方法: 给固定宽度的元素添加flex-shrink:0flex-shrink:0;TIPS：flex-shrink平时在
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
css实现文字闪烁效果
css实现文字闪烁效果
浅析什么是伪类和伪元素？伪类和伪元素的区别解析
1、伪类种类伪类作用对象是整个元素尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。2、伪元素种类伪元素作用于元素的一部分：一个段落的第一行或者第一个字母}伪元素其实相当于伪造了一个元素，例如 before，first-letter 达到的效果就是伪
纯 CSS 实现轮播图（自动切换、无缝衔接、小圆点切换）
纯 css 实现一个简单的轮播图
css字体加粗(dw怎么在css里字体加粗)
css怎么设置前3个字加粗举个例子：比如都在一个标签里 这里是文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容 这里是文字内容文字内容文字内容文字内容文字内 这里是文字内容文字内容文字内容文字内容文字内.test p span{font-weight:bold;}这一个样式..
background-size 之 背景图的尺寸设置
引：background-size: 没有设置任何尺寸时使用图片本身的大小，宽度和高度都是auto默认值可以用px设置成具体的值，也可以使用百分比各种不同比例的适配问题，完美适配很少发生背景图1和背景图2 you红色边框分隔开来背景图1背景图2......
CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。1、设定行高(
CSS中的BFC详细讲解（易懂）
一个BFC区域只包含它的子元素，不包含其子元素的子元素。成为一个BFC区域要满足一定的条件。不同的BFC区域相互独立，互补影响。BFC是属于普通流的，我们可以把BFC看成页面的一块渲染区，他有自己的渲染规则，简单来说就是BFC可以看做元素的属性，当元素有了BFC这个属性，这个元素可以看做隔离了的容器
css flex 布局 space-around 和 space-evenly 之间的区别css flex布局）
css flex 布局 space-around 和 space-evenly 之间的区别css flex布局）flex布局
Vue组件居中：文字居中，按钮居中，图片居中等，如何实现在容器中居中
Vue实现组件在容器中居中显示的办法本文用实验的方法理解各种方法实现居中的效果。实现水平居中的样式主要有：text-align: center， margin: auto。当然还有别的方式也可以实现，也会写在下面。用三个同样的div来控制变量法看效果，这三个div既是组件也是容器。下面将他们分别叫做
CSS基本布局——grid布局
grid布局简介： Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。Grid比Flex布局强大。基本概念：容器（container）——有容器属性项目（items）——有项目属性行（row)列（column）间距（gap) ——单元格之间的距
CSS盒子模型
CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。
css超出显示...
css超出显示…单行的。必须指定一个宽度overflow: hidden;text-overflow: ellipsis;display: -webkit-box;多行overflow: hidden; //超出的文本隐藏text-overflow: ellipsis; //溢出用省略号显示disp
chatgpt这么火？前端如何实现类似chatgpt的对话页面
自从去年11月份chatgpt出圈之后，他的热度就居高不减，也出现了很多人借助接口开发的国内版本，那么本篇博客就从前端的角度来看看前端如何实现类似chatgpt的对话功能！
CSS快速入门
在学习文本颜色之前，我们需要先弄清楚我们计算机是如何显示颜色的，我们显示器由很多像素组成，每个像素视为一个点，然后我们使用R(red)，G(green)，B(blue)三原色混合来标识颜色，简称RGB。R,G,B三个分量分别使用一个字节表示，表示范围：0 - 255/00 - FF，数值越大表示该成
CSS页面布局（超详解）
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
HTML常用标签超详细整理
HTML概述1.1 什么是HTMLHTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术1.2 HTML概念HTML:Hyper Text Markup Lan
