盒模型的问题_html/css_WEB-ITnose
还有我想问为什么CSS默认外边距,内边距和框的值要独立出来,不算在盒的高度和宽度里面?这样有什么好处吗?
回复讨论(解决方案)
box-sizing 设为 content-box 时, height 和 width 只包含内容, 不含 padding 和 border
设为 border-box 时, height 和 width 包含 padding 和 border
你看看 W3C 官方的文档:
http://www.w3.org/TR/css3-ui/#box-sizing
content-box
This is the behavior of width and height as specified by CSS2.1. The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.
border-box
Length and percentages values for 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. Used values, as exposed for instance through getComputedStyle(), also refer to the border box.
还有我想问为什么CSS默认外边距,内边距和框的值要独立出来,不算在盒的高度和宽度里面?这样有什么好处吗?
如果我想要明确的设置内容的 height 和 width, 但 css 的 height 和 width 这两个属性却始终把 padding 和 border 的尺寸都包含在其中, 那我设置时不就是得先计算才能设置好吗
比如
$(element).css('width', 内容期望的宽度 + padding-left + padding-right + border-left + border-right);
这样岂不是相当麻烦吗, 而且如果 padding-left , padding-right , border-left, border-right 之中的任意一个发生改变时, 都将影响到 内容的宽度
还有我想问为什么CSS默认外边距,内边距和框的值要独立出来,不算在盒的高度和宽度里面?这样有什么好处吗?
如果我想要明确的设置内容的 height 和 width, 但 css 的 height 和 width 这两个属性却始终把 padding 和 border 的尺寸都包含在其中, 那我设置时不就是得先计算才能设置好吗
比如
$(element).css('width', 内容期望的宽度 + padding-left + padding-right + border-left + border-right);
这样岂不是相当麻烦吗, 而且如果 padding-left , padding-right , border-left, border-right 之中的任意一个发生改变时, 都将影响到 内容的宽度
非常感谢。
上一篇: HTML(5) 代码规范
下一篇: 用PHP添加购物商品,PHP添加购物商品
推荐阅读
-
如何用CSS控制字的间距_html/css_WEB-ITnose
-
问一个很简单的关于html代码的问题.标题要长!!!!!!!!_html/css_WEB-ITnose
-
使用了min-height后出现了问题_html/css_WEB-ITnose
-
HTML5之外的语义标准(待完成)_html/css_WEB-ITnose
-
免费下载:简单、优雅的现代风格界面工具包_html/css_WEB-ITnose
-
div 位置的奇怪问题_html/css_WEB-ITnose
-
JS获取对象的某个CSS属性值的问题_html/css_WEB-ITnose
-
当把宽度设为25%时,其他浏览器正常,IE7图片会掉下来,有没有好的解决方法_html/css_WEB-ITnose
-
DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose
-
2-6 复杂的背景图案_html/css_WEB-ITnose