后台需要知道的前端小知识

1、 css js文件位置

在开发网页时，将css放置在页面的header里，js不管是外部引入的或嵌入的js片段都应放在页面的尾部（</body>前面）。
因为页面在加载时，css加载是可以并发请求 的（同页面中的图片，ie6除外），而js加载时需要等待一个js文件加载完成后才加载其他资源，为了页面的快速呈现，放置在尾部效果较好。

2、布局： 行内元素，块级元素的居中；margin，padding；

• 块级元素
  块级内容跟则是由块级元素构成，div是最常用的块级元素，元素样式的display:block都是块级元素。
• 总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
• 高度，行高以及外边距和内边距都可控制；
• 宽带始终是与浏览器宽度一样，与内容无关；
• 它可以容纳内联元素和其他块元素。
• 行内元素
  行内内容是说由行内元素组成的内容，比如 span元素，iframe元素和元素样式的display:inline的都是行内元素。
• 元素会在一条直线上排列显示，都是同一行的，水平方向排列
• 高，行高及外边距和内边距部分可改变；
• 宽度只与内容有关；
• 行内元素只能容纳文本或者其他行内元素。

注意

• 对行内元素，需要注意如下：
• 设置宽度width无效。
• 设置高度height无效，但是可以通过line-height来设置。
• 设置margin 只有左右margin有效，上下无效。
• 设置padding 只有左右padding有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
• IE6/7及IE8混杂模式中，text-align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
  解决方法：为所有需要相对父容器居中对齐的块级元素设置“margin：0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 “text-align:center;”。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”。

3、定位： absolute，relative，static，fixed的区别。。。

• static(静态定位)
  默认属性，没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
• relative(相对定位)
  相对于父元素的定位，对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级
• absolute(绝对定位)
  相对于父元素的定位，脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
• fixed(固定定位)
  相对于父元素的定位，这里所固定的参照对像是 可视窗口 而并非是body或是父级元素，其总是固定在浏览器窗口的某个位置，并且不受滚动的影响，是绝对的坐标定位。可通过z-index进行层次分级