前端知识点杂记

CSS




display属性 :

block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行   可以定义高度和宽度

none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行

inline-block :　IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。




overflow属性：

（定义溢出元素内容区的内容会如何处理。）

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。

 参数是hidden时候，溢出隐藏。

Position属性

四个可选值，它们分别是：static、absolute、fixed、relative。

◆position:static　无定位

该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。

◆position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置，绝对定位需要一个参考 分当父级元素中有无 position：relative/fixed 有的话 参照这个元素绝对定位 没有的话 参照window

◆position:fixed　相对于窗口的固定定位

这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。

请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。

◆position:relative　相对定位

所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。

border:none以及border:0的区别

1.效果

border-style:none;//无边框         

border-width:0;//边框宽度为0px  

2.区别

（1）性能差异

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

当定义边框时,必须定义边框的显示样式.因为边框默认样式为不显示none,所以仅设置边框宽度,由于样式不存在,边框的宽度也自动被设置为0.

CSS sprites

定义：CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
方法：利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优势：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。