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 ...
随机推荐
- 要想数组用的 6，怎能不懂 java.util.Arrays
java.util.Arrays 类就是为数组而生的专用工具类,基本上常见的对数组的操作,Arrays 类都考虑到了,这让我由衷地觉得,是时候给该类的作者 Josh Bloch.Neal Gafter ...
- 什么是X-UA-Compatible？X-UA-Compatible的作用
代码 <meta http-eqiv="X-UA-Compatible" content="ie=edge"> 什么是X-UA-Compatible ...
- VScode 配置c/c++环境（结合各大网站的blog和官方文档）
第一步:下载mingw64 首先,在各大搜索引擎上搜索mingw64,进入其官网下载即可 需要注意的是,下载默认的是先从网页上下载下载器,再进行选择下载.但是在部分电脑上下载会出现什么mingw64. ...
- django 缓存（memcached）
Django提供了6种缓存方式 开发调试缓存 内存缓存 文件缓存 数据库缓存 Memcache缓存(使用python-memcached模块) Memcache缓存(使用pylibmc模块) 常使用的 ...
- Esp8266 网络结构体
Esp8266建立网络连接相关结构体如下: 结构体头文件espconn.h /** Protocol family and type of the espconn */ enum espconn_ty ...
- day21 模块与包+软件开发目录规范
目录 一.导入模块的两种方式 二.模块搜索的路径的优先级 三.循环导入 四.区分py文件的两种用途 五.编写一个规范的模板 五.包 1 什么是包 2 为什么要有包 3 包的相关使用 3.1 在当前文件 ...
- 安装visual stdio 2017后依然报错：Unable to find vcvarsall.bat
安装visual stdio 2017后依然报错:Unable to find vcvarsall.bat 解决办法:更新setuptools 原文章:https://blog.csdn.net/wl ...
- java 面向对象（十九）：关键字：static
static:静态的1.可以用来修饰的结构:主要用来修饰类的内部结构属性.方法.代码块.内部类2.static修饰属性:静态变量(或类变量) 2.1 属性,是否使用static修饰,又分为:静态属性 ...
- 一张PDF了解JDK10 GC调优秘籍-附PDF下载
目录 简介 Java参数类型 Large Pages JIT调优 总结 简介 今天我们讲讲JDK10中的JVM GC调优参数,JDK10中JVM的参数总共有1957个,其中正式的参数有658个. 其实 ...
- JavaWeb基础（day14_css）
css css样式种类 内部样式 在head标签中使用 <style>标签 行内样式 直接在标签中写style属性进行赋值,style属性的就相当于内部样式的{} 外部样式 单独写一个文件 ...