CSS面试题--码动未来

1.简要说一下CSS的元素分类

块级元素:div,p,h1,form,ul,li;

行内元素 : span>,a,label,input,img,strong,em;

2.CSS隐藏元素的几种方法(至少说出三种)

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;

Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

Position:不会影响布局,能让元素保持可以操作;

Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

3.CSS清除浮动的几种方法(至少两种)

使用带clear属性的空元素

使用CSS的overflow属性;

使用CSS的:after伪元素;

使用邻接元素处理;

4.CSS居中(包括水平居中和垂直居中)

内联元素居中方案

水平居中设置:

1.行内元素

设置 text-align:center;

2.Flex布局

设置display:flex;justify-content:center;(灵活运用,支持Chroime,Firefox,IE9+)

垂直居中设置:

1.父元素高度确定的单行文本(内联元素)

设置 height = line-height;

2.父元素高度确定的多行文本(内联元素)

a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle;

b:先设置 display:table-cell 再设置 vertical-align:middle;

块级元素居中方案

水平居中设置:

1.定宽块状元素

设置 左右 margin 值为 auto;

2.不定宽块状元素

a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;

b:给该元素设置 displa:inine 方法;

c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;

利用display:table-cell属性使内容垂直居中;

使用css3的新属性transform:translate(x,y)属性;

使用:before元素;

5.写出几种IE6 BUG的解决方法

双边距BUG float引起的 使用display

3像素问题 使用float引起的 使用dislpay:inline -3px

超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

Ie z-index问题 给父级添加position:relative

Png 透明 使用js代码 改

Min-height 最小高度 !Important 解决’

select 在ie6下遮盖 使用iframe嵌套

为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)

6.对于SASS或是Less的了解程度?喜欢那个?

语法介绍

7.Bootstrap了解程度

特点,排版,插件的使用;

8.页面导入样式时,使用link和@import有什么区别?

link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;

页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

9.介绍一下CSS的盒子模型?

有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).

10.CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

id选择器( # myid)

类选择器(.myclassname)

标签选择器(div, h1, p)

相邻选择器(h1 + p)

子选择器(ul > li)

后代选择器(li a)

通配符选择器( * )

属性选择器(a[rel = “external”])

伪类选择器(a: hover, li: nth – child)

可继承的样式: font-size font-family color, UL LI DL DD DT;

不可继承的样式:border padding margin width height ;

优先级就近原则,同权重情况下样式定义最近者为准;

优先级为:

!important >  id > class > tag

important 比 内联优先级高

11.CSS3有哪些新特性?

CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),

对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba


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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,456评论 1 45
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,220评论 0 8
  • 每个行业无论是老板还是打工仔,想要出人头地,崭露头角,都要付出常人难以想象的艰辛,何况是竞争更加惨烈的娱乐圈呢?赵...
    优子room阅读 240评论 1 0
  • 赛前我心目中的七强排序: 刘郡格、宿涵、旦增、黎真吾、郑伟杰、周兴才让、Single Angel。这是基于我的主观...
    张德志2018阅读 1,235评论 0 0