急,请问css边距的问题?
详细的问题说明，有助于回急,请问css边距的问题?<html><head><title></title><styletype="text/css">body{font-f...
详细的问题说明，有助于回急,请问css边距的问题?
<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:100px,或者给son1加上margin-right:100px之后,
为什么margin-bottom:120px就又可以了,怎么回事呢?答者给出准确的答案 展开
<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:100px,或者给son1加上margin-right:100px之后,
为什么margin-bottom:120px就又可以了,怎么回事呢?答者给出准确的答案 展开
2个回答
展开全部
首先你的第一个问题，我这里显示是正常的！在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采取的是忽略！而不是对父层进行扩大或撑大！因为我们一般不注意另一个内容过长的处理！
而对于子层中的margin属性，如果只定义了left与top属性，则另两个属性在不撑大父层的基础上，采用默认值，而如果同时定义了margin的下与右属性则会撑大父层！当然，我指的是子层中有一个流块不能缩小的情况！
而CSS在定义其规则的时候是以使用为原则的，也就是说只要达到使用的要求就可以了！而不是对于任何属性都会按照你的加入而出现一些变化。所以在CSS中达到你的要求就可以了，不必再对其他的不符合要求的东西加属性！
一般是很少单独定义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采取的是忽略！而不是对父层进行扩大或撑大！因为我们一般不注意另一个内容过长的处理！
而对于子层中的margin属性，如果只定义了left与top属性，则另两个属性在不撑大父层的基础上，采用默认值，而如果同时定义了margin的下与右属性则会撑大父层！当然，我指的是子层中有一个流块不能缩小的情况！
而CSS在定义其规则的时候是以使用为原则的，也就是说只要达到使用的要求就可以了！而不是对于任何属性都会按照你的加入而出现一些变化。所以在CSS中达到你的要求就可以了，不必再对其他的不符合要求的东西加属性！
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
