Chrome 中 div 设置 height: 100px 再设置大的 padding 高度为什么变大了?

Advertisement

另外我也设置了 box-sizing: border-box, 在 Chrome 里调试的,
关于 <div> 的代码大概是:

div{
   height: 100px;
   padding: 200px 0px;
}

我想的是设置了 height 之后高度肯定要限制的, 这要怎么做?

--cut--

Juwan在2012-10-12 10:28:08回答到:

之前表述得不清楚,修改一下答案。图来源于网上。
盒子模型有两种,分别是标准盒子模型和IE盒子模型。
当我们在网页顶部加上doctype声明的时候,浏览器会使用标准盒子模型去解释网页。
如果网页没有doctype声明的时候,ie浏览器会使用IE盒子模型去解释网页,而firefox, chrome等浏览器则仍然使用标准盒子模型区解释网页,这就出现了不兼容问题。

所以一般我们采用的是标准盒子模型。

另外width和height是可以被撑大的。

iMarlboro在2012-10-13 21:34:33回答到:

洗漱完毕,突然想起,这问题我貌似看错重点了,回来一看果然是。很不好意思。

变大是肯定的。我们看看w3c文档
http://www.w3.org/TR/2012/WD-css3-ui-...

border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

content的高宽的是用定义的width和height减去border和padding。但是content的width和height不能为负,最小差为0。如不满足条件会增大 “border box” 让差值最小0。

以上足够解释你的标题中的疑虑,至于你文中问的要怎么做。从你提供的例子看就是矛盾的问题。最好的方法就是遵循规范,避开问题。

以下是一开始的回复,我也就不删了。
----------------------------------------------------------------------------------------------------------------------------------
其实这个问题搜搜就有了。这要看你的chrome版本。比如我们看w3cschools给的 CSS3 Browser Support Reference
http://www.w3schools.com/cssref/css3_...

从chrome9开始支持 box-sizing 标准,而不需要 -webkit-box-sizing

所以你看看chrome版本,如果<9 就需要 -webkit-box-sizing:border-box;

如果版本>=9,那就要考虑是不是写错了。

我也给个例子

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type = "text/css">
        *{
            margin:0px;
            padding:0px;
        }
        #_border_box{
            width:200px;
            height:200px;
            line-height:20px;
            border:10px ridge #f60;
            padding:100px;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            box-sizing:border-box
        }
    </style>
</head>
<body>
       <div id="_border_box">200px</div>
</body>
</html>

Hyper_Bug在2012-10-13 03:53:33回答到:

我想楼主的意思是不要让padding把box撑大吧,你可能以为height就限制了高度,但是是在盒装模型里溢出的部分会自动撑出,因为你使用的是border-box的盒装模型,height的高度就把padding包括在里面了,当padding的高度超过了height本身就会溢出而撑开,在你的例子中,最终盒装模型如下

可以看出来,本身内部的height已经到0了,但是padding还是超过了所有的height,因此整个元素就被撑大了。

我不知道你要实现什么东西,因为从你的css里来看,你要实现的效果非常矛盾。你既要padding在200px,又要高度不大于100px,那多出这么多高度干嘛呢?你干脆把你要实现什么效果的示意图画出来吧。

