您的位置:首页> 前端教程> CSS3教程
文章导航

CSS3 box-sizing

2018-7-21 01:28| 作者: admin| 查看: 967| 评论: 0|来自: 蚂蚁部落

从属性的名称来看它是与盒模型是相关的,事实也是如此。

一.盒模型介绍:

盒模型分为两种:

(1).符合w3c标准的盒模型。

(2).怪异模式下的盒模型。

1.w3c标准的盒模型:

此种盒模型规则:

(1).占据的实际宽度:width+padding+border+margin。

(2).占据的实际高度:height+padding+border+margin。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/31/210741wqj9w9aahamhqm33.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

从上面的图示可以看出,在标准盒模型下,width属性纯粹是用来规定内容区域的,并不包含padding和border。

2.怪异模式下的盒模型:

此种盒模型规则:

(1).占据的实际宽度:width+margin。

(2).占据的实际高度:height+margin。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/31/210746rc640a4ql7xxs1qf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是怪异模式下的盒模型,width属性所规定的尺寸包含border、padding和content。

二.box-sizing的用法:

简单的说,box-sizing属性用来规定使用哪种盒模型。

语法结构:

[CSS] 纯文本查看 复制代码
box-sizing :content-box || border-box || inherit

(1).如果属性值是content-box,那么将采用标准盒模型。

(2).如果属性值是border-box,那么将采用怪异模式盒模型。

(3).如果属性值是inherit,那么将采用继承方式。

三.代码实例:

通过一个代码实例介绍一下box-sizing属性的应用,更为灵活的应用需要自己在代码中不断积累。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box{
  width:600px;
  height:500px;
  background:black;
}
.left{
  width:100px;
  height:200px;
  background:red;
  float:left
}
.right{
  width:500px;
  height:200px;
  background:blue;
  float:left;
}
</style>
</head>
<body>
<div id="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

以上代码中,有一个box容器和两个子div,由于精确设定了左右两个子div的宽度,恰好和box容器宽度相同,且采用浮动,所以两个子div可以水平排列。但是在实际应用中可能需求发生变化,需要给子div添加border或者padding,代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box{
  width:600px;
  height:500px;
  background:black;
}
.left{
  width:100px;
  height:200px;
  background:red;
  float:left
}
.right{
  width:500px;
  height:200px;
  background:blue;
  float:left;
}
#box div{
  border:5px solid green;
}
</style>
</head>
<body>
<div id="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

在默认状态下采用的标准盒模型,所以两个子div设置边框之后,总宽度超过父元素,会导致换行;要避免这种情况,可以采用修改两个子div的width属性值的方式,不过box-sizing属性可以使我们更为便利的消除此种问题。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#box{
  width:600px;
  height:500px;
  background:black;
}
.left{
  width:100px;
  height:200px;
  background:red;
  float:left
}
.right{
  width:500px;
  height:200px;
  background:blue;
  float:left;
}
#box div{
  border:5px solid green;
  box-sizing:border-box;
}
</style>
</head>
<body>
<div id="box">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>

以上代码实现了我们的要求,只要应用box-sizing:border-box即可。

四.浏览器兼容:

IE8和IE8以上浏览器和其他标准浏览器支持此属性。

3

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

最新评论

返回顶部