盒子模型
我们可以把每一个HTML标记,都看成是一个“盒子”。
这个“盒子”有哪些特征:内容的高度或高度、边框线、内填充、外边距。
“盒子”的总宽度:内容的宽度 + 边框宽度*2 + 左填充*2 + 左外边距*2
上下外边距合并问题——这是一种现象
什么情况下?上下外边距会合并呢?
上下两个块元素,如果每一个元素都指定了四个外边距,那么上下相邻的那个外边距会发生合并的现象,合并后取其中较大的外边距。
如何要实现上下两个<div>之间的距离为100px,该如何实现呢?
- 上下两个<div>其中一个只指定margin-bottom:100px,而另一个<div>的margin-top:0px,这样可以实现。
- 可以在上下两个<div>中间,添加一个空的<div>,并给空<div>指定高度为100px,也可以实现。
全局CSS设置
1、清除所有的标记的内外边距
body,ul,li,a,img,p,input{ margin:0; padding:0; }
2、去除项目符号或编号前面的符号
ul,ol,li{ list-style:none; }
3、全局链接效果
a:link , a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
4、网页中所有的文字大小颜色
body{ font-size:12px; font-family:宋体; color:#ccc; }
5、去除图片的链接边框线
img{border:0;}
6、全局的类样式
.floatL{ float:left; }
.floatR{ float:right; }
.clear{clear:both;}
.blank10{ height:10px; clear:both; }
.red{ color:red; }
.blue{ color:blue; }