概述 在 flex 布局模型中，flex 容器的子级可以在任何方向上布局，并且可以“伸缩”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父级。孩子的水平和垂直对齐都可以很容易地操作。这些框的嵌套（水平内垂直，或垂直内水平）可用于构建二维布局。 CSS 灵活框布局模块 Level 1 – W3C 候选人推荐 在真正了解之前，我一直使用float进行布局，但了解了Flex布局之后，发现它是个超好用的排版工具，也是它拯救了我，用它来做网页非常容易达到响应

目录 文章目录 前言 CSS3波浪效果 1.Html构建 2.CSS编写 3.完整代码 index.html文件 style.css文件 总结 前言         随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效果，赶紧学起来吧，加在自己开发网页的底部，给页面增加一点活泼的气息~ CSS3波浪效果                  这是使用 S

cursor:pointer的作用 <div style={{ cursor: 'pointer', position: 'relative', float: 'right', marginTop: -14 }}></div> cursor : 网页浏览时用户鼠标指针的样式或图形形状。 属性值： default：默认光标（通常是一个箭头） auto：默认，浏览器设置的光标 crosshair：光标为十字线 pointer：光标为一只手 move：光标为某对象可移动

不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同； 解决办法：在CSS文件开头，加*{margin: 0; padding: 0;}，把所有标签的margin和padding设置为0即可。 在IE6中，块元素设置float并且有水平方向的margin时，margin显示出来会比设置的值大，会导致最后一块元素被顶到下面去； 解决办法：可以将块级元素display设置为inline。 在IE6，IE7等浏览器，标签高度小于10px时，实际的高度会超出设置的高度，这是

目录 一、案例效果 二、实现思路 三、完整代码+详细注释 四、涉及要点 五、案例素材 一、案例效果 二、实现思路 创建游戏背景板； 创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动； onmousemove 创建子弹，让子弹周期性的在战机处发出并让其向 top 值减小的方向(向上)移动，top 小于 0 也就是子弹走出游戏面板时删除自身； 创建敌机，让敌机周期性的在游戏背景板左侧的随机距离的位置产生，并让其向 top 增加的方向(向下)移动； 定义函数，子弹和敌机相遇时

一、介绍 最近在一个项目的宣传页中，设计师使用了文字描边效果，之前我确实没有实现过文字的描边效果，然后我在查阅资料后，知道了实现方法。文字描边分为两种：内外双描边和单外描边，也就是指在给文字加上描边效果后，描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。 二、具体代码 1、文字内外双描边效果 这种描边效果相当于内外同时占用相同的描边宽度，只需要借助一个css属性：text-stroke: width color 即可，该属性的第一个值表示描边的宽度，第二个值表示描边

（一）主页实现 首先进入的是我们的封面，头像用的是3D变换，鼠标悬停时，完成沿着y轴旋转的效果。然后我们做个两个div标签，一个是在图片里面，添加了文字2022 · Lucky，一个是在图片下面，添加了文字Lucky。关于下面对应的文字和背景图，我们在JS里应用了网址https://v1.hitokoto.cn/和https://cn.bing.com/，每更新一次，文字和背景图都更新。在超链接“我的主页”下面，我们4个超链接，分别对应的是Github、CSND、知乎和qq邮

grid布局简介： Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。 基本概念： 容器（container）——有容器属性 项目（items）——有项目属性 行（row) 列（column） 间距（gap) ——单元格之间的距离 区域（area）—— 自己划分每个单元格占据的区域 内容（content) 容器属性 grid-template-columns:设置每一列的宽度，可以是具体值，也可以是百分比 grid-tem