面试的一些基础问题
一:css中的link和@import的区别?
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是: XML/HTML代码 <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" /> XML/HTML代码 <style type="text/css" media="screen"> @import url("CSS文件"); </style> 两者都是外部引用CSS的方式,但是存在一定的区别: 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。 区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。 区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。 区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。 补充:@import最优写法 @import的写法一般有下列几种: @import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别 @import url(style.css) //Windows NS4, Macintosh NS4不识别 @import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别 @import url("style.css") //Windows NS4, Macintosh NS4不识别 由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
二:display:none和visibility:hidden的区别?
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别。
visibility:hidden 隐藏 ,但在浏览时保留位置
display:none视为不存在,且不加载
1、visibility:hidden--为隐藏的对象保留其物理空间
HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
2、display: none--不为被隐藏的对象保留其物理空间
HTML元素(对象)的宽度、高度等各种属性值都将“丢失”
比如说:
<body > <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body>
![](https://images2015.cnblogs.com/blog/905548/201603/905548-20160331125120098-1138947701.png)
<ul> <li style="display: none">1</li> <li>2</li> <li style="visibility: hidden">3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
则输出的为:
三:介绍一下盒子模型?
在网页设计中常听的属性名:内容(content)、填充/内边距(padding)、边框(border)、外边距(margin), CSS盒子模式都具备这些属性。
四:介绍一下BFC规范?
CSS 定位规则之 BFC: 1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候, BFC 提供了一个环境, 在这个环境中按照一定规则进 行布局不会影响到其它环境中的布局。
比如浮动元素会形成 BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素
之间是互不影响的。也就是说,如果一个元素符合了成为 BFC 的条件,该元素内部元素的布局和定位 就和外部元素互不影响(除非内部的盒子建立了新的 BFC), 是一个隔离了的独立容器。 在 CSS3 中,BFC 叫做 Flow Root。 2. 形成 BFC 的条件(符合以下任一条件即可): 1) float 的值不为 none; 2) overflow 的值不为 visible; 3) display 的值为 table-cell、table-caption 和 inline-block 之一; 4) position 的值不为 static 或 relative 中的任何一个; 3. BFC 常见作用 1) 包含浮动元素 BFC 会 根据子元素的情况自 适应 高度 ,这个 特性 是 对父元素 使 用 overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的 原理。 此外 网上 有 资 料 说 使用 display:table 可以 隐 式 触 发 table-cell/table-caption,来创建 BFC。 <div style="border:1px solid #00F;overflow:hidden;width:300px;"> <div style="float:left;background:#939;">我的父元素是 BFC</div> </div> <div style="line-height:3em;">----------我是华丽分割线-----------</div> <div style="border:1px solid gray;width:300px;"> <div style="float:left;background:#3C6;">我的父元素不是 BFC</div> </div> 上面的例子中,有两个 div ,它们各包含一个设置了浮动的 div 元素,但 第二个 div 出现了“高度塌陷”,这是因为内部的浮动元素脱离了普通流,因此 该 div 相当于一个空标签,没有高度和宽度,即高度为 0 ,上下边框也重叠在 一起。而第二个 div 使用 overflow: hidden 创建了 BFC ,可以包含浮动 元素,因此能正确表现出高度,其边框位置也正常了。 PS:此方法只能在支持 BFC 的浏览器(IE8+, firefox, chrome, safari)通 过创建新的 BFC 闭合浮动;在不支持 BFC 的浏览器 (IE6-7),需要通过触发 hasLayout 闭合浮动。 2) 不被浮动元素覆盖 浮动元素会无视兄弟元素的存在, 覆盖在兄弟元素的上面, 为该兄弟元素创建 BFC 后可以阻止这种情况的出现,如下示例: <div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮动元素 </div> <div style="width:200px;height:80px;background:#30F;color:#fff;"> 我是非浮动元素,并且没有创建 BFC </div> <div style="line-height:3em;">----------我是华丽分割线-----------</div> <div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮动元素 </div> <div style="width:200px;height:80px;background:#30F;color:#fff;display:inl ine-block;"> 我是非浮动元素,创建了 BFC </div> 效果图所示,蓝色背景的元素通过 display:inline-block 创建了 BFC, 则浮动的兄弟元素就不覆盖在该元素上面了。 以上的情况仅是元素宽度之和没有超出父元素宽度的情况,假设浮动元素宽度 和它的非浮动兄弟元素宽度都超过了父元素的宽度,非浮动元素会下降到下一行, 即处于浮动元素下方,如下所示: <div style="width:300px;"> <div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮动元素 </div> <div style="width:200px;height:80px;background:#30F;color:#fff;overflow:hi dden;"> 我是非浮动元素,创建了 BFC </div> </div> 3) 阻止父子元素的 margin 折叠 在 《认识 margin 折叠》 一文中讲过外边距折叠的规则:仅当两个块级元素毗 邻并且在同一个块级格式化上下文时,它们垂直方向之间的外边距才会叠加。也就 是说,即便两个块级元素相邻,但当它们不在同一个块级格式化上下文时它们的边 距也不会折叠。示例如下。 <div style="margin-top:20px;background:yellow;width:300px;"> <div style="margin-top:20px;"> 我的上外边距是 20px,父级元素不是 BFC </div> </div> <div style="margin-top:20px;background:yellow;overflow:auto;width:300px;"> <div style="margin-top:20px;"> 我的上外边距是 20px,父级元素是 BFC </div> </div> 如上图的例子,上述 div 元素都有顶部外边距,但第二个 div 的边距没有 与它的子元素的外边距折叠。这是因为第二个 div 创建了新的 BFC。 以上代码在 IE8、IE10 和 chrome 测试通过,了解 IE6-7 的 兼容问题解决方法,
五:举几个兼容性的列子?
1:比如过去行间样式?
currentstyle 获取计算 后的样式-- --------------IE下可用
getcomputedstyle(oDiv,'true/0/abc/false')-----火狐
2:节点获取
firstChild--IE下用
firstElementChild--FF下可用
3:事件对象获取?
IE---event.clientX
FF--ev.clientX
4:事件绑定?
---IE独有下的绑定事件
attachEvent(事件名,函数)--反向执行,且一个按钮可执行多个事件的功能。
detachEvent()--解除绑定
---FF/chorme下的绑定事件
addEventListener
removeEventListener--解除绑定
六:如何清除浮动?
1,在浮动元素后面增加<br/>标签; <br/>标签有自带的清除浮动属性; 2,在浮动元素后面增加一个清除浮动层; <div> <div style="float:left"></div> <div style="float:left"></div> <div style="clear:both"></div> </div> 3,给浮动元素添加overflow:auto;overflow:hidden样式; 4,为最后浮动元素设置如下样式,: /* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; } 其原理是,在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来,并给它
设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。 5,另一种简洁的办法: .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { zoom:1; } 原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是,隐藏这个空白使用的是 display: table。
而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。 值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的,跟清理浮动没有多大的关系。但因为浮动会
创建 block formatting context,这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有
margin-top 的话,应该让他们不折叠(虽然这种情况并不常见)。
6.设置父级合适的的宽高,从而来避免就浮动。
七:如何设置水平居中和垂直居中?
1:CSS3使用transform. transform中translate偏移的百分比值是相对于自身大小的,无论绝对定位元素的尺寸是多少,
其都是水平垂直居中显示的,但问题是兼容性不好
比如:
transform:translate(-50%,50%);
2:margin:auto实现绝对定位元素的居中
margin:0px auto;
3:要提前知道div宽度与高度的值实现绝对定位元素的居中
4:对支持 display:table-cell 的 ie8 和 firefox 用 display:table-cell 和 vertical-align:middle 来实现居中,
对不支持 display:table-cell 的 ie6 和 ie7 使用 hack 写法。
什么是CSS hack?
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、 解析不一样,
导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本
写特定的CSS 样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
八:说说position有哪些值,并指出值之间的区别?
absolute:
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed:
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative:
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit:规定应该从父元素继承 position 属性的值。
绝对定位:是相对父级是绝对定位的,此时父级一般为相对定位。
相对定位:是指相对于上一个相对定位,相对于同级的标签
九:HTML5新增了那些特性?
可以参考:http://www.cnblogs.com/summers/archive/2013/05/30/3107623.html
HTML5最新的交互元素:
1.details和summary
details元素:是指用来描述文档或文档片段的信息
summary元素:与details元素一起使用,用于说明文档的标题。
<!DOCTYPE HTML> //HTML5新特性,只有在这种模式下才生效 <html> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body > <details> <summary>交互</summary> <!--第一级标题 --> <details> <summary>交互二</summary> <!--第二级标题 --> <p>内容</p> </details> </details> </body> </html>
2.新标签的增加
header ,hgroup ,aside ,section ,article,datalist,mark(类似文本高亮)
<!DOCTYPE HTML> <html> <head> <style> </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body > <header> <!-- 用于显示页面或者指定区域的页眉或头部 --> <h1>HTML 5元素</h1> <p>header元素事列</p> </header> <hgroup> <!-- 分组,如对文章的标题和副标题进行组合 --> <h1>HTML 5元素</h1> <h2>header元素事列</h2> </hgroup> <article> <!-- 用于定义独立的内容 --> <header> <hgroup> <h1>HTML 5元素</h1> <h2>header元素事列</h2> </hgroup> </header> </article> <section><!-- 用于定义文档中的节,如章节,页眉,页脚,或文档中的其它部分 --> <h1>HTML 5元素</h1> <h2>header元素事列</h2> </section> <aside> <!-- 用于定义所处内容之外的内容,但又与附近内容有相关性,如显示某篇文章的作者信息 --> <h1>HTML 5元素</h1> <h2>header元素事列</h2> </aside>
<input list="provice">
<datalist id="provice"> <!-- 与input一起使用,定义input可能出现的值 -->
<option value="北京">
<option value="上海">
<option value="南京">
</datalist>
</body> </html>
十:css3新增了那些特性?
1:CSS3 选择器(Selector)
2:表单tbody的应用
3:Font-face 特性
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
4:Word-wrap & Text-overflow 样式
加入了“word-wrap: break-word”,当设置或检索当当前行超过指定容器的边界时,自动换行。
对于“text-overflow”属性,有“clip”和“ellipsis”两种可供选择,后者为省略号隐藏显示。
5:文字渲染(Text-decoration)
6:CSS3 的多列布局(multi-column layout)
7:颜色的透明度
8:border,CSS3 提供了圆角的支持
9:HSL 的透明度
10:CSS3 的渐变效果
11: 元素和文字的阴影
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}
设置很简单,对于文字阴影:表示 X 轴方向阴影向右 5px,Y 轴方向阴影向下 2px,
而阴影模糊半径 6px,颜色为 rgba(64, 64, 64, 0.5)。其中偏移量可以为负值,负值则反方向。元素阴影也类
12:反射和倒影
13:CSS3 的盒子模型
十一:说说对cookie的理解?
Cookie就是由服务器发给客户端的特殊信息,而这些信息以文本文件的方式存放在客户端,然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。
十二:说说对浏览器对本地存储的理解?
在日常的操作过程中,在所难免的需要利用Javascript在用户浏览器中本地存储一些数据,以达到一些不能用服务器来识别的功能,如识别用户的第二次 访问等。
常用的方法有cookie,IE浏览器的userData,以及localStorage等,由于userData只有IE支持,它的可扩展性并 不大。
可参考:http://www.iefans.net/javascript-bendi-chucun-qianxi/
十三:IE6下出现哪些bug?
一、IE6双倍边距bug
当页面上的元素使用float浮动时,不管是向左还是向右浮动;只要该元素带有margin像素都会使该值乘以2,例如“margin- left:10px” 在IE6中,该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG
二、IE6中3像素问题及解决办法
当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部,当设定高度后又跑到容器的相反侧了。要解决这类BUG的话,需要使布局在同一行的元素都加上float浮动。
三、IE6中奇数宽高的BUG
IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中要问题是出在奇数高宽上。要解决此类问题,只需要尽量将外部定位的div高宽写成偶数即可。
四、IE6中图片链接的下方有间隙
IE6中图片的下方会存在一定的间隙,尤其在图片垂直挨着图片的时候,即可看到这样的间隙。要解决此类问题,需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0
五、IE6下空元素的高度BUG
如果一个元素中没有任何内容,当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。
解决的方法有四种:
1.在元素的css中加入:overflow:hidden
2.在元素中插入html注释:<!– >
3.在元素中插入html的空白符:
4.在元素的css中加入:font-size:0
六、重复文字的BUG
在某些比较复杂的排版中,有时候浮动元素的最后一些字符会出现在clear清除元素的下面。
解决方法如下:
1.确保元素都带有display:inline
2.在最后一个元素上使用“margin-right:-3px
3.为浮动元素的最后一个条目加上条件注释,<!–[if !IE]>xxx<![endif]–>
4.在容器的最后元素使用一个空白的div,为这个div指定不超过容器的宽度。
七、IE6中 z-index失效
具体BUG为,元素的父级元素设置的z-index为1,那么其子级元素再设置z-index时会失效,其层级会继承父级元素的设置,造成某些层级调整上的BUG。详细解释可以阅读IE6中部分情况下z-index无效的原因,以及解决办法
结语:实际上IE6中,很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代 码时要记住,一旦使用了float浮动,就为元素增加一个display:inline样式,可以有效的避免浮动造成的样式错乱问题。使用空DIV时,为 了避免其高度影响布局美观,也可以为其加上font-size:0 这样就很容易避免一些兼容上的问题。