2018/11/7

• prompt(string,defaultvalue):类似于警告框alert(),其为提示用户进行输入的对话框，返回string类型。
• Number()与parseInt()的区别：两者都是进行字符串到数字的转换，但是Number()对于参数中包含非数字时，一律判定为NaN,而parseInt()可以返回开头合法数字部分，直到第一个不符合数字规则中的元素，如果以非数字开头则返回NaN。
• Number.toFixed(x),Nmuber.toPresicion(x),Math.Round(x):分别为保留x位小数部分，保留x位有效数字，对x进行四舍五入取整数值。
• node.js使用：安装了node.js最新版，顺带安装了npm最新版，利用npm安装了CSS初始化文件normalize.css。（npm安装packages的过程及使用方式是怎么样的？）

2018/11/8

• 文本超出部分以省略号显示：需要在盒子的CSS样式中设置三对值：

white-space:nowrap;/*强制一行内显示*/
overflow:hidden;/*溢出隐藏*/
text-overflow:ellipsis;/*超出的部分显示省略号*/
复制代码

当盒子内图片或其他元素需要裁切成圆形或椭圆时，可以给盒子设置圆形，使用overflow:hidden实现；或者直接对元素裁切。

• 当行内标签具有position，float样式属性时，无需手动设置display:block，即可转为块元素，进行宽高设置。
• 当背景图片一张图片存放多部分小图时，

background:url() no-repeat -x(px) -y(px);
复制代码

或者

background-position:-x(px) -y(px);
复制代码

• 居中：
  
  inline-block，inline元素:

line-height:;
text-align:center;
复制代码

block元素：

margin:0 auto;
复制代码

• a标签所在盒子内，若超出a的部分也有链接功效，需使用padding，它是占盒子的，如果使用margin，它是不占盒子的，a外的部分无法触发链接效果。
• 可以通过改变图片标签（盒子）的宽高值，初始宽高设为0为隐藏，来实现硬性消失与显示。可以通过要实现变化的元素加动画（transition:all 0.8s）来实现过渡。也可以给盒子做动画，图片做背景属性。
• 浮动的元素脱标，不占位置。
• 浮动的元素不能撑起父盒子的高度，如果父盒子高度为0，而普通盒子可以撑起父盒子的高度。
• overflow:hidden | auto(创建滚动条) | visible
• BFC块级格式化上下文:一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相干。1.具有条件：display属性为block,list-item,table的元素，会产生BFC。（具有了武林高手练武的资质~）2.触发BFC条件：a.float属性值不为none;b.position属性值为absolute和fixed;c.overflow不为visible;d.display属性值为inline-block,flex,inline-flex,table-cell,table-caption（需要高人点化~）3.BFC所具有的特性：a.在一个BFC区域内，盒子一个一个从顶端垂直排列;b.通过margin调节垂直方向的距离，且属于同一个BFC盒子的相邻盒子的margin会发生重叠（不属于同一个BFC盒子的相邻盒子margin不会重叠）;c.在BFC中，每一个盒子的左外边距margin-left会触碰但不压线到容器的左边缘border-left，对于从右向左的格式来说，会触碰到右边缘;d.BFC不会与浮动盒子产生交集，而是紧贴浮动边缘;e.计算BFC的高度时，自然也会检测浮动的盒子高度。4.BFC的主要用途：a.清除内部浮动（利用特性e）,最常用的是使用overflow:hidden来设置为BFC盒子从而清除浮动，因为不会产生副作用。b.解决外边距合并问题：（利用特性b）在某个盒子外套个盒子并使其成为BFC盒子，使相邻的原本在同一个BFC盒子的两个子盒子不属于同一个BFC盒子，就不会发生边距重叠了。c.制作右边自适应的布局：（利用特性d）上面的盒子设置浮动后，脱离文档流，不占位置，下面的盒子会占用他的位置，如果下面盒子中存放文字，由于文字的特性（不压着），会实现文字环绕的效果。但是如果将下面的盒子也设置为BFC盒子（添加overflow:hidden），则不会产生交集，而是紧贴浮动边缘，实现类似float的效果，最重要的是当左边的盒子宽度改变时，右侧的盒子宽度及盒子中的文字会自适应改变。

2018/11/9

1.浏览器前缀：

• -webkit-:Google Chrome,Safari,Android Browser

• -moz-:Forefox

• -ms-:Inter Explorer,Edge

• -o-:Konqueror 后面可以通过引用解决文件来解决兼容问题。 2.渐变效果：

• background:linera-gradient(起始位置，起始颜色，结束颜色):两种颜色渐变，浏览器兼容问题严重，需要在linera-gradient前面添加浏览器的私有前缀。

• background:linera-gradient(起始位置，颜色1 颜色1百分位置，颜色2 颜色2百分位置，颜色3 颜色3百分位置)，如background:-webkit-linera-gradient(top,red 0%,green 50%); 3.CSS W3C统一验证工具：检测有没有错误，是否符合版本规定

• CssStates，一个在线的CSS代码分析工具：www.cssstates.com/

• 另一个更全面的，w3c统一的验证工具，可以检测本地文件：validator.w3.org/unicorn/ 4.CSS压缩工具：提高加载速度和节约空间

• w3c css压缩：tool.chinaz.corn/Tools/CssFo…，网速比较慢。

• 站长之家压缩 5.旋转轮播图:透视，过渡,子元素perserve-3d

• transform:rotateY(30deg) | rotateX(30deg) [translateZ(400px)]表示沿着Y轴或者X轴旋转指定角度[,向Z轴正方向移动60像素]。

• perspective:1000px;表示透视。

• transform-style:是3D空间的一个重要属性，指定嵌套元素（子盒子）在3D空间中如何呈现。属性值flat（默认值，所有子元素在2D平面呈现）和perserve-3d（3D呈现）。

• transition:5s linear;谁做动画给谁加动画。

2018/11/10

1.处理盒子距离的方法：

• 高度剩余法
• 宽度剩余法
• 对于一些块级元素里面的文字如果无法用已经提供的center,right,left等属性确定，可以对其设置width,magin,padding来限制盒子从而限制其中的内容。