css基础知识归纳

渣渣说：要好好学习

1. 行内元素,块级元素, 空(void)元素

• CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
  • 行内元素有: a， b ，span， img， input ，select ， strong。
  • 块级元素有: div， ul， ol ，li ，dl ，dt， dd， h1， h2， h3， h4…p 。
  • 知名的空元素：br ，hr， img ，input， link ，meta。
  • 鲜为人知的是：area ，base ，col ，command， embed， keygen， param ， source， track， wbr。

2.块级元素特点

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）
• 元素的高度、宽度、行高以及顶和底边距都可设置。
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

3.行内元素特点

• 和其他元素都在一行上。
• 元素的高度、宽度、行高及顶部和底部边距不可设置。
• 元素的宽度就是它包含的文字或图片的宽度，不可改变。

4.行内块状元素特点

• 和其他元素都在一行上。
• 元素的高度、宽度、行高以及顶和底边距都可设置。

5. CSS的盒子模型

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

6. CSS 选择器

• 标签名选择器，如：div{}，即直接使用HTML标签作为选择器。
• 类选择器：如.radio{}。
• ID选择器：如#radio{}。
• 后代选择器：如.radio span {}，后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
• 群组选择器：如div,span,img{}，群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。

7.ID选择器和类选择器的区别

• ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
• 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID 词列表）。

8. CSS权重（权重越高优先级越高，计算也是按照如此）

通常： - 用1表示标签名选择器的权重
- 用10表示类选择器的权重
- 用100标示ID选择器的权重
- important 权重最高

9. 为什么要初始化CSS样式

• 由于浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
• 初始化样式会对SEO有一定的影响，但力求影响最小的情况下初始化。
• 最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）。
• 建议使用成熟的模板文件(tml5shim框架, Boilerplate模板, Initializr模板)开始.

10.display的属性值，及其作用

• block：此元素将显示为块级元素，此元素前后会带有换行符。
• none： 此元素不会被显示。
• inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
• inline-block： 行内块元素。
• list-item ： 此元素会作为列表显示。

11.CSS 定位 (Positioning)

• absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。一般使用绝对值来对元素进行定位。
• fixed ：（老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。
• relative： 生成相对定位的元素，相对于其正常位置进行定位。
• static： 默认值。没有定位，元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明）。
• inherit ：规定从父元素继承 position 属性的值。

12.link 和@import （建议最好使用link）

• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
• import只在IE5以上才能识别，而link是XHTML标签，无兼容问题。
• .link方式的样式的权重高于@import的权重。
• .link支持使用Javascript控制DOM去改变样式，而@import不支持。

13.常见的浏览器内核有哪些？

• 使用Trident内核的浏览器：IE、Maxthon、TT、The World等。
• 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey。
• 使用Presto内核的浏览器：Opera7及以上版本。
• 使用Webkit内核的浏览器：Safari、Chrome。