开学第二周前端总结

水平居中

行内元素

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
如果不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;

块元素

方案一：(分宽度定不定两种情况)

定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

方案二：使用定位属性

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
不定宽度：利用css3新增属性transform: translateX(-50%);

方案三：使用flexbox布局实现（宽度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

垂直居中

单行行内元素

只需要设置单行行内元素的"行高等于盒子的高"即可；

多行的行内元素

使用给父元素设置display:table-cell;和vertical-align: middle;属即可；

块元素

方案一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

不定高度：利用css3新增属性transform: translateY(-50%);

方案二：使用flexbox布局实现（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

水平垂直居中

已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

未知高度和宽度的元素

方案一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

方案二：使用flex布局实现

设置父元素为flex定位，justify-content: center; align-items: center;

解决盒子塌陷问题

.box:after{
	content:'';
	display:block;
	clear:both;
}

clearfix样式可同时解决高度塌陷和外边距重叠问题

.clearfix::before,.clearfix::after{
	content:'';
	display:table;
	clear:both;
}
<div class="box clearfix"></div>

js

变量的命名规则和规范

    由字母、数字、下划线、$符号组成，不能以数字开头
    不能是关键字和保留字，例如：for、while。
    区分大小写
    变量名必须有意义
    遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

基本数据类型

Number、String、Boolean、Undefined、Null Object
==只比较值是否相等，不比较类型。
===比较值和类型是否都相等

类型转换函数：
整形：praseInt()
浮点型：praseFloat()

colsole.log(praseInt("10"));
colsole.log(Number("hello"));
colsole.log(String("10"));
colsole.log(Boolean(1));

调用toString()不能转换null,undefined 但是String（）可以

优先级

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先&&   后||
	7. 赋值运算符