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!
解决办法:
- 给父盒子添加1px的padding-top; 会导致父盒子结构多余1px padding;
- 给父盒子添加1px的border-top; 同样会导致1px的多余空间;
- 给父盒子或者子盒子添加浮动。可能出现由于浮动,影响页面的布局的情况;
- 给父盒子添加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.
下一节将会详细讲解灵活布局(弹性盒子)。
阅读全文
1 0
- CSS盒子模型要点补充
- 盒子模型补充
- 盒子模型补充知识汇总
- CSS基础学习十六:CSS盒子模型补充之border-radius属性
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- css盒子模型
- CSS盒子模型介绍
- CSS+DIV 盒子模型
- CSS盒子模型
- 455.assign cookies
- Pycharm下的Anaconda配置
- Guava Cache应用
- Android自定义View——从零开始实现书籍翻页效果(三)
- python笔记007--代码风格
- CSS盒子模型要点补充
- UVA-12563 01背包
- canvas元素
- windows10 里 SQL 乱码问题解决方案
- iOS和macOS体验合一?苹果还得解决这些
- phpstorm 配置Xdebug进行调试PHP教程
- D3D 基础彩色矩形的绘制
- 使用web.xml方式加载Spring时,获取Spring context的两种方式
- Navicat 连不上mysql数据库 问题及解决法