前端面试题系列

5 篇文章 0 订阅
2 篇文章 0 订阅
  1. <!DOCTYPE>标签的定义与用法。
<!DOCTYPE> 声明必须位于 HTML 5 文档中的第一行,也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。

doctype 声明不属于 HTML 标签; 它是一条指令,告诉浏览器编写页面所用的标记的版本。


在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。


HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)

2.块级元素和行内元素都有哪些?
内联元素(inline element)* 
a - 锚点* 
big - 大字体* 
br - 换行* 
cite - 引用* 
code - 计算机代码(在引用源码的时候需要)
em - 强调* font - 字体设定(不推荐)* 
i - 斜体* 
img - 图片* 
input - 输入框* 
label - 表格标签*
select - 项目选择* 
small - 小字体文本* 
span - 常用内联容器,定义文本内区块* 
strong - 粗体强调* 
sub - 下标* 
sup - 上标* 
textarea - 多行文本输入框*

块级元素
div - 常用块级容易,也是css layout的主要标签
dl - 定义列表
fieldset - form控制组* 
form - 交互表单* 
h1 - 大标题*  h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* 
hr - 水平分隔线* 
isindex - input prompt* menu - 菜单列表
ol - 排序表单* 
p - 段落* 
pre - 格式化文本* 
table - 表格* 
ul - 非排序列表可变元素可变元素为根据上下文语境决定该元素为块元素或者内联元素。
button - 按钮* 

3.你真的了解HTML吗  
样式分离,标签使用,xhtml和html的区别(标签闭合)

4.css hack技巧
百度百科:http://baike.baidu.com/link?url=k9_sexJW0BcTi8zGEQ07mr2rmbzg23sOy49DuHHDW4n1ycyBaaC7NJUPwPQbGba0dsGvCYq6eX1t5dpJNGNPy_#2
1:!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器
 
以下为引用的内容:
.browserTest 

    border:20px solid #60A179 !important;
    border:20px solid #00F;
}
 
在Mozilla中或者IE7浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:
在IE6中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:
2:*
IE都能识别*;标准浏览器(如火狐)不能识别*
区别IE6与火狐
 
以下为引用的内容:
.browserTest 

    border:20px solid #60A179;
    *border:20px solid #00F;

 
区别IE7与火狐
 
以下为引用的内容:
.browserTest 

   border:20px solid #60A179;
   *border:20px solid #00F;

区别IE7,IE6与火狐
.browserTest 

   border:20px solid #60A179;
   *border:20px solid #00F !important;
   *border:20px solid ###;
}
 
3:_
IE6支持下划线,IE7和firefox均不支持下划线
区别IE7,IE6与火狐
 
以下为引用的内容:
.browserTest 

   border:20px solid #60A179;
   *border:20px solid #00F;
   _border:20px solid ###;
}
/*不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面*/
 
4:*+html 与 *html
*+html 与 *html 是IE特有的标签, firefox 暂不支持。而*+html 又为 IE7特有标签
 
以下为引用的内容:
.browserTest { width: 120px; }      /* FireFox fixed */ 
*html .browserTest { width: 80px;}  /* ie6 fixed */ 
*+html .browserTest { width: 60px;} /* ie7 fixed */


5.介绍ccss的盒模型
内容(CONTENT)就是盒子里装的东西;
而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
填充只有宽度属性,可以理解为生活中盒子每个HTML标记都可看作一个盒子;
6.css层叠是什么,介绍一下
CSS层叠是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。每个CSS选择器都会有一个权重(行内1000,id100,class10,tag1、可以这样认为),当两个选择器同时配置同一元素的同一属性时(比如一个设置color:red,另一个color:black),就会产生冲突,而解决冲突的方案就是CSS选择器的权重,权重高的来覆盖权重低的。
另外,继承的属性是权重重最轻的,会被上面的四个定义方式覆盖。

7.css浏览器兼容问题

1. margin加倍的问题     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;    例如:    <#div id=”imfloat”>    相应的css为    #IamFloat{    float:left;    margin:5px;/*IE下理解为10px*/    display:inline;/*IE下再理解为5px*/} 

2.浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;  


8. 有时会被问到些刁钻点的题,比如position值都有哪些,CSS3都有哪些新内容...
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值