学习笔记七常见前端面试题之HTMLCSS部分二.docx
- 文档编号：8143439
- 上传时间：2023-01-29
- 格式：DOCX
- 页数：10
- 大小：58.93KB
学习笔记七常见前端面试题之HTMLCSS部分二.docx
《学习笔记七常见前端面试题之HTMLCSS部分二.docx》由会员分享，可在线阅读，更多相关《学习笔记七常见前端面试题之HTMLCSS部分二.docx（10页珍藏版）》请在冰豆网上搜索。
学习笔记七常见前端面试题之HTMLCSS部分二
前端攻城狮学习笔记七：
常见前端面试题之HTML/CSS部分
（二）
前端页面有哪三层构成，分别是什么？
作用是什么？
1、结构层：
由HTML或XHTML之类的标记语言负责创建，仅负责语义的表达。
解决了页面“内容是什么”的问题。
2、表示层：
由CSS负责创建，解决了页面“如何显示内容”的问题。
3、行为层：
由脚本负责。
解决了页面上“内容应该如何对事件作出反应”的问题。
css的基本语句构成是什么？
选择符{属性1:
值1;属性2:
值2;...}等。
主流的浏览器分别是什么内核？
IE：
Trident内核
MozillaFireFox：
Gecko内核
Chrome、Safari：
Webkit内核
Opera：
Presto内核
经常遇到的浏览器兼容性有哪些？
如何解决？
1、浏览器默认的margin和padding不同。
解决方案是加一个全局的*{margin:
0;padding:
0;}来统一。
2、IE6双边距bug:
块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
解决方案是在float的标签样式控制中加入display:
inline;将其转化为行内属性。
测试代码如下：
.one{
float:
left;
width:
150px;
height:
150px;
background:
#EEE;
margin:
5px05px150px;
}
正常的应该是：
但在IE6中是这样的：
加上display:
inline;后才正常。
3、在ie6，ie7中元素高度超出自己设置高度。
原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。
解决方案是加上overflow:
hidden或设置line-height为更小的高度。
测试代码：
.one{
height:
5px;
width:
100px;
background:
#F60;
}
HTML没变，还是
这个一看就知道不止5px，CSS改为下面两种之一就可以了：
.one{
height:
5px;
width:
100px;
overflow:
hidden;
background:
#F60;
}
/*--或--*/
.one{
height:
5px;
width:
100px;
font-size:
2px;
line-height:
2px;
background:
#F60;
}
注意这里加了line-height:
2px后还要加上font-size才行。
效果如图：
4、min-height在IE6下不起作用。
解决方案是添加height:
auto!
important;height:
xxpx;其中xx就是min-height设置的值。
5、透明性IE用filter:
Alpha（Opacity=60），而其他主流浏览器用opacity:
0.6;
6、a（有href属性）标签嵌套下的img标签，在IE下会带有边框。
解决办法是加上aimg{border:
none;}样式。
7、input边框问题。
去掉input边框一般用border:
none;就可以，但由于IE6在解析input样式时的BUG（优先级问题），在IE6下无效。
ie6的默认CSS样式，涉及到border的有border-style:
inset;border-width:
2px;浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。
IE6对INPUT的渲染存在bug，border:
none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:
none;。
解决方案是用:
border:
0或border:
0none;或border:
none:
border-color:
transparent;，推荐用第三种方案。
8、父子标签间用margin的问题，表现在有时除IE（6/7）外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。
测试代码：
.box1{
height:
150px;
background:
#CCC;
}
.box1_1{
height:
50px;
margin-top:
50px;
background:
#AAA;
}
chrome&FireFox&IE8&IE9下的效果为：
IE6&IE7下的效果：
对于这两种显示效果，我倒认为IE6&IE7是正确的，不知道是否有朋友能给出解释。
解决办法就是父子标签间的间隔建议用padding，兄弟标签间用margin。
9、假设两块div，第一块浮动而第二块没有浮动，IE6下第二块就会跑到第一块边上，并且二者之间还留有间距，但标准浏览器中是第二块重合于第一块。
测试代码：
div{
width:
100px;
height:
100px;
border:
1pxsolid#CCC;
}
.one{
float:
left;
height:
50px;
}
铝散热器项目年度预算报告.docx
