http原理详解
2024-10-22 08:07:47
HTML&CSS基础-垂直外边距的重叠/折叠
作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。
一.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直外边距的重叠</title> <style type="text/css">
/**
* 垂直外边距的重叠
* 在网页中相邻且垂直方向的外边距会发生外边距的重叠;
* 所谓的外边距重叠指的是元素之间相邻边距会取最大值而不是取和;
* 如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素
*/
.box1{
width: 100px;
height: 100px;
background-color: red;
/**
* 为上边距的元素设置一个下外边距
*/
margin-bottom: 100px;
} .box2{
width: 100px;
height: 100px;
background-color: royalblue;
/**
* 为下边的元素设置一个上外边距
*/
margin-top: 100px;
} .box3{
width: 200px;
height: 100px;
background-color:deeppink; padding-top: 100px;
} .box4{
width: 100px;
height: 100px;
background-color:coral;
/**
* 为子元素设置一个上边距,使得子元素唯一下移
*/
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
二.浏览器打开以上代码渲染结果
最新文章
- Vim插件管理
- Quartz2之入门示例【转】
- C#中ref,out
- 【腾许Bugly干货分享】“HTTPS”安全在哪里?
- poj3335 半交平面,多边形内核
- JavaScript模块化开发整理
- 图解AngularJS Wijmo5和LightSwitch
- 线程同步 Lock接口
- C#算法基础之冒泡排序
- ios 从微信返回自己的app
- NotePad++ for PHP
- c#入门系列——类和对象的代码实现
- 【Unity Shaders】Alpha Test和Alpha Blending
- 你觉得 .NET 性能低,可能只是因为你的能力低
- 46道史上最全Redis面试题,面试官能问的都被我找到了(含答案)
- 使用PHP做分页查询(查询结果也显示为分页)
- 判断NaN的真假
- bzoj1242(弦图判定)
- 页面弹出全屏浮层或遮罩时,禁止底层body滚动
- m4a文件在iOS上的流媒体播放
热门文章
- 使用github的感想
- shell脚本第一课
- spring-web-4.3.3与spring-webmvc-4.3.3的区别
- Selenium vs TestStudio,Selenium Grid vs F2Test
- Eclipse:An internal error occurred during: ";Building workspace";. GC overhead limit exceeded
- JQuery 操作 radio 被坑一例
- sort和uniq的应用实例
- PKUWC 2019&;WC 2019爆零记
- 自学工业控制网络之路1.5-典型的现场总线介绍DeviceNet
- 自学Zabbix之路15.5 Zabbix数据库表结构简单解析-其他 表