CSS盒子模型要点补充

来源:互联网 发布:focusky官方中文版mac 编辑:程序博客网 时间:2024/06/08 09:46

情况介绍:


当父盒子包裹子盒子,给子盒子添加margin-top时,子盒子与父盒子的上边线并不能分开,而是会导致,两个盒子同时下来。


示例代码:

 <style>        *{            margin: 0px;            padding: 0px;        }        #father{            width: 400px;            height: 400px;            margin: 0px auto;            background-color: #5f79ff;        }        #son{            width: 200px;            height: 200px;            margin: 0px auto;            background-color: #9d4c48;        }    </style>    <title>盒子模型示例</title></head><body><div id="father">    <div id="son"></div></div></body>

效果如图:

这里写图片描述


当添加margin-top属性给子盒子后:

<style>        *{            margin: 0px;            padding: 0px;        }        #father{            width: 400px;            height: 400px;            margin: 0px auto;            background-color: #5f79ff;        }        #son{            width: 200px;            height: 200px;            margin-left: auto;            margin-right: auto;            background-color: #9d4c48;            /*添加margin-top属性导致父盒子也发生移动*/            margin-top: 50px;          }    </style>

效果如图:

这里写图片描述

不难看出,父盒子也同时向下移动50px!

解决办法:

  1. 给父盒子添加1px的padding-top; 会导致父盒子结构多余1px padding;
  2. 给父盒子添加1px的border-top; 同样会导致1px的多余空间;
  3. 给父盒子或者子盒子添加浮动。可能出现由于浮动,影响页面的布局的情况;
  4. 给父盒子添加overflow属性(overflow:hidden); 推荐!

代码如下:

 <style>        * {            margin: 0px;            padding: 0px;        }        #father {            width: 400px;            height: 400px;            margin: 0px auto;            background-color: #5f79ff;            overflow: hidden;        }        #son {            width: 200px;            height: 200px;            margin-left: auto;            margin-right: auto;            background-color: #9d4c48;            /*添加margin-top属性导致父盒子也发生移动*/            margin-top: 50px;        }    </style>

效果如下:

这里写图片描述


通过给父盒子添加overflow:hidden属性,使问题的得以解决!


Programming is an art form.


下一节将会详细讲解灵活布局(弹性盒子)。

原创粉丝点击