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来限制盒子从而限制其中的内容。