前端面试题

1.CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?

设置display属性为none,或者设置visibility属性为hidden

设置宽高为0,设置透明度为0,设置z-index位置在-1000em

设置text-indent:-9999px;

2.超链接访问过后hover样式就不出现的问题是什么?如何解决?

答案:被点击访问过的超链接样式不再具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)

3.什么是Css Hack?ie6,7,8的hack分别是什么?

答案:针对不同的浏览器写不同的CSS code的过程,就是CSS hack。

示例如下:

#test{

background-color:yellow;    /*ie8*/

+background-color:pink;        /*ie7*/

_background-color:orange;       /*ie6*/    }

更好的方式是使用IE条件判断语句:

内容

4.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?

块级元素(block)特性:

总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)、边框(border)和外边距(margin)都可控制;

内联元素(inline)特性:

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)还有border top/bottom都不可改变(也就是padding和margin的left和right是可以设置的),就是里面文字或图片的大小。

浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行)

答案:可以用于消除inline-block元素间的换行符空格间隙问题。

5.什么是外边距重叠?重叠的结果是什么?

外边距重叠就是margin-collapse。

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则:

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

两个外边距一正一负时,折叠结果是两者的相加的和。

6.rgba()和opacity的透明效果有什么不同?

rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,

而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)

7.css中可以让文字在垂直和水平方向上重叠的两个属性是什么?

垂直方向:line-height

水平方向:letter-spacing

那么问题来了,关于letter-spacing的妙用知道有哪些么?

答案:可以用于消除inline-block元素间的换行符空格间隙问题。

8.如何垂直居中一个浮动元素?

// 方法一:已知元素的高宽

#div1{

background-color:#6699FF;

width:200px;

height:200px;

position: absolute;        /*父元素需要相对定位*/

top: 50%;

left: 50%;

margin-top:-100px ;   /*二分之一的height,width*/

margin-left: -100px;

}

//方法二:未知元素的高宽

#div1{

width: 200px;

height: 200px;

background-color: #6699FF;

margin:auto;

position: absolute;        /*父元素需要相对定位*/

left: 0;

top: 0;

right: 0;

bottom: 0;

}

9.px和em的区别。

px和em都是长度单位,区别是:

px值固定,容易计算。

em值不固定,是相对单位,其相对应父级元素的字体大小会调整

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 第一部分HTML&CSS整理答案1.什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HTML5...
    Programmer客栈阅读 2,001评论 0 12
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,462评论 1 19
  • 一、HTML 1. 针对移动浏览器端开发页面,不期望用户放大屏幕,且要求“视口(viewport)”宽度等于屏幕宽...
    darr250阅读 18,324评论 0 26
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,118评论 2 19