前端必备知识储存——CSS篇

系列文章目录

最近准备前端面试，整理一下学习过的内容，勤能补拙嘛。

接上篇前端必备知识存储——HTML篇一

---

@阿乐今天敲代码没

---

一、CSS篇

1.CSS样式优先级的确定及权重计算

每个选择器都有权值，权值越大越优先
继承的样式优先级低于自身指定样式
！important 优先级最高 js 也无法修改
权值相同时，靠近元素的样式优先级高
优先级：内联样式表（标签内部）> 内部样式表（当
前文件中）> 外部样式表（外部文件中）
权重：!important > 行内样式>ID选择器 > 类选择器 > 属性选择器（或伪类选择器）>标签 （子选择器，后代选择器，兄弟选择器）> 通配符 > 继承 > 浏览器默认属性
CSS选择器的优先级（从上至下，依次递减，权重值相同另考虑）：

选择器	权重
!important	Infinity，“无穷大”（无法被超越）
行内样式（style=“”）	1000
id选择器（#id）	100
类选择器（.className）	10
属性选择器（a[rel=“external”]）	10
伪类选择器（a:hover,li:nth-child）	10
标签选择器（div,h1,p）	1
伪元素选择器	1
子选择器、相邻选择器	0
通配符选择器（*）	0

PS：如果选择器的权重相同，优先级以代码出现的先后顺序，后出现的选择器样式为最终样式。通过js控制的样式也是最终样式。

判断优先级，以权重为指标，权重越大优先级越高：
一般约定 id选择器的权重为100，类选择器权重为10，标签选择器权重为1。
一个复杂的选择器的权重等于所有选择器的权重之和。

---

2.关于默认margin

h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值

dl、ol、ul标签：有默认margin

table标签没有默认的margin,padding值；th、td标签没有默认的margin值，有默认的padding值

p标签有默认margin(top,bottom)值,没有默认padding值

select标签在Chrome,Safari,Maxthon中有默认的margin：2px；在Opera,Firefox,IE6.0,7.0,8.0没有默认的margin值。

img有默认margin，原理：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的，所以图片底部的空隙有时是2px 3px或者更多，不同的font-size应该也会影响到空隙的大小，不同的浏览器也会对空隙的大小造成影响，在firefox下为3px，IE6更多，而IE8刚好。