行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
超链接访问过后hover样式就不出现的问题是什么？如何解决？ 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
9、清除浮动的用法？
1****）添加额外标签
在浮动元素末尾添加一个空的标签例如
，其他标签br等亦可。优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离。
2)父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；
**3)父元素设置 overflow：auto **属性
同样IE6需要触发hasLayout，演示和3差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。
**4）使用:after **伪元素
需要注意的是 :after是伪元素，不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加
10.html元素的id跟class什么区别
id和class是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时，二者都可用，但有区别？
- 1、在css样式表中书写时，id选择符前缀应加"#"，class选择符前缀应加"."
- 2、id属性在一个页面中书写时只能使用一次，而class可以反复使用
- 3、id作为元素标签用于区分不同结构和内容，而class作为一个样式，可以应用到任何结构和内容当中去
- 4、布局上的一般原则：id先确定结构和内容再为它定义样式。而class正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上
- 5、目前浏览器都允许同一个页面出现多个相同属性值的id，一般情况能正常显示，不过当javascript通过id来控制元素时就会出错
- 6、在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式。
** 12. 为什么要使用Div+CSS布局 形式与内容分离 **
- 大大减少页面代码，提高页面浏览速度 结构清晰，有利于SEO 缩短改版时间， 布局更方便 一次设计，多次使用 20. Block元素的特点是什么?哪些元素默认为Block元素 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度。 24、请写出超链接的顺序或者你在初始样式中的链接方法（要求默认无下划线，鼠标经过有下划线）
L-V-H-A （:link 选择器用于选取未被访问的链接。:visited 选择器对指向已访问页面的链接设置样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式，:active选择器用于设置点击链接时的样式。）
a：link { text-decoration:none; }
a：hover { text-decoration:underline; }
13.address不是html5新增的标签，而是在HTML4.01中就已经存在了，用于可定义一个地址或者文档作者或拥有者的联系信息。而article、section、time标签是html5新增的语义化标签，具体代表啥含义，咋用法就不多说了，可查看官方文档或一些html5技术论坛的相关说明。
14.JS库：
1. jquery.js
2. zepto.js ----jquery的精简版，专门用于手机上的，但是zepto主体默认是没有触摸组件的，触摸的js需要在其官网额外下载。
3.iscroll.js ---主要用于移动端网站和移动app页面的。常见的上拉刷新，下拉加载它都有，我没有用过，但盆友推荐过
15.前端框架：
1.响应式（UI框架为主）：
1(1).Bootstrap:国际品质、名声持久；ui样式和组件，基本的都有，比如按钮、轮播、图片等等。样式中规中矩（但是我们可以自己写CSS改变样式对不对）
1(2). frozenUi:FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。
遵循手Q样式规范，基本样式使用离线包的方式减少请求，并提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件，更优雅地在移动端上呈现更灵动的动画效果。
FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FronzenUI。
FrozenJS 的所有组件均以 zepto 的插件的形式存在。
1(3). amazeui : 也叫‘妹子UI’，我个人觉得：就ui样式上和组件上来说，中规中矩，常用的都有。但是js和CSS文件体积也不小。就产生时间上来说，不如bootstrap历史悠久，就开发团队上来说，不如前2者有名。我目前完！全！没发现它比bootstrap更好的地方，如果能用bootstrap做的网站，我肯定不会用amazeui来做。
16.session 和cookie区别
Session状态是保存在Server端的文件或者数据库中，每个Session是由Session Id来识别， 为了使客户端能够识别它自己，Session ID必须有Server端来创建然后发送到客户端，当客户端向Server端发送请求时，也需要发送Session ID.
如果Cookie没有用来保存Session ID, 那么Session会在浏览器关闭的时候失效， 或者用户通过连接到其他URL来打断POST或者query string传递，也就是说，session在用户离开这个站点的时候就会失效。
1、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息。
2、session中保存的是对象，cookie中保存的是字符串。
3、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到。而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的。
17.jquery自带了trim方法：
$.trim(``" abc "``) ；
自己写方法：
function trim(str) {
return str.replace(/(^\s+)|(\s+$)/g, ``""``);
}
trim(``" abc "``) ``// =abc
18.append after区别
append() & prepend()实在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。
三者区别
1. html()取得第一个匹配元素的内容，简单来说就是所取得的标签所包含的所有东西。
2.text():取得所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本
19.disabled问题
disabled 属性的作用是禁用
readonly 属性为只读，但没有禁用
通过表单提交，拥有disabled属性的表单元素处理页面是获取不到其值的，而readonly则可以。
20.get post区别
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
21.CSS Sprites优缺点
优点
1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
缺点
诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！
** 22.script标签放置位置**
一般script标签会被放在头部或尾部。头部就是里面，尾部一般指里[4-5]。
将script放在里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。讨厌的是浏览器在下载JS时，是不能多个JS并发一起下载的。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS，且浏览器下载JS时，就block掉解析其他HTML的工作[1]。
将script放在头部，会让网页内容呈现滞后，导致用户感觉到卡。所以yahoo建议将script放在尾部，这样能加速网页加载。
将script放在尾部的缺点，是浏览器只能先解析完整个HTML页面，再下载JS。而对于一些高度依赖于JS的网页，就会显得慢了。所以将script放在尾部也不是最优解，最优解是一边解析页面，一边下载JS。
所以[2]提出了一种更modern的方式：使用async和defer。80%的现代浏览器都认识async和defer属性[3]，这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS)，一边解析HTML。他的优点不是增加JS的并发下载数量，而是做到下载时不block解析HTML。
<script type="text javascript" src="path/to/script1.js" async="">
- <script type="text javascript" src="path/to/script2.js" async="">
- 带async属性的script会异步执行，只要下载完就执行，这会导致script2.js可能先于script1.js执行（如果script2.js比较大，下载慢）。defer就能保证script有序执行，script1.js先执行，script2.js后执行。
弹性盒子
-webkit-align-self: flex-start;
align-self: flex-start;
flex-direction: row | row-reverse | column | column-reverse|rtl
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
order
24.对WEB标准以及W3C的理解与认识
答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。 ，Javascript的事件流模型都有什么？
- “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
- “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
- “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。通过以下几个例子加深对this的理解。（1）作为函数调用
var name = 'Jenny';
function person() {
return this.name;
}
console.log(person()); //Jenny
上面这个例子在全局作用域中调用person()，此时的调用对象为window，因此this指向window，在window中定义了name变量，因此this.name相当于window.name，为Jenny。（2）作为对象的方法调用
var obj = {
name: 'Danny',
person: function() {
return this.name;
}
};
console.log(obj.person()); //Danny
在这个例子中，person()函数在obj对象中定义，调用时是作为obj对象的方法进行调用，因此此时的this指向obj，obj里面定义了name属性，值为Danny，因此this.name = "Danny"。（3）作为构造函数调用作为构造函数调用和普通函数调用的区别是，构造函数使用new关键字创建一个实例，此时this指向实例对象。
function person() {
return new person.prototype.init();
}
person.prototype = {
init: function() {
return this.name;
},
name: 'Brain'
};
console.log(person().name); //undefined
这是一个比较复杂的例子，涉及到了原型。首先，创建构造函数person，为函数重新定义原型，在原型上定义了两个方法init和name，其中init返回this.name。调用person函数的name属性，发现返回的是undefined，为什么不是Brain呢？我们看，调用person，返回person.prototype.init()的一个实例，假设返回的这个实例名为a，那么此时的this指向的就是a，a作为person.prototype.init()的一个实例，那么所有定义在person.prototype.init()中的方法等都可以被a调用，但是name属性定义在person的原型中，而非init函数中，因此返回undefined。（4）apply和call使用apply()和call()可以改变调用函数的对象，第一个参数为改变后调用这个函数的对象，其中apply()的第二个参数为一个数组，call的第二个参数为每个参数。
function person() {
return this.name;
}
var obj = {
name: 'Jenny',
age: 18
};
console.log(person.apply(obj)); //Jenny
使用apply函数改变了调用person的对象，是在obj对象下面调用person，不再是在window对象下调用了，因此this指向obj，this.name = "Jenny";
标签：常见问题,name,样式,元素,js,person,CSS From： https://www.cnblogs.com/Sultan-ST/p/16853927.html