HTML-完美解决父子元素的外边距重叠和高度塌陷问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px; padding:0px;}
.box1{
width: 300px;
height: 300px;
background-color: red
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
} </style>
</head>
<body> <div class="box1 "> <div class="box2"></div>
</div> </body>
</html>
当把子元素margin-top:100 时，其父元素会跟着一样改变
解决方法
用css解决
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
} .clearfix{
zoom: ;
}
形成以下完全代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px; padding:0px;}
.box1{
width: 300px;
height: 300px;
background-color: red
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
}
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
} .clearfix{
zoom: ;
} </style>
</head>
<body> <div class="box1 clearfix"> <div class="box2"></div>
</div> </body>
</html>
运行后变成
HTML-完美解决父子元素的外边距重叠和高度塌陷问题的更多相关文章
- __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷
<div class="box1"> <tabl></table> <div class="box2">< ...
- __x__(22)0907第四天__ 垂直外边距重叠
外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素 垂直外 ...
- CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...
- margin属性以及垂直外边距重叠问题
盒子的margin属性 盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置 ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...
- css中margin上下外边距重叠问题
css的盒子模型里是这样规定两个对象之间的距离的:对象之间的间距是由两个对象的盒子模型的最终计算值得出来的,也就是说两个对象之间的间距就是两个对象的距离,但是当遇到两个对象一个有下外边距margin, ...
- css外边距重叠及避免方法
<html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...
- 触发bfc解决父子元素嵌套垂直方向margin塌陷问题
首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-colo ...
随机推荐
- Annotation详解
转自:http://www.doc88.com/p-995532241886.html 首先我们定义一个简单的注解 package com.qjy.annotation; import java.la ...
- AtCoder ABC 128E Roadwork
题目链接:https://atcoder.jp/contests/abc128/tasks/abc128_e 题目大意 在一条路上(这条路可以看做坐标轴 x 轴从 0 开始方向为正无穷方向的射线),有 ...
- Codeforces 1174B Ehab Is an Odd Person
题目链接:http://codeforces.com/problemset/problem/1174/B 题意:给定长度 n 的数组,任意俩个相加为奇数的数可以交换数组中的位置,让这个数组尽量从小到大 ...
- java中的反射机制和javaBean
反射 反射:就是通过一个类加载进方法区时加载到栈内存中的Class字节码文件对这个类进行解剖 通过反射可以获取到一个类的构造方法,成员方法,成员变量 反射将一个类的各个部分映射成相应的类 反射获取构造 ...
- 往github上上传项目
点击start a project 新建 下面部分传送http://blog.csdn.net/s740556472/article/details/55000019 如图: 这里我们有一个步骤需要做 ...
- varnish(转http://www.ttlsa.com/nginx/varnish-4-configure-file/)
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...
- 【csp】2018-3
第一题 跳一跳 题目: 题意:浅显.qwq 题解:2计数+1,到1就清空计数. 代码: #include<iostream> #include<cstdio> #include ...
- mac NTFS 关于错误-36，rm Input/output error
当传输文件时出现Mac错误代码36 当我向一个U盘或存储卡里传输文件时,出现了Mac Error Code36,我该如何解决? Mac,传输文件,错误代码36,U盘,卡片 Mac OS X Snow ...
- 人脸识别-常用的数据库Face Databases From Other Research Groups
Static/Videos Static Single/Multiple faces Single? Gray/Color Color Resolution Vaious Face pose Fron ...
- Mobox企业网盘回收站文件清空与恢复的管控
1. Mobox系统提供了 个人网盘的回收站 2. Mobox系统提供了 针对公司及部门文档柜的回收站 Mobox系统对个人网盘的回收站可以做这样的限制 1) 可以通过安装程序 ,不出现 回收站 2 ...