*{margin:0px; padding:0px;}
.box1{
width: 300px;
height: 300px;
background-color: red
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
}
当把子元素margin-top:100 时,其父元素会跟着一样改变
解决方法
用css解决
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: ;
}
形成以下完全代码
*{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: ;
}
运行后变成
__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外边距重叠及避免方法
触发bfc解决父子元素嵌套垂直方向margin塌陷问题
首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-colo ...
随机推荐
搭建FTP服务器
yum install vsftpd -yyum install pam* db4* --skip-broken –y 创建并生成vsftpd 数据库文件vi /etc/vsftpd/ftpusers ...
ASP.NET MVC 异常Exception拦截器Fillter
异常信息的处理在程序中非常重要, 在asp.net mvc中提供异常属性拦截器进行对异常信息的处理,异常拦截器也没有什么的,只是写一个类,继承另一个类(System.Web.Mvc.FilterAtt ...
[hibernate]基本值类型映射之日期类型
hibernate基本值类型映射中日期类型支持date,time,timestamp这三个选项,其中 date:对应数据库中的date类型,表示只显示日期 time:对应数据库中的time类型,表示只 ...
MongoDB Auto-Sharding(自动分片)入门介绍
MongoDB是10gen团队开发的一款面向文档的NoSQL数据库.最近一年多以来,MongoDB被越来越多的大型网站应用到生产环境中,比较著名的有Foursquare, bit.ly, Source ...
c++之模板
. 函数模板 普通函数 void Swap(int &, int &); 模板函数 template void Swap(T &, T & ...
Headless Android开发板的调试及远程显示和控制
最近在调试msm8996的开发板,由于主板和LCD子板还没回来,所以先回的核心板算是个Headless的Android Device.核心板有独立供电,另外还有USB Type-C.FAN.HDMI. ...
mybatis_07动态SQL_foreach循环
废话不多说,直接上代码!
Flask中Mysql数据库的常见操作
from flask import Flask,render_template #导入第三方链接库sql点金术 from flask_sqlalchemy import SQLAlchemy #建立对 ...
自学Aruba4.1-Aruba开机初始化
点击返回:自学Aruba之路 自学Aruba4.1-Aruba开机初始化 无线控制器刚启动的时候,是没有任何配置的,需要进行初始化配置才能进行管理. 通过无线控制器的console端口连接无线控制器, ...
orcl 如何快速删除表中百万或千万数据
orcl 数据库表中数据达到上千万时,已经变的特别慢了,所以时不时需要清掉一部分数据. bqh8表中目前有10000000条数据,需要保留19条数据,其余全部清除掉. 以下为个人方法: 1.首先把需要 ...