前端基础知识总结

前端基础知识总结

开发工具与关键技术：DW
作者：胡名权
撰写时间：2019年1月17日

一、HTML标签

标题标签：

段落标签、无序列表:

二、css

border-radius: 圆角效果	line-height: 垂直居中（行高）
hover: 伪类	display: inline-block 块级元素横排显示
list-style:none 去除li的小点	text-decoration:none 取消下划线
cursor:pointer 鼠标形状改变	float:left(right) 左(右)浮动
display:none 将元素隐藏	overflow:hidden 超出部分隐藏
first-child nth-child(n) 单个元素选择	box-shadow:1px 1px 2px #900; 设置盒子阴影
position: (relative，absolute，fixed) 定位	border：（solid实线，deshed虚线）边框
ound-color： 背景颜色	image： 图片
width： 宽度	height： 高度
marign： 外边距	padding： 内边距
text-align： 文字水平居中	font-size： 字体大小

三、CSS3动画知识点

animation属性

1、@keyframes 规定动画。

2、animation 所有动画属性的简写属性，除了 animation-play-state 属性。

3、animation-name 规定@keyframes动画的名称。

4、animation-duration 规定动画完成一周所花费的时间。

5、animation-timing-function 动画播放方式。

6、animation-delay 动画开始播放时间。

7、animation-iteration-count 动画播放次数。

四、Javascript 是脚本语言，是一种轻量级的编程语言。

Javascript 可插入HTML页面后，可用支持的现代浏览器执行。

控制台输出 console.log(); 提示框输出 alert();

获取元素的方式：

document.getElementById

document.getElementsByClassName

五、浮动（float）的影响：

没有浮动情况下的样子：

加有浮动的样子：

谨记：这个时候我们可以看到第二盒子“不见了”；

用浮动时记得要清除浮动的影响（display：block），

当然我们还可以用定位（position）来实现,看个人喜欢。

六、弹性布局

1、flex-direction属性

2、flex-wrap属性

3、flex-flow属性

4、justify-content属性

5、align-items属性

6、align-content属性

7、order属性

8、flex-grow属性

9、flex-shrink属性

10、flex-basis属性

11、flex属性

12、align-self属性

使用弹性布局为的就是让我们在改变页面大小的情况下页面不会乱，会自动的适应页面大小而达到美观的效果。
（来自屈小汇老师的授课内容）

七、栅栏式布局

使用栅栏式布局，如果我们不设置宽度，那么默认是占十二格，也就是一行。当我们规定以后达到一行能有两个input标签甚至更多。