css之margin相关的问题以及解决办法
来源:互联网 发布:杭州java工资 编辑:程序博客网 时间:2024/06/16 02:37
1. 问题
1.1 IE6下的双边距问题。解决办法:使用display:inline;或者是去掉浮动。
1.2 margin的重叠问题。
解决办法:
方法一:解决margin重叠最好的办法就是避免它;
方法二:使用浮动,浮动可以解决margin的重叠问题,只能解决同方向上的重叠,不同方向上的是无法解决的。代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 600px;height: 600px;margin: 40px;background: pink;}.box2 {width: 300px;height: 50px;margin: 40px;background: red;float: left;}.box3 {width: 400px;height: 50px;background: blue;margin: 40px;clear: both;}</style></head><body><div class="box1"><div class="box2">1 </div><div class="box3"></div></div></body></html>
方法三:给父级元素添加overflow:hiddden,代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 600px;height: 600px;margin: 40px;background: pink;overflow: hidden;}.box2 {width: 300px;height: 50px;margin: 40px;background: red;}.box3 {width: 400px;height: 50px;background: blue;margin: 40px;}</style></head><body><div class="box1"><div class="box2">1 </div><div class="box3"></div></div></body></html>方法四:父级盒子添加边框,代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 600px;height: 600px;margin: 40px;background: pink;border: 1px solid #000;}.box2 {width: 300px;height: 50px;margin: 40px;background: red;}.box3 {width: 400px;height: 50px;background: blue;margin: 40px;}</style></head><body><div class="box1"><div class="box2">1 </div><div class="box3"></div></div></body></html>
阅读全文
0 0
- css之margin相关的问题以及解决办法
- css margin的相关属性,问题及应用
- css margin的相关属性,问题及应用
- css margin的相关属性,问题及应用
- css margin的相关属性,问题及应用
- CSS margin负值的使用以及可能碰到的问题
- css margin重叠的问题
- CSS的margin重叠问题
- css的margin重叠问题
- css margin重叠的问题
- Css中margin塌陷与合并问题与解决办法
- css中的margin的负数问题
- css 左右Margin加倍的问题
- 负边距(negative margin)的相关问题整理
- 负边距(negative margin)的相关问题整理
- CSS margin合并问题
- CSS margin重叠问题
- Css Margin合并问题
- 自顶向下,逐步求精
- C++/python解决无穷皇后问题
- jQuery 遍历
- Fragment+Viewpager的预加载与懒加载
- jQuery 的几个插件
- css之margin相关的问题以及解决办法
- Zookeeper系列—集群安装
- java中数组的最大长度以及List的最大容量
- 初学者最常问的几个问题
- S12动态内存
- 系统服务JNI的实现分析
- 从CNN视角看在自然语言处理上的应用
- 取消studio自动生成的作者名和日期的注释
- HTML DOM setTimeout() 方法