前端概念的一些理解

1. static，无定位的元素，块级元素从上到下，内联元素从左到右排列。
2. 相对定位置元素，在没有设置top等定位属性时，按照文档流进行排列。设置top等属性之后，会相对自身原来的位置进行定位。
3. 绝对定位元素，会脱离文档流，不会影响到文档流中的元素。会覆盖掉无定位的元素（正常文档流的元素）。
4. 浮动元素，也会脱离文档流，不会影响文档流其他元素的位置。浮动元素会在z轴推进一层，可覆盖掉文档流中的元素，但是文档流文字会呈现出环绕效果。也就是说文字并不会被覆盖。
5. 所有元素都是一个盒子，页面是按照一个一个盒子从上到下（块元素），从左到右（内联元素）进行生成的。所有的盒子都可设置margin，padding等属性(验证内联元素)。内联元素不能设置height，width，它的宽高由内容决定。
6. ie盒子和常规盒子。盒子包括margin，border，padding，content。在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
7. display none 和 visiblity hidden，前者不占用空间，不能获得元素的宽高，后者占用空间。
8. 元素有原本的填充尺寸以及实际尺寸width,height。static和relative块元素的填充尺寸宽度为100%，也就是一行，没有高度。当元素有高度之后(可以设置高度)，填充尺寸为高度×一行的宽度。如果这时设置width属性，元素的宽高就是填充尺寸不一致。填充尺寸是元素在文档流中占用的空间，而元素表现出来的宽高是实际的宽高。这是通过设置margin auto，可以让元素根据填充尺寸的剩余空间进行自动适应。
9. 绝对定位元素，在没有设置宽高时，填充尺寸为0*0，但是，可以设置top0，bottom0让元素的填充尺寸变为父级定位元素的高度，right0,和left0则让填充宽度变为父定位的宽度，这时绝对定位元素的填充尺寸就为父定位元素的宽高，设置margin，auto之后，可达到垂直水平居中效果。
10. 填充尺寸和实际尺寸。填充尺寸是元素应该有的尺寸，实际尺寸是通过height和width强制改变之后的尺寸。在没有强制改变之前，元素以填充尺寸呈现。
11. 让元素不可见有很多方式，设置绝对定位元素的zindex，设置父元素overflow，隐藏子元素超出父元素尺寸的部分，或者让元素定位到浏览器视窗之外。当没有设置overflow为hidden时，子元素超出父元素宽高的部分依旧可见。