CSS相关面试题

css篇

---

一、CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式：
属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

1. 条件Hack

条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。

可以通过IE条件注释载入 不同的CSS、JS、HTML和服务器代码等。

2. 属性Hack

比如IE6能识别下划线“*”和星号“*”，
IE7能识别星号“，但不能识别下划线，而firefox两个都不能认识。

3. 选择符Hack

比如IE6能识别html .class{},IE7能识别*+html .class{}

4. 浏览器优先级别:

书写顺序一般为FF(FireFox火狐) IE7 IE6

二、css盒模型 ?

1.盒子模型有哪两种

标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)

怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

2.标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

3. JS盒模型

怎么获取和设置box的内容宽高

IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

三、css布局中的BFC问题 ?

1.什么是BFC

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。

2.如何触发BFC

在box属性值为这些的情况下，都会让所属的box产生BFC。

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

3.BFC的应用

可以用来自适应布局

利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

四、元素居中的三种方式 ?

方法一：可以用 transform:translate(-50%,-50%)最常用方法

方法二：父元素设置成弹性盒，子元素横向居中，纵向居中

 display: flex;
 justify-content: center;
 align-items: center;

方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。

五、两栏布局、三栏（圣杯、双飞翼）布局 ?

超链接 ？？？？

六、清除浮动的4种方式？

一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 (类名可以随意），设置clear:both;即可）

二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。

三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，

四、使用before和after双伪元素清除浮动：（较常用推荐）、

七、src与href的区别?

href 是指向网络资源所在位置，建立和当前文档之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片

八、H5C3有哪些新特性？

h5

1.语义化标签 - header、footer、aside、section、article、nav

2.表单输入类型 - email、url、number、range、Date Pickers、search、color

3.表单属性 - autocomplete、placeholder、form

4.视频音频 - video、audio

5.画布 - canvas

6.伸缩矢量图 - svg

7.拖拽属性 - draggable

8.事件 - resize - input

9.地理定位 - Geolocation

10.本地存储 - sessionStorage 和 localStorage

11.应用程序缓存 application cache - 创建 chche manifest 文件

12.文件通讯协议 - websocket

13.文件读取 - fileReader

14.类名操作 - classlist

css3

1.选择器 - :nth-child() - :nth-of-type() - :checked - :disabled

2.盒模型 - box-sizing

3.背景 - background-image、background-size、background-origin

4.渐变 - linear-gradient、radial-gradient

5.边框 - border-radius、border-image

6.阴影 - box-shadow、text-shadow

7.2D/3D转换 - transform：translate rotate scale skew

8.过渡 - transition

9.动画 - keyframes、animation

10.弹性盒子 - flex

11.媒体查询 - @media