第十四课 div css当中 DIV内边距和外边距概念讲解
本帖最后由 asp老师 于 2014-12-3 22:00 编辑好我们分别来看html代码，这个是body 当中的内容；
<font size="4"><font size="4">
<div class="aaa">111</div>
<div class="bbb">222</div></font></font>好我们来定义下css代码
<font size="4"><font size="4">.aaa{background:#099; width:300px; height:200px;}
.bbb{ background:#F00; width:300px; height:200px;}</font></font>此时效果如下
我们在css代码当中添加了一个margin-bottom:50px; 这个表示的是下面的边距即为-（外边距）
我们来看效果：
同样的如果改为
<font size="4"><font size="4">margin-left:50px;</font></font>
那么此时的效果如下：
margin-left:50px; 这个表示的外面的左边距；此时我们修改源代码html为;
<font size="4">
</font><blockquote><font size="4"><div class="aaa"></font>css代码为;
<blockquote><font size="4">.aaa{background:#099; width:500px; height:300px; }</font>那么效果如下;
我们看到类为.bbb的被类为.aaa的包含进来！此时我们修改css代码为
<font size="4">.aaa{background:#099; width:500px; height:300px; padding-left:50px;}
.bbb{ background:#F00; width:300px; height:100px;}
</font>
此时我们看到这个类为.aaa的 多了一个padding-left:50px; 这个表示什么意识呢？值得是内边距左侧50px，谁在谁的内部，.bbb在.aaa的内部，那么此时我们如果要用内边距padding的话，就应该修改大的那个div的内边距，那么就是这个类为.aaa的css属性！（当然可能会有人讲我单独设置这个类别为.bbb的div的外边距marigin-left:50px; 这样不也是可以的嘛。）
如果我们来写
padding:25px 50px 45px 10px;}的这个表示的是内边距为：25px 50px 45px 10px 这个顺序分别是上 右 下 左
如果是2个数值呢：代码如下
.aaa{background:#099; width:500px; height:300px; padding:25px 50px }
.bbb{ background:#F00; width:300px; height:100px; }
这个就表示的是，上下是25px 左右是50px
.aaa{background:#099; width:500px; height:300px; }
.bbb{ background:#F00; width:300px; height:100px; margin:25px auto;}
谢谢 道勤 奇睿互联 发表于 2016-10-3 17:27
谢谢 道勤
感谢您的支持
页:
[1]