margin塌陷现象
如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)
解决方案: padding , border , overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style>/*margin塌陷*/ .box1 { width: 250px; height: 250px; background-color: red; /*padding-top: 100px;*/ /*方法1:要减去多出的相应高宽 */ /*border: 1px solid #000000;*/ /*方法2*/ overflow: hidden; /*方法3*/ } .box2 { width: 100px; height: 50px; background-color: blue; margin-top: 100px; margin-left: 75px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
margin塌陷现象的更多相关文章
- margin 塌陷现象 与 注意事项
1.在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象. 但是,脱标之后就不会出现margin的塌陷现象. 2.margin:0 auto; 会让盒子水平居 ...
- margin塌陷现象(即在内层设置margin-top无效的解决办法)
有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象. 解决办法 ...
- "margin塌陷现象"div盒子嵌套盒子外边距合并现象
问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...
- margin的两个有趣现象:margin合并和margin塌陷
margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...
- “margin塌陷” 嵌套盒子外边距合并现象
来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...
- css中常见margin塌陷问题之解决办法
塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <d ...
- Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题
一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...
- margin塌陷
我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深.有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(...那这必须得去看啊). ...
- 12-[CSS]-margin塌陷,margin 0 auto,善用父级的padding
1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
随机推荐
- 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器
引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...
- LuaSrcDiet工具介绍(lua源码处理软件)
Diet Food Diet (nutrition), the sum of the food consumed by an organism or group Dieting, the delibe ...
- VSO-Branch和Merge
分支策略 一般采用一个MAIN分支,一个或多个DEVELOPMENT分支的分支结构,如下图(来自:https://msdn.microsoft.com/en-us/library/ee782536.a ...
- AIX 5L 系统管理技术 —— 存储管理——卷组
卷组 在安装系统时,就会创建一个rootvg卷组.包含自带硬盘(内置硬盘)和系统逻辑卷,一个系统只能有一个rootvg卷组.一般情况下rootvg卷组最好只包含自带硬盘. 一.创建卷组 在创建卷组之前 ...
- Python爬虫爬取豆瓣电影名称和链接,分别存入txt,excel和数据库
前提条件是python操作excel和数据库的环境配置是完整的,这个需要在python中安装导入相关依赖包: 实现的具体代码如下: #!/usr/bin/python# -*- coding: utf ...
- 无限分页//////////////zz
由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态.因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿.传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击 ...
- ubuntu配置tftp服务
ubuntu配置TFTP服务: TFTP是用来下载远程文件的最简单的网络协议,基于UDP协议.xinetd是新一代的网络守护进程服务程序,经常用于管理多种轻量型internet服务. sudo apt ...
- Generate Ubuntu Install Media On Mac
Opps, my computer system was broken again... Let's repire it. Introduction The system of my PC is br ...
- VIM 常用快捷键
一,光标移动 大家不要觉得光标移动不重要,其实它是基础,更好的光标移动,复制,粘贴,删除等才能更加的得心应手,进入了编辑器里面后,鼠标就不能用了. 光标移动 h 或 向左箭头键(←) 20h或者20( ...
- Core 1.0中publishOptions Include的bug
"publishOptions": { "include": [ "wwwroot", "Views", "A ...