CSS基本概念 - 随笔分类 - 花生米的小窝

CSS Sprites技术：CSS背景图片的定位技术

摘要：CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率……（标准之路：http://www.aa25.cn/div_css/896.shtml）讲CSS Sprites之前，先把背景图片给搞清楚#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和. 阅读全文

posted @ 2012-10-26 16:35 花生米的小窝阅读(292) 评论(0) 推荐(0)

相对定位和绝对定位

摘要：文章出处：标准之路(http://www.aa25.cn)定位标签：position 包含属性：relative（相对） absolute（绝对） 1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定阅读全文

posted @ 2012-10-25 13:08 花生米的小窝阅读(173) 评论(0) 推荐(0)

IE6的3像素bug

摘要：作者：WEB标准之路出处：http://www.aa25.cn/div_css/904.shtml3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下： body { margin:0;} #side { float: left; background:#99FF99; height: 300px; width: 120px;} #main { background: #99FFFF; height: 300px;}html代码如下：<div id="side">此阅读全文

posted @ 2012-10-24 18:11 花生米的小窝阅读(163) 评论(0) 推荐(0)

十天学会DIV+CSS学习笔记（一）

摘要：1.盒子模型的居中问题：在IE6及以上版本和标准的浏览器当中，当设置一个盒模型的的margin:auto;时，可以让这个盒模型居中。设定一个盒子居中之前，要给盒子设置一个宽度。2.不给盒子模型设定宽度时，盒子模型的宽度随着浏览器窗口的大小改变。3.关于外边距重合的问题：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距，行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。4.块级元素(div)和内联元素(span)：（CSS块级元素、内联元素概念）块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会阅读全文

posted @ 2012-10-24 17:52 花生米的小窝阅读(172) 评论(0) 推荐(0)

HTML默认样式和浏览器默认样式

摘要：作者：mengdasheng 出处：http://bbs.jquery.org.cn/read.php?tid-3861.htmlHTML默认样式html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示，未显示的将以内联元素显示，该列表针对HTML4版本，部分元素在XHTML1中将废弃*/ 阅读全文

posted @ 2012-10-24 17:48 花生米的小窝阅读(527) 评论(0) 推荐(0)

CSS块级元素、内联元素概念

摘要：作者：现代简明魔法出处：http://www.nowamagic.net/librarys/veda/detail/1190CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍，看过不少文章，看到所多的是零碎的CSS布局基本知识，比较表面。看过O'Reilly的《CSS权威指南》，发现里面提到的文档流概念让我很敏感。可恶的是书中并没有解释文档流是什么东西，或许作者觉得这个太简单了以至于不值一提。但我觉得，这个概念实在太重要了。理解了它，一堆CSS布局的理论都变得易于理解，并且体会到CSS这套设计的合理性所在。文档流将窗体自上而下分成一行行，并在每行阅读全文

posted @ 2012-10-24 17:47 花生米的小窝阅读(142) 评论(0) 推荐(0)

花生米的小窝