http原理详解
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>
二.浏览器打开以上代码渲染结果
http原理详解的更多相关文章
- I2C 基础原理详解
今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...
- Zigbee组网原理详解
Zigbee组网原理详解 来源:互联网 作者:佚名2015年08月13日 15:57 [导读] 组建一个完整的zigbee网状网络包括两个步骤:网络初始化.节点加入网络.其中节点加入网络又包括两个 ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
- SSL/TLS 原理详解
本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...
- 锁之“轻量级锁”原理详解(Lightweight Locking)
大家知道,Java的多线程安全是基于Lock机制实现的,而Lock的性能往往不如人意. 原因是,monitorenter与monitorexit这两个控制多线程同步的bytecode原语,是JVM依赖 ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- 节点地址的函数list_entry()原理详解
本节中,我们继续讲解,在linux2.4内核下,如果通过一些列函数从路径名找到目标节点. 3.3.1)接下来查看chached_lookup()的代码(namei.c) [path_walk()> ...
- WebActivator的实现原理详解
WebActivator的实现原理详解 文章内容 上篇文章,我们分析如何动态注册HttpModule的实现,本篇我们来分析一下通过上篇代码原理实现的WebActivator类库,WebActivato ...
- Influxdb原理详解
本文属于<InfluxDB系列教程>文章系列,该系列共包括以下 15 部分: InfluxDB学习之InfluxDB的安装和简介 InfluxDB学习之InfluxDB的基本概念 Infl ...
- 【转】VLAN原理详解
1.为什么需要VLAN 1.1 什么是VLAN? VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成的企业网络.V ...
随机推荐
- node基础 npm、module、exports、require
module 模块.包:可以认为是一个代码包,package,提供特定的功能(暴露给外界接口,让外界调用) exports 输出.导出:导出模块中的各种类型的变量,以及各种方法,导出之后,才可以被外界 ...
- Ajax进阶 FormData对象
Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html xhr 2.0及FormData介绍 FormData对象 其实和 XMLHttpReques ...
- Gradle vs Maven Comparison
https://gradle.org/maven-vs-gradle/ Maven需要搭建本地仓库:Gradle直接集成了仓库. ??? 从Maven转移到Gradle,对于如何使用类似于Maven的 ...
- Redis交互编程语言及客户端
Redis Desktop Manager https://redisdesktop.com/download Redis Clients https://redis.io/clients/ ...
- Nginx+Php-fpm运行原理详解
一.代理与反向代理 现实生活中的例子 1.正向代理:访问google.com 如上图,因为google被墙,我们需要vpnFQ才能访问google.com. vpn对于“我们”来说,是可以感知到的(我 ...
- RocketMQ事务消息实战
我们以一个订单流转流程来举例,例如订单子系统创建订单,需要将订单数据下发到其他子系统(与第三方系统对接)这个场景,我们通常会将两个系统进行解耦,不直接使用服务调用的方式进行交互.其业务实现步骤通常为: ...
- 转《Angular4项目部署到服务器上刷新404解决办法》
刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!转载一大神的操作 解决angular2页面刷新后报404错误办法: 配置app.modul ...
- 破解xlsm文件的VBA项目密码和xlsx的工作簿保护密码
工具 待破解的xlsm文件.Excel2010.Hex Editor 步骤 1.修改.xlsm后缀为.zip 2.使用压缩软件打开,进入xl目录找到vbaProject.bin文件,解压出来 3.使用 ...
- mybatis model属性注入多个对象 与model属性注入单个对象
- BZOJ3585&3339mex——主席树
题目描述 有一个长度为n的数组{a1,a2,...,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. 输入 第一行n,m.第二行为n个数.从第三行开始,每行一个询问l,r. 输出 一行一个 ...