1.display:none与visibility:hidden的区别
相同：他们都能让元素不可见
区别：
- display:none会让元素完全消失，不再占据任何空间；visibility:hidden会让元素不可见但元素本来的空间继续占据，只是内容不可见。
- display:none是非继承属性，子孙节点会跟随父节点一起消失，即使修改子孙节点属性也无法显示；visibility:hidden是继承属性，子孙节点继承父节点消失，但通过设置visibility属性可以让子孙节点显示。
2.link与@import的区别
- link是HTML方式，@import是CSS方式
- link最大限度支持并行下载，@import过多嵌套导致串行下载
- link可以通过rel="alternate stylesheet"指定候选样式
- @import必须在样式规则之前，可以在css文件中引用其他文件
- 总体来说：link优于@import
3.CSS有哪些继承属性
- 关于文字排版的属性：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow - line-height
- color
- visibility
- cursor
4.外边距折叠
外边距折叠就是margin-collapse
- 两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是他们两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者相加的和
5.标准CSS盒子模型和低版本IE的盒子模型
- css盒模型也称标准(W3C)盒模型，ie盒模型也称怪异盒模型
- 标准盒模型：元素宽度 = width + padding + border + margin
- 怪异盒模型：元素宽度 = width + margin
6.CSS的选择器
- id选择器（"#id"）
- 类选择器（".class"）
- 标签选择器（“div,h1,p”）
- 相邻选择器（“p1 + p2”）
- 子选择器（“ul > li”）
- 后代选择器（“ul li”）
- 通配符选择器（"*“”）
- 属性选择器（“a[rel = ‘external’]”）
- 伪类选择器（“a:hover”）
7.CSS3新增伪类
- li:first-of-type 选择属于其父元素的首个元素的每个元素
- li:last-of-type 选择属于其父元素的最后一个元素的每个元素
- li:only-of-type 选择属于其父元素唯一的元素的每个元素
- li:only-child 选择属于其父元素的唯一子元素的每个元素
- li:nth-child(n) 选择属于其父元素的第n个子元素的每个元素
- :after 在元素之前添加内容，常用来清除浮动
- :before 在元素之后添加内容
- :enabled 选择器匹配每个已启用的元素，常用在表单元素上
- :disabled 控制表单按钮的禁用状态
- :checked 单选框或者复选框的选中状态
8.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中
如果需要居中的元素为常规流中的lnline元素，为父元素设置text-align:center即可实现元素居中
如果需要居中的元素为block元素：1.为元素设置宽高 2.设置左右maigin为auto
如果需要居中的元素为浮动元素：1.为元素设置宽高 2.position:relative 3.浮动方向偏移量设置为50% 4.浮动方向上的margin设置为元素宽高的一半乘以-1
如果需要居中的元素为绝对定位元素：1.为元素设置宽高 2.设置左右偏移量都为0 3.设置左右外边距都为auto
9.如何竖直居中一个元素
- 绝对定位居中
- 如果居中元素为行内元素，可以设置父级height与line-height相等
- 设置margin/padding居中
- 相对位置偏移居中
- flex居中设置align-item:center
10.display有哪些值以及他们的作用
- block 块级元素，独占一行，可以设置宽高
- inline-block 内联块元素，并排显示，可以设置宽高
- inline 内联元素，并排显示，不可以设置宽高
- none 此元素必会被显示
- list-item 此元素会作为列表显示
- table 此元素会作为块级表格来显示
- inherit 规定应该从父元素继承display属性的值
11.position及relative和absolute定位原点
- absolute 绝对定位，相对于上一个定位的父元素进行定位
- fixed 固定定位，相对于浏览器窗口进行定位
- relative 相对定位，相对于其正常位置进行定位
- static 默认值，没有定位，元素出行在正常文档流中
- inherit 规定从父元素继承position属性的值
12.CSS3有哪些新特性
- 新增选择器 li:nth-child(n)
- 弹性盒模型 display:flex
- 多列布局 column-count:num
- 媒体查询 @media(max-width:520px){.box:{column-count:1}}
- 个性化字体 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot)}
- 颜色透明度 color:rgba(255,0,0,0.5)
- 圆角 border-radius:50%/20px
- 渐变 background:linear-gradient(red,gold,blue)
- 阴影 box-shadow:2px 2px 2px rgba(0,64,128,0.5)
- 倒影 box-reflect:below 2px
- 文字装饰 text-stroke-color:red
- 文字溢出 text-overflow:ellipsis
- 背景效果 background-size: 100px 100px
- 边框效果 border-image:url(ak.png) 0 10
- 平滑过渡 transition:all 0,3s ease-in 0.1s
- 动画 @keyframes anim-1 {50%{border-radius:50%}} animation:anim-1 1s
- 转换
1.旋转 transform:rotate(90deg)
2.倾斜 transform:skew(90deg,-10deg)
3.位移 transform:translate(20px,20px)
4.缩放 transform:scale(0.5)
12.用css创建一个三角形的原理
把上左右三边的边框隐藏掉
13.一个满屏品字布局如何设计
- 上面的div宽度100%
- 下面的两个div分别宽50%
- 然后用float或者inline使其不换行即可
14.li与li之间有空白间隙是什么原因引起的，如何解决
行框的排列会受到中间空白(回车/空格)等的影响，因为空格也属于字符，这些空白也会被应用样式占据空间，所以会有间隔，把字体大小设置为0就可以解决了
15.display:inline-block 什么时候会显示间隙？
- 相邻的inline-block元素之间有换行或者空格的情况下
- 非inline-block水平元素设置为inline-block也会有水平间距
- 可以借助vertical-align:top消除垂直间隙
- 可以在父级加font-size:0消除垂直间隙
- 把li标签写到同一行可以消除垂直间隙
16.display:inline-block间隙怎么解决
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
17.css定义的权重
1.如果一个声明来自style属性而不是选择器，记做1或者a=1（在一个html文档中，元素"style"的值是样式表规则，这个规则中没有选择器，所以a=1,b=0,c=0,d=0）
2.选择器中id属性的个数记做b
3.选择器中其他属性以及伪类的个数记做c
4.选择器中元素以及伪元素的个数记做d
a,b,c,d只是在各自位置里数字的累加，而不会越级
权重最高的是!imporant，会覆盖以上所有，行内样式也高不过他
18.CSS优先级算法如何计算
- 优先级就近原则，同权重情况下样式定义最近者为准
- 载入样式以最后载入的为准
- 优先级为：!important > id > class > tag
19.浮动与清除浮动
浮动的元素可以向左或者向右移动，直到他的外边缘碰到包含框或者另一个浮动元素的边框为止。由于浮动元素脱离了标准文档流，所以文档的标准文档流的块框表现的就像浮动元素不存在一样。浮动的元素就会漂浮在标准文档流的元素上
解决办法：
1.父级元素定义伪类:after和zoom
2.在结尾处添加空div clear:both
3.父元素设置height
4.父元素设置overflow:hidden
5.父元素设置overflow:auto
6.父元素也一起浮动
7.父元素定义display:table
8.结尾处添加 br 标签 clear:both
20.box-sizing常用的属性有哪些，分别有什么作用
- box-sizing:content-box 默认的标准盒模型元素效果
- box-sizing:border-box 触发怪异盒模型元素的效果
- box-sizing:inherit 继承父元素 box-sizing 属性的值
21.列举几种隐藏元素的方法
- visibility:hidden 这个属性只是简单的隐藏某个元素，但元素占用的空间仍然存在
- opacity:0 CSS3属性，设置0可以使一个元素完全透明
- position:absolute 设置一个很大的left负值定位，使元素定位在可见区域之外
- display:none 元素会变得不可见，并且不再占用文档空间
- transform:scale(0) 将一个元素无限缩小，元素将不可见，元素原来的位置将被保留
-
HTML5属性，效果和display:none相同，但这个属性用于记录一个元素的状态
- height:0 将元素高度设为0，并消除边框
- filter:blur(0) CSS3属性，将一个元素的模糊度设置为0，从而使元素不可见
22.rgba() 和 opacity 的透明效果有什么不同
- opacity 作用于元素以及元素内的所有内容的透明度
- rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
23.css 属性 content 有什么作用
content 属性专门应用在 before / after伪元素上，用于插入额外内容或样式
24.请解释一下 CSS3 的 Flexbox(弹性盒模型)以及适用场景
Flexbox 用于 不同尺寸屏幕中创建可自动扩展和收缩布局
25.请列出多种高等布局
- 在列的父元素上使用这个背景图进行Y轴铺放，从而实现一种高等列的假象
- 模仿表格布局等高列效果：兼容性不好，在IE6-7无法正常运行
- css3 flexbox 布局：.container{display:flex;align-items:stretch}
26.圣杯布局的实现原理
要求：三列布局，中间主体内容前置且宽度自适应，两边内容定宽
好处：重要的内容放在文档流前面可以优先渲染
原理：利用相对定位、浮动、负边距布局，而不添加额外标签
27.什么是双飞翼布局？实现原理
双飞翼布局：对圣杯布局的改进，消除其相对定位布局的局限性
原理：主体元素设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位
28.在 CSS 样式中常使用 px、em 在表现上有什么区别
- px 相对于显示器屏幕分辨率，无法使用浏览器字体放大功能
- em 值并不是固定的，会继承父级的字体大小：em = 像素值 / 父级 font-size
29.为什么要初始化 CSS 样式
- 不同浏览器对有些标签样式的默认值解析不同
- 不初始化 CSS 会造成各种浏览器之间的页面显示差异
- 可以使用 reset.css 或 Normalize.css 做 CSS 初始化
25.reset.css 和 Normalize.css 理解
reset.css 意为重置默认样式。HTML 中大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式
Eric Meyer(CSS Reset)推荐
Normalize.css 只是一个很小的 css 文件，但他在默认的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 css reset，Normalize.css 是一种现代化的，为 HTML5 准备的优质替代方案。
Normalize.css 的作用：
- 保护有用的浏览器默认样式而不是完全去掉他们
- 一般化的样式：为大部分 HTML 元素提供
- 修复浏览器自身的 bug 并保证各浏览器的一致性
- 优化 CSS 可用性
- 解释代码：用注释和详细的文档
26.什么是 FOUC(Flash of Unstyled Content)？如何避免 FOUC
- 当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效“，简称为 FOUC
- 产生原因：当样式晚于结构性 html 加载时，加载到样式变时，页面将停止之前的渲染
- 等待此样式表被下载和解析后，再重新渲染页面时，期间导致短暂的花屏现象
- 解决办法：使用 link 标签将样式表放在文档 head 里
27.介绍使用过的 CSS 预处理器
- CSS 预处理器基本思想：为 CSS 增加了一些编程的特性(变量、逻辑判断、函数等)
- 开发者使用这些语言进行 Web 页面样式设计，再编译成正常的 CSS 文件使用
- 使用 CSS 预处理器可以使 CSS 更加简洁、适应性更强、可读性更强，无需考虑兼容性
- 最常用的 CSS 预处理器语言包括：Sass(SCSS) 和 LESS
28.CSS 优化、提高性能的方法
- 多个 css 合并，尽量减少 HTTP 请求
- 将 css 文件放在页面最上面
- 移除空的 css 规则
- 避免使用 CSS 表达式
- 选择器优化嵌套，尽量避免层级过深
- 充分利用 css 继承属性，减少代码量
- 抽象提取公共样式，减少代码量
- 属性值为0时，不加单位
- 属性值为小于1的小数时，省略小数点前面的0
- css 雪碧图
29.浏览器是怎样解析 CSS 选择器的
浏览器解析 CSS 选择器的方式是从右到左
30.在网页中的应该使用奇数还是偶数的字体
在网页中应该使用 偶数 字体
- 偶数字体相对更容易和 web 设计的其他部分构成比例关系
- 使用奇数字体时文本段落无法对齐
- 宋体的中文网页排布中使用最多的就是 12 和 14
30.margin 和 padding 分别适合什么场景使用
- 需要在 border 外侧添加空白，且空白处不需要背景色时使用 margin
- 需要在 border 内侧添加空白，且空白处需要背景色时使用 padding
31.抽离样式模块怎么写
CSS可以拆分为 2 部分：公共 CSS 和 业务 CSS
- 网站的配色，字体，交互提取出为公共 CSS。这部分 CSS 命名不应涉及具体的业务
- 对于业务 CSS，需要有统一的命名，使用公用的前缀。可以参考面对对象的 CSS
32.元素竖向的百分比设定是相对于容器的高度嘛
- 如果是 height 的话，是相对于容器高度
- 如果是 padding-height,margin-height 则是相对于容器的宽度
33.全屏滚动的原理是什么，用到了 CSS 的哪些属性
- 原理类似图片轮播原理，超出隐藏部分，滚动时显示
- 可能用到的 CSS 属性：overflow:hidden;transform:translate(100%,100%);
34.什么是响应式设计，响应式设计的基本原理是什么，如何兼容低版本的 IE
- 响应式设计就是网站能够兼容多个终端，而不是为每个终端做一个特定的版本
- 基本原理就是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式
- 对于低版本的 IE ，可采用 JS 获取屏幕宽度，然后通过 resize 方法实现兼容
35.什么是视差滚动效果，如何给每页做不同的动画
- 视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
- 一般把网页解剖为：背景色、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差
实现原理
- 以"页面滚动条"作为"视差动画进度条"
- 以"滚轮刻度"当作"动画帧度"去播放动画
- 监听 mousewheel 事件，事件被触发即播放动画，实现"翻页"效果
36.a 标签上四个伪类的执行顺序是怎样的
LoVe HAte => “爱恨原则”
link > visited > hover > active
37.伪元素和伪类的区别和作用
伪元素：在内容的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成，他们只在外部显示可见，但不会在文档的源代码中找到他们，因此，称为 “伪” 元素。
eg：
伪类：将特殊的效果添加到特定选择器上。他是已有元素上添加类别的，不会产生新的元素。
eg：
38. ::before 和 :after 中双冒号和单冒号的区别
- 在 CSS 中伪类一直用 : 表示，如 :hover,:active等
- 伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
- 后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after ，以此区别伪元素和伪类
- 由于低版本 IE 对双冒号不兼容，开发者为了兼容各浏览器，继续使用 :after 这种老语法表示伪元素
- 综上所述： ::before 是 CSS3 中伪元素的新语法，:after 是 CSS1 中存在的、兼容 IE 的老语法
39.如何修改 Chrome 记住密码后自动填充表达的黄色背景
- 产生原因：由于 Chrome 默认会给自动填充的 input 表单加上 input:-webkit-autofill 私有属性造成的
- 解决方案1：在 form 标签上直接关闭表单的自动填充：autocomplete = “off”
- 解决方案2：input:-webkit-autofill {background-color:transparent;}
input[type = search] 搜索框右侧小图标如何美化
40.网站图片文件，如何点击下载，而非点击预览
41.iOS safari 如何阻止"橡皮筋效果"
42.你对 line-height 是如何理解的
- line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
- 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
- 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
- 把 line-height 设置为 height 一样的值可以实现单行文字的垂直居中
- line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会
43.line-height 三种赋值方式有何区别(带单位、纯数字、百分比)
- 带单位：px 是固定值，而 em 会参考父元素 font-size 值自行计算自身的行高
- 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素的行高为 1.5 * 18 = 27px
- 百分比：将计算的值传递给后代
44.设置元素浮动后，该元素的 display 值会如何变化
设置元素浮动后，该元素的 display 值自动变成 block
45.怎么让 Chrome 支持小于 12px 的文字
46.让页面里的字体变清晰，变细用 CSS 怎么做(IOS手机浏览器字体齿轮设置)
47.font-size 属性 oblique 是什么意思
font-size:oblique; 使没有 italic 属性的文字实现倾斜
48.如果需要手写动画，你认为最小时间间隔是多久
16.7ms
多数显示器默认频率是 60Hz，即 1秒刷新 60 次，所以理论上最小间隔：1s / 60 * 1000 = 16.7ms
49.overflow:scroll 时不能平滑滚动的问题怎么处理
监听滚轮事件，然后滚动到一定距离时用 jquery 的 animate 实现平滑效果
50.一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度
- 方案1：.sub { height : calc { 100% - 100px };}
- 方案2：.container { position : relative;} .sub { position : absolute; top : 100px; bottom : 0;}
- 方案3：.container { display : flex; flex-drection : column;} .sub { flex : 1}
51.CSS 中类 class 和 id 的区别
对于 CSS 而言，id 和 class 都是选择器，唯一不同的地方在于权重不同。
对于 html 而言，id 和 class 都是 dom 元素的属性值。不同的地方在于 id 属性的值是唯一的，而 class 属性可以重复。
id 还有一个特性是锚点功能，当浏览器地址栏有一个 #xxx，页面会自动滚到 id = xxx 的元素上面
52.如何优化网页的打印样式
其中 media 指定的属性就是设备，显示器上就是 screen，打印机则是 print，电视是 tv，投影仪是 projection。
打印样式注意事项：
- 打印样式表中最好不要用背景图片，因为打印机不能打印 CSS 中的背景。如要显示图片，请用 html 插入到页面中
- 最好不要使用像素最为单位，因为打印样式表要打印出来的会是实物，所以建议使用 pt 和 cm
- 隐藏掉不必要的内容
- 打印样式表中最好少用浮动属性，因为他们会消失
53.请问为何要使用 transform 而非 absolute positioning
- 使用 transform 或 position 实现动画效果时是有很大差异
- 使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高
- 使用 position 时，最小的动画变化单位是 1px，而使用 transform 参与时，可以做到更小
- 功能都一样，但是 transform 不会引起浏览器的重绘和重排
反之
- transform 改变 fixed 子元素的定位对象
- transform 改变元素层叠顺序
54.请解释 CSS sprites，以及你要如何在页面或者网站中实现它
- CSS Sprites 其实就是把网页中的一些背景图片整合到一张图片文件中，再利用 CSS 的 “background-image”,“background-repeat”,“background-position” 的组合进行背景定位，background-position 可以用数字能精准的定位出背景图片的位置
- CSS Sprites 为一些大型的网站节约了带宽，提高了用户的加载速度和用户体验，不需要加载更多的图片
55.SVG 样式的书写
下面的属性在 SVG 和 CSS 中是一样的，只是在 SVG 的 transformations 和 dimensions 中稍有区别：
- font-family，font-size，font-style，font-variant 和 font-weight
- width 和 height
- scale，rotate，skew