前端Day11

作者: include_ | 来源:发表于2017-02-25 22:20 被阅读5次

CSS内边距

内边距是设置盒子与子盒子之间的距离。

pading: 10px;  设置上下左右都是10px的内边距。

padding:10px 12px;设置上下是10px的宽度,左右是12像素的宽度。

pading:10px 12px 13px 14px; //分别设置的是上右下左

如果设置三个值:上左右下

CSS外边距

外边距设置兄弟元素之间的距离。

margin的设置跟padding的一样。

margin:0 auto;可以让块级元素水平的居中。

原理:auto是设置外边距自动赋值。如果左右都是auto的时候,会把盒子所在行剩余的宽度除以2,然后分别赋值给左右的magin值,自然就会让盒子居中显示了。

行内元素的margin(padding)只能在水平方向起作用。垂直方向不起作用。


外边距的合并

第一种外边距合并的情况:

       当两个块级元素,上面块级元素拥有下外边距,下面的块级元素拥有上外边距的时候。两个盒子上下的距离会取两个边距的最大值,而不是把两个盒子的边距进行加和处理。

第二种外边距合并的情况:

       当块级元素进行嵌套的时候,如果父盒子没有设置上边框和上内边距的话,子盒子的上外边距和复盒子的上外边距会进行合并。

快捷键:

.box$*3+Tab键     ($符是编码的意思)

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>


相关文章

网友评论

    本文标题:前端Day11

    本文链接:https://www.haomeiwen.com/subject/isbnwttx.html