前端学习（一）

1.CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
2.常用的块状元素有：
div、p、h1…h6、ol、ul、dl、table、address、blockquote 、form
3.常用的内联元素有：
a、span、br、i、em、strong、label、q、var、cite、code
常用的内联块状元素有：
img、input
4.将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
5.当然块状元素也可以通过代码display:inline将元素设置为内联元素。
6.内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
7.

8.

9.如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

10.

11.不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
加入 table 标签
设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
12.transition有四个要素：①属性名称（property）②过渡时间（duration）③延迟时间（delay）④时间函数（timing-function）
写的顺序：①②④③
代码：

tips：1.display不能和transition一起使用。原因：transition是需要初始值的。而display:none时，它脱离了文档流的，transition读不到初始值。display:block时，虽然显示出来了，但是transition读的是瞬时值，依旧是空。所以display不要和transition一起使用
2.transition后面尽量不要跟all。原因：会造成大量的计算资源，会将宽高等等的属性全看一遍，增加GPU的损耗，导致页面卡顿。
F:\work.idea \demo-1
13.
animation基础和写法
①动画名称（name）–@keyframes，与transition不同的是，animation需要自定义一个名称②过渡时间（duration）延迟时间（delay）③时间函数（timing-function）④播放次数（iteration-count）⑤播放方向（direction），即是否轮流播放和反向播放⑥停止播放的状态（fill-mode），⑦是否暂停（play-state）
⑤的属性值：alternate：先正向后反向；reverse：反向播放
⑥的属性值：forwards：以最后的状态结束。（不可和infinite一起用）
⑦的属性值：running：无限播放；paused：停止播放。该属性要跟js结合

animation可以解决transition display：none bug