CSS布局初学

CSS初学阶段的几个小问题

层叠和继承的概念以及选择器的优先级

1.层叠：在 HTML 文件中对于同一个元素可以有多个 CSS 样式存在，当有相同权重的样式存在时，会根据这些 CSS 样式的前后顺序来决定，处于最后面的 CSS 样式会被应用。
2.继承：w3c中css规定，给标签设置了某些样式，如果后代没有指定样式的情况下，它的后代无素会继承父辈的某一些属性。
3 权重：也就是优先级，用于解决层叠问题。优先级越高的样式，会优先执行，优先级低的样式，会后执行甚至不执行。
4.选择器的权重表：0表示低，1表示高。

	嵌入	id	class	元素
	a	b	c	d
–	–	–	–	–
style	1	0	0	0
id	0	1	0	0
class，属性伪类	0	0	1	0
元素，伪元素	0	0	0	1
通配符	最低	-	-	-
！important	最高	-	-	-

盒模型

1.盒模型的基本概念：由里向外
内容：content；内边距：padding；边框：border；外边距：margin.
2.盒模型分类：标准模型和IE模型
3.两种盒模型的区别：
在标准模型中，盒模型的宽高只是内容（content）的宽高；
在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

元素在页面上的定位体系

1）绝对定位： position： absolute； top：（填数字） px； left:（填数字） px； 当你希望某一元素出现在特定位置的时候，可以使用绝对定位，然后配合着 top、 left、right、 bottom 一起用（距离某一方向多少像素，但是 left 和 right 不能同时出现，并且 left 是左边线距离浏览器多少像素， right 是右边线距离浏览器多少像素， top是上边线距离浏览器多少像素，一般不用 bottom），但是， 他会脱离原来的位置进行定位（会向上一层，底下的位置会空出来，其他的元素顶上去），它是相对于最近的有定位的父级进行定位，如果没有，那么会相对于文档进行定位。
2） 相对定位： position： relative； top：（填数字） px； left:（填数字） px； 当你希望某一元素出现在特定位置的时候，可以使用相对定位，然后配合着 top、 left、right、 bottom 一起用，但是， 他会保留原来的位置进行定位（原来的位置还占着，但是没东西），它是相对于自己原来的位置进行定位。
3）定位原则： 用 relative 作为参照物（保留原来位置进行定位，如果不设置 top和 left， 对后续元素都没有影响），用absolute 定位（可以任意调换自己的参照物，定位更灵活），这种原则被称为子绝父相。
4）固定定位： position： fixed； top：（填数字） px； left:（填数字） px； 当你希望某一元素不随着滚动条的拖曳而改变的时候，可以使用固定定位，然后配合着 top、left、 right、 bottom 一起用。
5）特点补充：绝对定位和固定定位，都会使元素脱离文档流；定位一般用于多个元素重叠的场景。

什么是常规流

常规流的概念：在CSS元素的布局中，默认的基础布局方式。
常规流布局：将窗体自上而下分成一行一行，块级元素从上至下、 行内元素在每行中按从左至右的依次排放元素。