css一

http://www.w3cn.org/article/step/2004/26.html

 

CSS核心内容：标准流、盒子模型、浮动、定位

 

标准流行内元素 span 、块级元素 div 如果span加上display:block 的话效果也是块形状的

 

<div class="menu">栏目一</div>

<span class="menu ttt">栏目二</span>

.menu{background-color:#99CC99;}.ttt{display:block;}

盒子模型

外边距：margin内外距：padding内容：宽、高画框：宽 border

margin和padding情况一样

padding:10px 5px 15px 20px; * 上内边距是 10px * 右内边距是 5px * 下内边距是 15px * 左内边距是 20px

padding:10px 5px 15px; * 上内边距是 10px * 右内边距和左内边距是 5px * 下内边距是 15px

padding:10px 5px; * 上内边距和下内边距是 10px * 右内边距和左内边距是 5px

padding:10px;所有 4 个内边距都是 10px

.menu{background-color:#99CC99;margin:5px;}.ttt{display:block;margin-top:30px;}

用网页截图工具，你会发现栏目一的底部和栏目二的顶部之间的距离并不是5+30px，而是取的最大值30px

行内元素对某些样式是不起作用的，例如margin、长、宽

浮动，脱离了标准流，在标准流里面的标签也要浮动的float:left rightclear:left right both 清除浮动

相对定位没有脱离标准流,只是相对原来的位置position:relative;栏目三 栏目二 栏目一 不管栏目二top:30px left:30px怎么变化，它都是相对原来的栏目二位置变化的，栏目三还是向栏目二浮动

绝对定位脱离了标准流，以父标签来定位，没有的话，就是以body标签来定位了栏目二 栏目三 栏目一position:absolute;

狗狗搜索 网页设计配色工具包 网页流行色选取器