zoukankan      html  css  js  c++  java
  • 盒子模型的理解

    布局:

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

     测试1(默认样式):

    Netscape 和 IE 对 body 标签定义的默认边距(margin)值是 8px。而 Opera 不是这样。相反地,Opera 将内部填充(padding)的默认值定义为 8px,因此如果希望对整个网站的边缘部分进行调整,并将之正确显示于 Opera 中,那么必须对 body 的 padding 进行自定义。

     测试2(设置长度和宽度):

    body, div {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 100px;
        height: 50px;
    }

     效果:

    在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加padding、border和margin不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

    兼容性问题:IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

    测试3(设置padding):

    .box {
        width: 100px;
        height: 50px;
        padding: 5px;
    }

    当设置padding为负数时,盒子模型中padding会为“-”,和padding为0的效果一致,margin、border和content不受影响,事实上,padding取值不可以为负数。

    padding为正数的盒子 padding为负数的盒子
    盒子1 效果1 盒子2 效果2


     测试4(设置margin):

    .box {
        width: 100px;
        height: 50px;
        padding: 5px;
        margin: 10px;
    }

     

    当设置margin为负数时,会减小整个盒子的大小,依次消除padding和content:

    margin为正数的盒子 margin为负数的盒子
    盒子1 效果1 盒子2 效果2

    对于margin,多个盒子之间还存在margin合并。

    不过,只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。 

     

    参考

    http://www.w3school.com.cn/css/css_margin.asp

    http://www.w3school.com.cn/css/css_margin_collapsing.asp

     

  • 相关阅读:
    (转)typedef用法
    (转)在用户空间发生中断时,上下文切换的过程
    (转)内核中断,异常,抢占总结篇
    (转)中断上下文和进程上下文的区别
    (转)C中的volatile用法
    (转)gcc学习笔记
    (转)C系程序员面试必知必会之大端小端
    (转)我在北京工作这几年 – 一个软件工程师的反省
    (转)忠告
    Linux下VLAN功能的实现 (转)
  • 原文地址:https://www.cnblogs.com/hemi/p/4287046.html
Copyright © 2011-2022 走看看