css-基础概念

  html元素的种类

1. 块元素（block)，你可以把它当成一个盒子，它的特点是独占一行，可以更改宽高。如div,p,ul,ol,li,h1~h6等；

2. 行内元素(inline),在一行上，不可以改变宽高，如a, span, em, strong等；

3. 行内块元素(inline-block)，即有块元素的特点也有行元素的特点，可以改变宽高，不独立成行，如img

   如果你不知道这个元素是什么元素，可以改变他们的宽高，能改变的而且独立成行的为块元素，不能改变大小的为行内元素，既可以改变宽高又不换行的那就是地内块元素了

1.块级元素从上到下一个一个地依次排列，元素之间的垂直距离由元素的垂直外边距计算出来。

2.行内元素水平地依次排列，行内元素不可以直接指定宽高，但是可以通过改变内边距，边框，外边距来改变宽，外边距不能改变高。

3.行内块元素像行内元素一样依次地水平排列，但是和块级元素一样，可以显示的设置宽度，高度，内边距，外边距。

  css定位机制

css中有三种基本的定位机制

1.普通流。除非专门制定，否则所有元素都在普通流中定位。

2.浮动。

3.绝对定位。

相对定位：普通流的一部分，元素的位置是相对于它在普通流中的位置的。（position：relative；）

在原来的位置上位移指定的距离，例如将top设置成20px，元素将会向下移动20px，原来的位置也会被占据。而下一个元素会被覆盖20px.

绝对定位：绝对定位使元素脱离文档流，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样。

position:absolute,相对于距离它最近的那个已定位的祖先元素确定的，只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。

position:fixed，又称为固定定位，相对于视图窗口（浏览器窗口）进行定位。

在使用相对定位和绝对定位时，如果同时不指定top,bottom,right,left这四个的值，元素还是不会脱离文档流，基于原来的位置进行定位。

此时元素时是没有定位的,在使用绝对定位时子元素不会以此元素为包含块进行定位。

浮动：浮动的元素可以左右移动，直到碰到包含框或另一个浮动框的边缘。浮动的元素时脱离文档流的，所以普通流中的元素表现得像浮动元素不存在一样。

如果包含框的元素太窄，浮动的元素会向下移动，直到有足够的空间。

浮动的行框：浮动元素脱离文档流，不会影响原来的元素的位置，但是包含框的子元素内容会受到影响，会移动以留出空间。此时称之为浮动元素旁边的行框被缩短，从而给

浮动元素留出位置，因此行框围绕浮动框。