box-sizing属性是什么

红太狼 2021-02-01 15:59 581阅读 0赞

**box-sizing属性定义及用法**

box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域（假如您需要并排放置两个带边框的框，可通过将 box-sizing属性设置为”border-box”，这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中）；

Internet Explorer、Opera和Chrome浏览器支持box-sizing属性，Firefox还不支持该属性，但支持-moz-box-sizing属性替代box-sizing属性；

## box-sizing属性语法格式
````
box-sizing: content-box/border-box/inherit;
````
## 参数说明

content-box：这是由CSS2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；

border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;

inherit：规定应从父元素继承box-sizing属性的值;

## 实例：
````
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-sizing属性笔记</title>
<style type="text/css">
body{
	background-color: #aaa;
}
div.container{
	width:30em;border:1em olid;
}

.box{
	box-sizing:border-box;
	-moz-box-sizing:border-box; 
	/* Firefox */

-webkit-box-sizing:border-box; 
	/* Safari */

width:50%;
	border:1em solid red;
	float:left;
}

</style>
</head>
<body>
<div class="container">

<div class="box">这个 div占据左半部分。</div>
	<div class="box">这个 div占据右半部分。</div>

</div>
</body>
</html>
`````

运行结果：

![format_png](/images/1612195939021.jpg)

发表评论取消回复

表情：

评论列表（有 0 条评论，581人围观）

还没有评论，来说两句吧...

相关阅读

相关 css中align-self属性是什么

css中align-self属性是什么 ![6589802612da9a1bfbd95bb98f3f5166.jpeg][] 1、align-self属性定义flex子

亦凉/ 2024年03月30日 17:50/ 0 赞/ 47 阅读

相关什么是事务？什么是ACID属性？

什么是事务？什么是ACID属性？事务（Transaction）是数据库管理系统（DBMS）中的一个操作单位，通常由一系列对数据库的读取、写入和修改操作组成。事务被视为一

深碍√TFBOYSˉ_/ 2024年03月17日 14:05/ 0 赞/ 61 阅读

相关 float 属性的作用是什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ float 是什么？ ⭐ float 属性值 ⭐ 使用 float 的注意事项： ⭐ 写在最后

傷城~/ 2023年10月14日 17:06/ 0 赞/ 47 阅读

相关 iframe 标签的作用是什么？用法是什么？属性有什么？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ iframe 标签是什么？ ⭐ iframe 标签的作用什么？ ⭐ iframe 标签的用法 ⭐

拼搏现实的明天。/ 2023年10月14日 15:44/ 0 赞/ 66 阅读

相关 meta标签是什么？它的作用是什么？常见的 meta 属性有哪些？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ meta标签是什么？ ⭐ meta标签的作用是什么？ ⭐ 写在最后 ----------------

落日映苍穹つ/ 2023年10月14日 12:57/ 0 赞/ 24 阅读

相关什么是Java静态属性？有什么作用？

如果在Java程序中使用static修饰属性，则该属性称为静态属性(也称全局属性)，静态属性可以使用类名直接访问，访问格式如下：类名·属性名在学习静态属性之前，

末蓝、/ 2023年10月08日 19:44/ 0 赞/ 86 阅读

相关 Vuex的5个核心属性是什么?

Vuex的5个核心属性分别是 State、 Getter、Mutation 、Action、Module。 1)state state 为单一状态树，在 state 中需要

男娘i/ 2023年10月07日 19:22/ 0 赞/ 16 阅读

相关 name属性的作用是什么

在Python中，一个模块被另一个程序第一次引入时，其主程序将全部运行。如果想在模块引入的时候，模块中的某一程序块不执行，那么此时可以用`__name__`属性来使该程序块仅仅

- 日理万妓/ 2022年11月26日 11:59/ 0 赞/ 215 阅读

相关债券属性「久期」的本质是什么？

https://www.zhihu.com/question/21860362 https://www.zhihu.com/question/21860362/answer

谁践踏了优雅/ 2021年06月10日 20:40/ 0 赞/ 527 阅读

相关 box-sizing属性是什么

box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域（假如您需要并排放置两个带边框的框，可通过将 box-sizing属性设置为"...

红太狼/ 2021年02月01日 15:59/ 0 赞/ 582 阅读