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 ...
随机推荐
- 安装JDK9之后eclipse无法启动问题解决办法
操作系统:MAC OS JDK:1.8.0_131 eclipse:官网最新版 安装jdk的过程很简单,从官网下载之后依次点击就可以了,在终端输入:java -version 可以看到安装后的版本信息 ...
- ionic-CSS:ionic 颜色
ylbtech-ionic-CSS:ionic 颜色 1.返回顶部 1. ionic 颜色 ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色. 实例 <ul class=&q ...
- BBB 常用指令
source .bashrc root@beaglebone:~# route add default gw 192.168.7.1 echo BB-SPIDEV0 > /sys/devices ...
- plugin python was not installed: Cannot download ''
problem: plugin python was not installed: Cannot download ''........ 1. the first method of resoluti ...
- scp 传输下载
利用scp传输文件 1.从服务器下载文件 scp username@servername:/path/filename /tmp/local_destination 例如scp codinglog@1 ...
- Winform 获取桌面设备上下文
//获得桌面设备上下文 us(Graphics g = Graphics.FromHwnd(IntPtr.Zero)) { g.DrawLine(Pens.Red, , , , ); }
- centos安装与配置R语言
Linux下安装R语言 一.编译安装 由于采用编译安装,所以需要用到gcc编译环境,在编译前check文件时还会用到libXt-devel和readline-devel两个依赖,所以在编译R语言源码时 ...
- iOS逆向系列-tweak补充
tweak加载资源 开发自己的deb插件需要加载自己的资源,比如图片资源.iOS中常用的两种加载图片资源的方式: + (nullable UIImage *)imageNamed:(NSString ...
- Android开发 DialogFragment对话框详解
前言 在聊DialogFragment之前,我们看看以往我们在Android里实现一个对话框一般有这几种方式: Dialog 继承重写Dialog实现一个自定义的Dialog AlertDialog ...
- 查看收到的邮件的来源ip以及包信息
有时我们需要知道收到的邮件是从哪台服务器发送过来的,或者想知道该邮件的报文头是怎样的.以下以网易邮箱为例介绍如果抓取这些信息. 首先我们需要知道网易邮箱的访问服务器(拉协议),由于SMTP是推的协议, ...