Similar Posts:

  • [转]table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢?解决height:100%无效,table和div的解决方法并不相同. 首先说一下table,他比较容易解决,当我们使用Dreamweaver来制作网页,新建一张网页,通常在代码头部会有类似以下的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

  • DIV CSS在不同IE版本和FF以及Chrome中的兼容性差异解决方法(推荐)

    一些内容比之前 为了方便自己查询,省得每次遇到问题都要满世界搜,转篇实用的:DIV+CSS 与不同 IE 版本等的兼容性. 一.!important (功能有限) 随着 IE7 对 !important 的支持, !important 方法现在只针对 IE6 的兼容.(注意写法,记得该声明位置需要提前.)例如: #example { width: 100px !important; /* IE7+FF */ width: 200px; /* IE6 */ } 二.CSS HACK 的方法(新手可

  • DIV里Table的宽度设置为100%后页面出现滚动条的解决办法;DIV下移的解决办法 IE 和 FireFox 都通过

    (1)DIV里的table百分比宽度问题: 一行两个DIV . 左边DIV宽度固定 右边的自适应 右边DIV里放置table 其 width= "100%" 此时表格会把屏幕撑宽了出现左右滚动条.这个滚动条是不该出现的!!! table{padding:10px;width:100%;position:relative;} 一定要设置相对定位 .MainRightChild{width:100%;} (2) 一行两个DIV . 左边DIV宽度固定 右边的自适应 右边DIV里放置tabl

  • 关于HTML5中Canvas的宽、高设置有关问题

    关于HTML5中Canvas的宽.高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法: 方法一: 1 <canvas width="500" height="500"></canvas> 方法二:使用HTML5 Canvas API操作 OK 1 var canvas = document.getElementById('欲操作canvas的id'); 2 canvas.width = 500; 3

  • div居中对齐的样式设置方法

    div居中对齐的样式设置方法: 1.text-align: center div内的元素在div中居中对齐. 2.margin: 0 auto div在其所在的容器中居中对齐.

  • VS2008中查看.NET源码的设置方法

    VS2008中查看.NET源码的设置方法 在Visual Studio 2008中可以通过调试进入.NET Framework的源代码,从这个意义上说,.NET Framework是开放部分源代码了 在Visual Studio 2008中可以通过调试进入.NET Framework的源代码,从这个意义上说,.NET Framework是开放部分源代码了,但现在只支持调试模式下进入源代码.而其,这个功能在Visual Studio 2008 Express版本中不能支持.注意,所有的源代码都是从

  • 设置路径JAVA坏境变量中的JAVA_HOME path classpath 的设置

    改章节是一篇关于设置路径的帖子 在把jdk安装到计算机中以后,我们来停止设置使java环境能够应用. 首先右键点我的电脑.打开属性.然后选择"高等"里头的"环境变量",在新的打开界面中的系统变量需要设置三个属性"JAVA_HOME"."path"."classpath",其中在没安装过jdk的环境下.path属性是本来存在的.而JAVA_HOME和classpath是不存在的. 一:点"新建&qu

  • Android中Paint字体属性的一些设置

    在Android SDK中使用Typeface类来定义字体,可以通过常用字体类型名称进行设置,如设置默认黑体: Paint mp = new paint(); mp.setTypeface(Typeface.DEFAULT_BOLD) 常用的字体类型名称还有: * Typeface.DEFAULT //常规字体类型 * Typeface.DEFAULT_BOLD //黑体字体类型 * Typeface.MONOSPACE //等宽字体类型 * Typeface.SANS_SERIF //sans

  • Photoshop中各种参数的含义及设置技巧(适合Web页面)

    PNG8的参数设置 减低颜色深度算法与颜色 指定用于生成颜色查找表的方法,以及想要在颜色查找表中使用的颜色数量.可以选择以下减低颜色深度算法之一: 1.可感知:通过为人眼比较灵敏的颜色赋以优先权来创建自定颜色表. 2.可选择:创建一个颜色表,此表与"可感知"颜色表类似,但对大范围的颜色区域和保留Web 颜色有利.此颜色表通常会生成具有最大颜色完整性的图像."可选择"是默认选项. 3.随样性:通过从图像的主要色谱中提取色样来创建自定颜色表.例如,只包含绿色和蓝色的图像

  • HTML中文本框和按钮如何设置大小

    html中文版框和按钮如果直接用 width="100" height="100"来设置大小,是不能实现效果的,必须使用style="width:100px;height:100px". 例子如下: 文本框: <input type="text" style="width:420px;height:30px"> 按钮: <input type="button" styl

Tags: