box-sizing属性是什么

红太狼 2021-02-01 15:59 557阅读 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 条评论，557人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 name属性的作用是什么

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

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

相关 css3是什么 ptml_CSS3 transform 属性

div \{ transform:rotate(7deg); \-ms-transform:rotate(7deg); /\ IE 9 \/ \-moz-transfo

浅浅的花香味﹌/ 2022年10月26日 14:26/ 0 赞/ 183 阅读

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

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

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

相关 box-sizing属性是什么

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

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

相关 input标签是什么？input标签属性有哪些

input标签属于什么标签？input标签属性有哪些？相信刚接触的表单的小白应该很陌生，那么接下来我们就来讲一下input标签属性有哪些？

红太狼/ 2021年01月28日 16:36/ 0 赞/ 1024 阅读

相关 img标签中alt属性的作用是什么

标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

小灰灰/ 2020年05月14日 09:49/ 0 赞/ 963 阅读