html、css基础知识

display:none和visibility:hidden的区别

display可以使元素从文档中消失（不占据空间）
visibility还会占据空间

link和@import的区别

link是HTML的标签。页面加载的时候会同事加载
@import是CSS的，会等到页面加载完成后再加载；如果网速不佳的情况下会更易出现样式的脱离。
@import存在兼容问题，需要在IE5以上，link不存在

position中几种定位的区别

• relative:相当于自己的位置进行定位，原来的位置还是会保留，遵循文档流
• absolute:相当于有定位的父级元素进行定位，脱离文档流，不占原有空间。
• fixed:相当于浏览器的可视窗口进行定位，脱离文档流。
• 都会覆盖在非定位元素的上面。

CSS盒模型

1. 盒模型： 由内容（content）、填充（padding）、边界（margin）、边框（border）组成。
2. W3C盒模型（标准盒模型）：宽度是content，不包括填充和边框
3. 怪异盒模型（IE盒模型）：宽度包括了border和padding

CSS常用选择器

• id选择器：#idname，用#来选择
• 类选择器： .classname，类名前加.
• 标签选择器： span …，直接使用标签名
• 相邻兄弟选择器：通过加好连接
• 子选择器：通过>连接
• 后代选择器： 空格隔开即可
• 通配符选择器：*（尽量不用，效率低）
• 伪类选择器：a:hover等

样式的继承

关于字体的css可以继承，如font-size，font-family，color，text-indent。
盒模型的属性不可继承：width，margin，padding，border等

块级元素上下文

BFC独立的上线文，BFC盒子内的布局不会受到外面元素的影响。相邻的两个元素的垂直方向的margin会重叠（最大的有效，不会叠加）。

精灵图 spring

多个图片或图表整合到一张图片内，只需要请求一次即可拿到完整的图片，能够减少图片的获取次数，从而较少请求消耗的时间
精灵图可以通过background-image，background-repeat和background-position进行设置。其实精灵图就是从一张大图片上扣取需要的小图片或图标。

Doctype的作用

浏览器通过该信息来获取渲染类型。如果不存在，就会变成怪异盒模型即混杂模式呈现。

HTML和XHTML的区别

XHTML是HTML的严格模式，元素必须正确嵌套，并且标签必须关闭，单标签关闭方式为
，标签名必须小写，XHTML必须要根元素。

HTML部分兼容性问题

• 不同浏览器的默认样式不同：设置样式初始化。
• IE6双倍边距的问题：将数值设置为要求的一半。
• Chrome默认文本最小12px: CSS加上-webkit-text-size-adjust: none;
• 访问过a标签后，hover样式就不再出现：安装L-V-H-A来设置样式

清除浮动的方法

浮动元素后增加一个标签，该标签添加CSS属性：clear:both;
优缺点：简单，但是增加了无意义的标签。
浮动元素父级使用overflow:hidden。可能隐藏元素，不合理
伪元素清除法，给元素增加一个类clearfix，专门用来清理浮动

.claerfix:after{
	dispaly:block;//这个是必须的
	content:"";
	height:0;
	clear:both;
}