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进行层次分级