目录
1. 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
2. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
4. rgba()和 opacity 的透明效果有什么不同？
5. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
8. 描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？
17. IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的较大
1. 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
2. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
(1):块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
(2):内联元素(inline)特性：
宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。
(3):inline-block 元素
拥有内在尺寸，可设置高宽,但不会自动换行
<input> 、<img> 、<button> 、<texterea> 、<label>。
3. 什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse。
折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
4. rgba()和 opacity 的透明效果有什么不同？
opacity作用于元素，以及元素内的所有内容的透明度(元素会继承其属性)
而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)
5. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing 增加或减少字符间距。
可用于消除 inline-block 元素间的换行符空格间隙问题。
6. 如何垂直居中一个浮动元素？
方法一：.child{
height: 100px;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二：.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三：child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
7. px 和 em 的区别。
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 相对于当前字体大小改变，若自身没有字体大小，则继承祖先元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。
8. 描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？
reset 样式文件的目的就是清除某些浏览器的默认样式，方便css的书写；
normalize 的理念与 reset 不同，它并不是清除浏览器的默认样式，而是尽量将所有的浏览器的默认样式统一。
9. Sass、LESS 是什么？大家为什么要使用他们？
是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成
CSS。
优势：
结构清晰，便于扩展。
减少了重复代码的编写，增加了变量等的功能
可以方便的屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。
10. display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值
都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不
见（完全透明），而它所占据的空间位置仍然存在。
11. CSS 中 link 和@import 的区别是：
Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，
link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
12. 简介盒子模型：
CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框
13. 为什么要初始化样式？
由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同
浏览器之间的显示差异
但是初始化 CSS 会对搜索引擎优化造成小影响
14. BFC 是什么?
BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布
局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin
重叠的问题
创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
15. html 语义化是什么？
HTML语义化是指在用标签构建HTML页面时避免大篇幅地使用无语义的标签
HTML语义化的好处：
1、有利于SEO，搜索引擎根据标签确定上下文和各个关键字的权重。
2、利于用户阅读，样式文件未加载时页面结构清晰。
3、利于屏幕阅读器解析，如盲人阅读器会根据语义渲染网页。
4、利于开发和维护，代码更具可读性、更易于维护。
16. Doctype 的作用？严格模式与混杂模式的区别？
<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档
严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
17. IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设置的较大
加入_display：inline
18. HTML 与 XHTML——二者有什么区别？
1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 "" 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 "--"
8. 图片必须有说明文字
19. html 常见兼容性问题？
浏览器默认的margin和padding不同
解决方案：加一个全局的 *{margin:0;padding:0;} 来统一
20. 对 WEB 标准以及 W3C 的理解与认识
(1).标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、
(2):使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、
(3):更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
8727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
