CSS盒模型之margin解析

原文链接:http://www.jianshu.com/p/ccb534e9b588

文章分为:

  • margin的使用
  • margin的叠压现象
  • margin的子债父偿现象

一、margin的使用

HTML代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Margin</title>
        <style>
            /*清空标签默认样式*/
             body,div {
                border: 0; margin: 0; padding: 0;
             }
            div {
                width: 100px; height: 100px; background-color: red; margin: 10px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

margin 属性是用于在一个声明中设置四个外边距的所有属性的简写属性。没有继承性,也就是它的设置的margin值不会自动传递到下一级标签中。

margin后面的参数个数可以是一个,两个,三个或四个。

  1. 一个参数,例如:margin:10px;表示四边外边距10像素;
  2. 两个参数,例如:margin:10px 5px;表示上下外边距10像素,左右外边距5像素;
  3. 三个参数,例如:margin:10px 5px 2px;表示上外边距10像素,左右边距5像素,下边距2像素;
  4. 四个参数,例如:margin:10px 5px 2px 1px;表示上外边距10像素,右外边距5像素,下外边距2像素,左外边距1像素

ok,不多说简单使用了,但是在使用margin的时候一定要注意如下两种情况:

1. 同级间,左右相加,上下叠压;
2. 父子级,对第一个子级使用margin-top会出现子债父偿现象。

二、margin的叠压现象

  .div1 {
        width: 100px; height: 100px; background-color: red; margin-bottom: 50px;
  }
  .div2 {
        width: 100px; height: 100px; background-color: red; margin-top: 30px;
  }

在这里,div1与.div2是同级的div,那么二者肯定是上下结构的,问题是此时二者之间的距离是多少像素?80px?还是40px?

答案是50px,因为此时有叠压现象,说白了就是谁的值大就是多少

我们来想这样的一个例子,古代的剑客在功力高深的时候会给人一种有jian气的感觉,假设A剑客的jian气半径是50米,B剑客的jian气是30米,那么二者之间的安全距离是多少呢?答案是50米对不对!

在web中我们称这种现象为外边距的叠压现象。

三、margin的子债父偿现象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin</title>
<style>
    /*清空标签默认样式*/
    body,div {
        border: 0; margin: 0; padding: 0;
    }
    .father {
        width: 300px; height: 300px; background-color: orange;
    }
    .son {
        width: 100px; height: 100px; background-color: red; margin-top:10px;
    }
</style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

margin-top添加在.son选择其中,按理说效果应该是.son(红色块)距离.father(橘黄色块)的顶部10px,但是如果真的是这样么?我们来看效果就知道了:

我们会发现.son相对于.father并没有间距,相反.father却距离body有了10px的上边距,我们称此时发生了子债父偿现象。

这种现象是有问题的,我们在开发中一定要避免这种事情的发生,我们有三种比较成熟的方案来避免这个现象:

1. 为父级添加一个border;
2. 位父级添加一个新的属性overflow:hidden;
3. 不适用margin,在父级中使用padding-top。

注意:子债父偿现象只会发生在对第一个子级使用margin-top时发生。

时间: 2024-10-04 21:42:06

CSS盒模型之margin解析的相关文章

CSS盒模型之margin属性

CSS中,盒模型是一个很重要的思想概念,在处理盒模型的时候,有一些问题需要注意,特别记录在此. 首先,一个"盒子"是由内边距.外边距.边框以及内容构成的,当设置了元素的margin属性时,会影响当前元素的一些状态.例如,两个盒子在页面中, 一个在上,一个在下,同时设置了两个盒子的margin属性时,按理说两个盒子的边框距离应该是两个margin属性值的叠加,但由于CSS的设计导致事实并非如此, 这两个盒子之间的边框距离将会是两个margin属性中比较大的那一个,如果需求就是要让两个盒子

CSS盒模型(Box Model)

阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀.盒模型是网页布局的基础,它制定了元素如何在页面中显示,如果足够地掌握,那使用CSS布局那将会容易得多. 1. 什么是CSS盒模型 盒模型,顾名思义,就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,

IE浏览器和CSS盒模型【转】

总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5.在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法,也就是会显示正确的盒模型,而在 quirks 模式下使用先前的,不规范的算法.即,只有在怪异模式下,css盒模型才会在ie和火狐下存在差异. 但是实际上我们都是使用标准的模式,只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作. //以下摘自百度百科"怪异模式"

html5知识点:CSS盒模型

一. CSS层叠 在前端程序员对CSS编写的过程中,CSS选择器的作用是用来选中某个元素,并对当前的元素进行样式上的渲染,那么每一个选择器都有属于自己的一些解析规则.那我们今天所探讨的CSS层叠就是浏览器对多个样式的来源进行叠加,并最终解析成渲染效果,那这个过程我们就称为CSS层叠. 1) CSS样式的来源 css之所以有"层叠"的概念,是因为有多个样式来源.其实css的样式来源有5个,开发人员只能接触到后面3个. 前三个我们程序员习惯的称为:"内联样式表".&qu

CSS盒模型深入理解

前言 所有文档元素都生成一个矩形框,这称为元素框(element box),它描述了一个元素在文档布局中所占的空间大小.而且,每个框影响着其他元素框的位置和大小 宽高 宽度width被定义为从左内边界到右内边界的距离,高度height被定义为从上内边界到下内边界的距离 在CSS中,可以对任何块级元素设置显式高度.如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样:如果指定高度小于显示内容所需高度,则会向元素添加一个滚动条.如果元素内容的高度大于元素框的高度,

什么是CSS盒模型 ?IE盒模型和W3C盒模型是什么?

1.CSS盒模型 盒模型,顾名思义就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,相当于盒模型的内容(content):东西与盒子之间的空隙,理解为盒模型的内边距(padding):盒子本身的厚度,就是盒模型的边框(border):盒子外与其他盒子之间的间隔,就是盒子的外边距(margin).其中CSS盒模型(图1)分为IE盒模型(图2)和W3C盒模型(图3). 盒模型一共有两种模式,一种是标准

css盒模型

css盒子模型是为了让我们充分理解div+css模型的定位功能,盒子模型在学习div+css布局方式中必须要学习的一个模型. 那什么是css盒模型呢? 网页设计中常听到的属性名:内容(content).填充(padding).边框(border).边界(margin).css盒模型都具备这些属性.这些属性和日常生活中盒子的属性是一样的.内容就是盒子里面装的东西,而填充就是像盒子里装的一些反震的材料,边框就是箱子的本身,边界呢就像盒子之间的空隙. 盒子的模型有2种,分别是IE盒子模型和标准盒子模型

CSS 盒模型

CSS盒模型也叫框模型,具备内容(content).内边距(padding).边框(border).外边距(margin)这些属性.在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘与其他框分开: margin:外边距,表示框的边缘与相邻框之间的距离: padding:内边距,表示框内容和边框之间的空间. 盒模型的结构如下图所示: 由上图可以看出,width和height指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元