UC知道急,请问css边距的问题?
来源：百度知道 编辑：UC知道 时间：2024/06/18 22:58:15
<html>
<head>
<title></title>
<style type="text/css">
body{
font-family:arial;
font-size:12px;
}
.father{
background-color:#fffea6;
border:10px solid #111111;
padding:25px;
width:300px;
}
.son1{
background-color:#70baff;
border:1px dashed #111111;
margin-bottom:120px;
padding:10px;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">float1</div>
</div>
</body>
</html>
第一:
我将son1块元素的margin-bottom设置为120px为什么不会距离120px
不是已经设置了120px,为什么son1块元素的底边和father的底边不会隔开120px呢?
具体是什么原因呢?
第二:
为什么son1块元素float浮动左边后,margin-left,margin-right,margin-right都可以,
就是margin-bottom不管设置多少px都不会产生距离呢?
第三:
当我给son1加上margin-left
首先你的第一个问题，我这里显示是正常的！在CSS中你要明确二个概念：内补白与外边距，也叫外补白的！一个是padding，一个是margin，这两个是有严格的区别的！而padding是外白，而margin是内补白！换句话来说，内补白是指边缘距内容的边距，而外补白是指两个区块之间的边距。当然，不同的浏览器厂商对CSS的支持是不同的！一般是以IE为准的讲解，对于其他则要看一下区别的内容。还有就是在CSS中存在一个叫做继承的概念。比如父层是一个DIV，子层是一个DIV，那么在不存在子层DIV定义的情况下，子层会继承父层中定义的font等属性。但一般是不继承边框等内容的！对于第一个问题的解释是，margin属性如果大于设置对应的长度大小时，一般是没有作用的！所以并未显示！而你叙述中却是子层与父层的边距关系，这时可以设置父层的margin或子层的padding才是父层与子层的关系！一般我们可以理解为子层是父层的内容！
一般是很少单独定义margin-bottom的，所以有些浏览器并不支持！在这种情况下我们不妨使用margin: 0 0 120 0的形式给以定义。网景的浏览器本身对边距的支持不像IE，所以如果使用了网景的浏览器时要注意！
如果层使用了float:left等属性，则要注意这个属性不是父与子的关系，而是与文本流中上一个区块的关系对应，此时，对于margin与padding都是有影响的！
如果对层使用了,position的属性不是默认的staic静态属性，而是使用了absolute等属性也是对其有影响的！但对于IE来说还是支持的！比如我想让一个层居中在浏览器的正中，可以用CSS中定义：
centerdiv{
position:absolute;
width:400;height:200;
left:50%;top:50%;
padding-top:-100;
padding-left:-200;
}
则该层居中！对于一般情况下，父层有大小时，子层中只定义padding的left与top属性，对于另两个属性IE采取的是忽略！而不是对父层进行扩大或撑大！因为我们一般不注意另一个内容过长的处理！<