HTML中div嵌套div的margin不起作用
下面介绍一下div嵌套div时margin不起作用的解决方案。
顺便科普下margin的定义和用法。
div嵌套的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background-color: dodgerblue;
}
.box{
width: 300px;
height: 300px;
margin: 30px;
background-color: gray;
}
.box .child{
width: 200px;
height: 200px;
margin: 50px;
background-color:darkturquoise;
}
</style>
</head>
<body>
<div class="box">
<div class="child"> </div>
</div>
</body>
</html>
实际效果：
这其实不是我们想要的效果，先来说下为什么会出现这个问题：
有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。
解决该问题我们需要先了解ie特有的一个属性haslayout。
我们要实现的效果是这样的：
最后我们来说一下解决方法：
1、让父元素生成一个block formating context（块级格式化上下文，可自行百度了解），以下属性可以实现
float: left/right
position: absolute
display: inline-block
overflow: hidden/auto
2、给父元素添加border或者padding
以方法一的overflow:hidden为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background-color: dodgerblue;
}
.box{
width: 300px;
height: 300px;
margin: 30px;
background-color: gray;
overflow: hidden;
}
.box .child{
width: 200px;
height: 200px;
margin: 50px;
background-color:darkturquoise;
}
</style>
</head>
<body>
<div class="box">
<div class="child"> </div>
</div>
</body>
</html>
最终效果：
HTML中div嵌套div的margin不起作用的更多相关文章
- div嵌套引起的margin-top不起作用
通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一 ...
- div嵌套引起的margin-top不起作用（转）
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
- DIV的Position属性和DIV嵌套DIV
1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...
- div中嵌套div速度将会同样很慢
---恢复内容开始--- div中嵌套了div速度将会同样很慢 最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...
- HTML里为什么不能在<p>标签中嵌套<div>标签
学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...
- div中嵌套div中使用margin-top失效问题
div中嵌套div中使用margin-top失效问题
- ie7中ul不能嵌套div和li平级
我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱! 代码: <ul class="catshow"> ...
- html标签被div嵌套页面字体变大的解决办法
html标签被div嵌套页面字体变大的解决办法 <div> <html> <head> <title></title> </head& ...
- div嵌套引起的内层margin-top对外层div起作用
嵌套div中margin-top转移问题的解决办法在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-botto ...
随机推荐
- 【Oracle】rman中SBT_TYPE类型的备份如何删除
技阳的rman数据库出现删除rman备份失败,原因是出现SBT_TYPE的磁带备份. [BEGIN] 2018/8/13 13:48:42 RMAN> list backup; List of ...
- java语言进阶（三）_List_Set_数据结构_Collections
主要内容 数据结构 List集合 Set集合 Collections 第一章 数据结构 1.1 数据结构有什么用? 常见的数据结构:堆.栈.队列.数组.链表和红黑树 . 1.2 常见的数据结构 栈 栈 ...
- Azure Data Box
一,引言 最近博主又要面临考试了,随笔又再次缓慢更新,说起考试,之前在微软的 ms learn的课程上有接触到一个叫 Azure Data Box的,刚好今天也花了一个多小时看了一下相关文档,下面就正 ...
- PreparedStatement 防止sql注入 练习
使用的数据库 MariaDB 10.5.4版本 端口1054 数据库为jt_db,表 为user 数据库的建表和插入相关数据代码: create table user( id int pr ...
- efcore 跨表查询，实现一个接口内查询两个不同数据库里各自的表数据
最近有efcore跨库查询的需求,研究了下colder框架里文档的分库实现,发现并不能完全实现一个接口下的跨库查询请求,只能满足一个业务层构造指定的唯一一个数据库访问接口. 先说下文档是怎么实现的 D ...
- Mysql常用sql语句（24）- delete 删除数据
测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 delete 也属于DML语句(数据操纵语句) ...
- JavaScript location对象、Navigator对象、Screen对象简介
Location对象 location用于获取或设置窗体的URL,并且可以用于解析URL. 语法: location.[属性|方法] Location对象属性 Location对象方法: Naviga ...
- Maven 专题（三）：为什么要用Maven
1 真的需要吗? Maven 是干什么用的?这是很多同学在刚开始接触 Maven 时最大的问题.之所以会提出这个问题, 是因为即使不使用 Maven 我们仍然可以进行 B/S 结构项目的开发.从表述层 ...
- scrapy 基础组件专题（十四）：scrapy CookiesMiddleware源码
一 Scrapy框架--cookie的获取/传递/本地保存 1. 完成模拟登陆2. 登陆成功后提取出cookie,然后保存到本地cookie.txt文件中3. 再次使用时从本地的cookie.txt中 ...
- linux09 /消息队列、saltstack工具
linux09 /消息队列.saltstack工具 目录 linux09 /消息队列.saltstack工具 1. 消息队列之rabbitmq 2. 云计算 3. 远程过程调用的实现:rpc 4. s ...