weixin_46048397的博客

基础知识动画属性不是所有的css属性都有过渡效果，一般来讲有中间值的属性都可以设置动画。参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties元素状态初始状态：指当页面加载后的样式状态，下面是表单设置的初始样式。变化形态：指元素由初始状态变化后的状态，比如鼠标放上、表单获得焦点后的形态...

什么是帧动画？通过定义一段动画中的关键点、关健态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制。关键帧使用@kerframes规则配置动画的各个帧。from 表示起点 (若省略，css会以默认状态帮你创建)to 表示终点 (若省略，css会以默认状态帮你创建)可以用百分数 如20%来控制动画运行到20% 时候的精确状态基本使用<styl...

基础知识坐标系统要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制元素的变形。共有三个轴，就跟高中学的立体坐标系类似。X轴是水平轴Y轴是垂直轴Z轴是纵深轴变形操作使用 transform 来控制元素变形操作，包括控制移动、旋转、倾斜、3D转换等选项说明none定义不进行转换translate(x,y)定义2D转换translate3d(x,y,z)定义3D转换trans...

什么是栅格？CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。兼容性：参考 https://caniuse.com/1.声明容器块级容器display:grid;行级容器display:inline-grid;2.划分行列grid-template-columns 划分列数grid-template-ro...

浮动布局使用float：left；给浮动定义。float属性定义元素在哪个方向浮动。在css中任何元素都可以浮动，不论元素本身是何种元素，在浮动时都会生成一个块级框。选项说明left向左浮动right向右浮动none不浮动文档流没有设置浮动的块级元素是独占一行的。丢失空间：如果两个元素，只给第一个元素设置浮动，第二个元素不进行设置，则第一个元素空间位置会丢失，第二个元素会重叠到第...

定位布局什么是定位布局？定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。定位类型static 默认定位，参考文档流relative 相对定位absolute 绝对定位fixed 固定定位sticky 粘性定位位置偏移部分定位类型元素可以设置 上、下、...

什么是Flex ：Flex 是 Flexible Box 的缩写，意为"弹性布局"，可以轻松的控制元素排列、对齐和顺序的控制。现在的终端类型非常多，使用弹性盒模型可以让元素在不同尺寸终端控制尺寸。浏览器兼容性：参考网站 https://caniuse.com/ 针对绝大多数尤其是移动设备都可以很好的支持flex弹性盒子声明定义display:flex； display:inli...