HTML中div嵌套div的margin不起作用的解决方法_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

应该是漏结束符吧,一般的布局话,都是一个总的div然后在里面套上divwww.zgxue.com防采集请勿采集本网。

下面介绍一下div嵌套div时margin不起作用的解决方案。

可以.但使用框架需要注意DOCTYPE声明. div style=\"position:absolute;top:100;iframe> div> ('ifrm').src='1.htm';value=

顺便科普下margin的定义和用法。

可以用float来实现这个效果,float有left和right两个方向。nav {width:500px;height:30px;} nav span{width:200px;height:30px;float:left} nav div{width:300px;height:30px;float:left} div

div嵌套的HTML代码:

这样子?main{ width:500px;height:200px;background-color:#0000ff;text-align:center;div class=\"in\"></div> div class=\"in\"></div> div class=\"in\"></div> div> div>

<!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 class=\"蓝色\"> div class=\"黄色\"></div> div> 当然 class 是不能为汉字的、这样写 容易看的明白 如果 想让 黄色 的 块 居中的话 设置其 width:值;然后 margin:0 auto;

实际效果:

是不是ID=nav的DIV的溢出属性设置为hidden了?(#nav{overflow:hidden}),如果是这样的话这个元素是不会被撑大的,溢出的内容会被隐藏。还有在火狐浏览器上如果ID=nav的DIV设置了确定的宽和高,

这其实不是我们想要的效果,先来说下为什么会出现这个问题:

有两个嵌套关系的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不起作用的解决方法的文章就介绍到这了,更多相关html时div嵌套div的margin不起作用内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

正则不知道怎么获取,jquery到是比较方便获取,给你的div起个id 用$("#id").html()就能获取到内容内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html中使用margin:0 auto整个页面不居中的解决方法
  • html和css的关键:盒子模型(box model)-css教程-网页制作-网页教学网
  • html教程,html默认样式
  • 如何用正则获取html中带有div嵌套的div内容
  • 为什么html中建立了几个div,有的div根本就不是嵌套在里面呢?
  • HTML里为什么不能在p标签中嵌套div标签
  • html这个样式怎么做,用DIV里面嵌套ul,如何做,
  • div层里能嵌套框架或者新的html页面吗?
  • html里 如何使两个嵌套的div在同一行显示?
  • html关于div嵌套几个div的对齐。
  • div嵌套在另一个div中,让当前div居中,如图:
  • html中DIV互相嵌套父级是否被撑大的规律是什么呢?
  • 一个大的DIV中嵌套两个小的DIV一左一右
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtml嵌套divmargin不起作用htmlhtml中使用margin:0 auto整个页面不居中的解决方法html教程,html默认样式html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html中input提示文字样式修改的示例代码详解html中表格table的行列合并问题解决layui表格选中指定行的radio单选框并滚动到该行的实现利用div+css3实现一个背景渐变的button按钮的示例代码quill编辑器插入自定义html记录的示例详解html 实现tab切换的示例代码html+css相对宽度和绝对宽度冲突时的div解决方法html table实现复杂表头的示例代码html的relative与absolute使用及区别详解html页面展示json数据并格式化的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved