CSS与JavaScript的一些问题汇总

时间:2023-01-20 16:28:57

通过最近的学习,总结了一些问题,可能总结得不够完善,但是好记性不如烂笔头,先记在这儿,后面看到更完整的回答,再进行修改。

1、事件流,如何阻止冒泡
事件流:在点击一个按钮时,实则,按的父容器与按钮的父容器的父容器也会被点击。就是从页面接受事件的顺序。
阻止冒泡:e.cancelBubble=true------IE
e.stopPropagation()-------DOM

2、js可以在那些位置,即我们引入JavaScript的几种方式
(1)、在html中嵌入JavaScript脚本(内嵌式)
(2)、在html中链接一个外部的JavaScript文件(外部链接)
(3)、直接编写中元素的事件属性中(所有on开头的属性名)
(4)、伪url:<a href="javascript:alert(...)">...</a>

3、定位(position:元素会自动变为以display:inline-block的方式显示)
(1)static:默认值,表示没有定位
(2)relative:相对定位。没有脱离标准文档流,相对于原来的位置进行移动;浮动元素后,设置相对位置,也是相对于原来的位置进行移动,并且还是在浮动流中。
(3)absolute:绝对定位。脱离了标准文档流,相对于已经定位的最近的‘祖先’元素(就近原则),如果没有已经定位的‘祖先’元素,就相对于body进行偏移。
(4)fixed:固定定位。脱离了标准文档流,相对于浏览器窗口进行偏移。

4、json与字符串转换
(1)json转字符串
var strobj=JSON.stringify(json对象);
(2)字符串转JSON
var jsonobj=JSON.parse(string字符串);

5、三大范式
1NF:保证每列的原子性(不可分割),无重复的列
2NF:在1NF的基础上,每列都要和主键有关系,属性完全依赖于主键
3NF:在2NF的基础上,除与主键有关系外,其他的列之间不能有关系,并且也是对字段冗余的约束,属性不完全依赖于其他非主属性(确保每列与主键都是直接相关,而不是间接相关)。

6、MVC:程序架构
全名:Model(模型) view(视图) controller(控制器)
(1)Model:是应用程序中用于处理应用程序数据逻辑的部分,通常模型对象负责在数据库中存取数据(dao层)
(2)View:应用程序中处理数据显示的部分,通常依据模型数据创建的
(3)controller:应用程序中用户交互的部分,通常控制器复制从视图读取数据,控制用户输入,并想模板发送数据

7、盒子模型:

对于盒子模型这个,还有待进一步深究
标准模式解析计算,也是默认模式

(1)盒子总宽度/高度 = 内容区宽度 /高度+padding+border + margin
// 注: 这里的内容宽度与高度,就是在CSS中指定的宽度与高度,所以如果设置了margin或padding总的尺寸会发现变化

(2)怪异模式解析计算

即盒子总宽度/高度 = width/height + margin =内容区宽度 /高度+padding+border + margin
// 注: 这里的第一个等号后的width/height即指的就是CSS中设置的值。它就相当于内容宽高+padding+border
(注:一般都是使用的标准模式,而如果DOCTYPE缺失则在ie6,7,8 下将触发怪异模式);
8、npm全称,卸载模块怎么做
npm:(nodejs packge manage ):nodejs包(模块)管理器
卸载:卸载 npm 和 Node.js

先卸载 npm,命令是:sudo npm uninstall npm -g,然后卸载 Node.js.

Running which node will return something like /path/bin/node.

Then run cd /path

This is all that is added by Node.JS.

rm -r bin/node bin/node-waf include/node lib/node lib/pkgconfig/nodejs.pc share/man/man1/node.1

如果是 Ubuntu 系统并使用 apt-get 安装的,可以使用命令:
sudo apt-get remove nodejs

9、背景图片定位
在CSS中,背景图片的定位方法有3种:
  1)关键字:background-position: top left;
  2)像素:background-position: 0px 0px;
  3)百分比:background-position: 0% 0%;

10、css3阴影
box-shadow(x轴偏移值(正右负左),y轴偏移值(正下负上),模糊值,外延值,颜色,内外阴影(默认外阴影,内阴影insert))

11、浮动原理
浮动后,就脱离了标准文档流,在原来的位置上进行左或右的浮动,紧贴着父元素(默认为body文本区域)的左右边框
浮动后,元素在标准文档流中的位置就空出来了,有续的非浮动元素就向上填充。块级元素向上填充,与浮动元素的范围发生重叠时,会覆盖此元素;内联元素(不会被覆盖):想有空隙的地方插入。
注意:当一个大div里的内联元素都浮动了,那么这个div的宽度就变成了设的div的 宽度

清除浮动(还可以扩展盒子高度)
(1)clear left|right|both
(2)overflow:hidden

12、submit与button的区别

type=button 就单纯是按钮功能

type=submit 是提交表单,提交到action属性指定的地址


submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常都必须把submit改成button,即取消其自动提交的行为,否则,将会造成提交两次的效果,对于动态网页来说,也就是对数据库操作两次。或者在使用submit时验证时加return true或false。

submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上,submit会提交表单,button不会提交表单.
两者主要区别在于:
submit默认为form提交,可以提交表单(form).
button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情.当然,button也可以完成表单提交的工作.
INPUT type=submit 即发送表单,按回车提交表单
INPUT type=button 就是单纯的按钮功能,提交的是innerTEXT