小白教程
所有教程
关于
Search
172.69.7.165
172.69.7.165
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr box sizing”的源代码
本页内容
上一节:
Css3_pr_appearance
下一节:
Css3_pr_icon
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:box-sizing}}[[Category:css reference|214]] = CSS3 box-sizing 属性 = 元素的总高度和宽度包含内边距和边框(padding 与 border) : <sample title="" desc="" lang="html" hererun="1"> #example1 { box-sizing: border-box; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #example1 { box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } #example2 { box-sizing: border-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } </style> </head> <body> <h1>box-sizing 属性</h1> <p>定义如何计算一个元素的总宽度和总高度,是否包含内边距和边框。</p> <h2>box-sizing: content-box (默认):</h2> <p>高度和宽度只应用于元素的内容:</p> <div id="example1">这个 div 的宽度为 300px。但完整宽度为 300px + 20px (左边框和右边框) + 60px (左边距和右边距) = 380px!</div> <h2>box-sizing: border-box:</h2> <p>高度和宽度应用于元素的所有部分: 内容、内边距和边框:</p> <div id="example2">不管如何这里的完整宽度为300px!</div> </body> </html> </run> == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | box-sizing | 10.04.0 -webkit- | 8.0 | 29.02.0 -moz- | 5.13.2 -webkit- | 9.5 |} == 属性定义及使用说明 == box-sizing 属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。 默认情况下,元素的宽度(width) 和高度(height)计算方式如下: <pre>width(宽度) + padding(内边距) + border(边框) = 元素实际宽度 height(高度) + padding(内边距) + border(边框) = 元素实际高度</pre> {| class="table table-striped table-hover" | 默认值: | content-box |- | 继承: | no |- | 版本: | CSS3 |- | JavaScript 语法: | object.style.boxSizing="border-box" |} == 语法 == box-sizing: content-box|border-box|inherit: {| class="table table-striped table-hover" ! 值 ! 说明 |- | content-box | 默认值。如果你设置一个元素的宽为 100px,那么这个元素的内容区会有 100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 |- | border-box | 告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的。也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。 '''注:'''border-box 不包含 margin。 |- | inherit | 指定 box-sizing 属性的值,应该从父元素继承 |} == 更多实例 == 设置两个边框并列排着 : <sample title="" desc="" lang="html" hererun="1"> div { box-sizing: border-box; width: 50%; border: 5px solid red; float: left; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div.container { width: 100%; border: 2px solid black; } div.box { box-sizing: border-box; width: 50%; border: 5px solid red; float: left; } </style> </head> <body> <div class="container"> <div class="box">这个 div 占据了左边部分</div> <div class="box">这个 div 占据了右边部分</div> <div style="clear:both;"></div> </div> </body> </html> </run> 设置通用的 box-sizing: <sample title="" desc="" lang="html" hererun="1"> * { box-sizing: border-box; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } #example1 { width: 300px; padding: 40px; border: 15px solid blue; } #example2 { width: 300px; padding: 10px; border: 2px solid red; } </style> </head> <body> <h1>通用的 box-sizing</h1> <p>使用 “box-sizing:border-box” 可以让前端开发人员减少很多工作。 上面 head 部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。 你设置的宽度就是实际的宽度,不需要考虑内边距和边框:</p> <div id="example1">div 的完整宽度为 300px, 不需要考虑内边距和边框。</div> <br> <div id="example2">这个 div 的完整宽度也是 300px, 也不需要考虑内边距和边框。</div> </body> </html> </run> == 相关文章 == CSS3 教程: [[css3 user interface|CSS3 用户界面]]
返回至“
Css3 pr box sizing
”。
上一节:
Css3_pr_appearance
下一节:
Css3_pr_icon