下面介绍一下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=

IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:<div id="cnbruce">margin: 0 auto 看看内容居中否</div>如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body>”声明文本居中,即[ Copy ] [ Run ] [ Save

外层元素(如div)中只有一个非空子元素,此时margin是被折叠了.两者之间取最大的margin值,表现在外层父元素上,而不是内层子元素. 注意: (1)只有垂直方向上才会出现此现象,水平方向不会出现该现象: (2)解决方法: 1)给内层子元素添加浮动: 2)在外层父元素内加 padding-top: 3)在外层父元素加 overflow:hidden:

转自:http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,网上看到原因如下:<div id="cnbruce">margin: 0 auto 看看内容居中否</div>如上调试结果,IE6.0是不居中的,当然解决的办法可以是对网页主体“<body&

以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能会有点多,但都是精华,希望大家耐心学习. 以下的分享会分为如下内容: 1.margin 属性的简单介绍 1.1:普通流的 margin 百分比设置 1.2:绝对定位的 margin 百分比设置 2.margin 无法适用的元素 3.外边距折叠 (Collapsing margins) 3.1:Col

margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题! 2.没声明DOCTYPE①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本.要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分! ②看看下面的代码

转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS样式,他们分别是间距和填充,一个作用于盒子外面,一个作用于盒子里面,默认的情况下,这些属性的值都会被计算在盒子的面积里面,在网页开发中的流体布局或者是响应式布局中,经常将Margin和Padding设置成百分数,那么到底这个百分数是多少,他是如何计算的呢? Margin 假设我们有这样的一段HTML

有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外边距. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

在经过周末的豆瓣主页和这周的豆瓣电影,表示网页什么的已经被我玩坏了. 老师在周末布置豆瓣主页,对于只学了四天的css和html的我,表示鸭梨山大. 最开始的两个小时只能做出一个连自己都看不下去的导航栏.最后在网上各种百度,问同学,在前辈的帮助下,勉强写出了个框架.经过熬夜到凌晨五点熟悉了写网页的基本套路后,开始觉得网页什么的太happy了. 在后来做豆瓣电影时基本排版两个小时就搞定了.开始觉得飘飘然的时候,发现网页布局细节有很多问题.如下图. 看到了这样的结果,我开始反思.开始放慢自己的脚步,花

第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div class="box"> <div class="center"></div> <div class="left"></div> <div class="right"&g

双倍margin 稍微记录一下,因为常忘 float + margin,实际边距会变成设置值的双倍. 解决办法是 将元素设为 display:inline 最好要了解 IE的 haslayout 问题 垂直方向的margin重叠 以前一直知道 相邻的两个块元素 在垂直方向margin重叠问题. 但是没有考虑过 父元素和 第一个子元素的重叠情况 代码如下: <div class="wrap"> <div class="one">margin 2

一.需求 典型的注册页面设计一般是一个三列多行的表格,左列为表单项label,中列为文本框,右列为填写说明和验证提示.如下图 因为整个表单的视觉重心在左中两列,所以在考虑表单整体相对页面水平居中和注册提交按钮的位置设计时,应当忽略掉右列. 由此来说,右列显示的填写说明和验证提示应当以一个不影响前整体表格宽度的绝对定位来显示,并且需要显示在文本框的右侧垂直居中位置. 二.html+css实现 absolute定位的提示div放在定位relative的td里面,left设为中列的宽度,top设为50

BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 简单来讲,我们可以把它理解为,我们在进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,该元素成为一个隔离了的独立容器,元素内部元素会垂直的沿着其父元素的边框排列,和外部元素互不影响 .比如浮动元素会触发BFC,浮动元素内部的子元素主要受到该浮动元素的影响,而两个浮动元素之间是互不影响的. 在

深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况 第一部分:margin--基础知识 要介绍margin的基础知识,我们不可回

在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&q

<div style="margin:0 auto;text-align:center;" >//可以用GridView剧中 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" onpageindexchanging="GridView1_PageIndexChanging" onrowcancel

js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"> .<title>Insert title here</title> .<script type="text/javascript"> . window.onload=function(){ . document.getElementById(&q

/**顶部部分*/ .con-tl{ background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0); padding-left: 26px;/*padding-left的值为左边的圆角图片的宽度,必须指定**/ } .con-tr{ background:url(../images/right.png) no-repeat right 0 rgba(0, 0, 0, 0); padding-right: 26px;/*padd

1.margin还可以用来做平移,作用类似translate哈哈.将元素设成absolute后就可以用margin随便平移他了,既不像relative那样要霸占空间,又不用为父元素设置relative,还可以和top,left,right,bottom组合使用 2.当为div设置padding后有些元素又想占满div, 这时只要设置这个元素的margin为负padding的值就行了 <b>marign 妙用1:</b> <div class="padding20&q

首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “> <div id=”layer2″ style=”position:absolute; background-color:#ccc;”>Absolute (layer2)</div> <div id=”layer3″ style=”margin:30px auto; widt