快捷导航
蚂蚁部落 网站首页 前端教程 CSS3教程 查看内容

栏目导航

≡文本≡

≡颜色≡

≡渐变≡

≡边框≡

≡背景≡

≡transform变换≡

≡transition过渡≡

≡animation动画≡

≡column多列布局≡

≡flex弹性布局≡

≡其他≡

CSS3 box-sizing

2017-6-22 23:56| 发布者: admin| 查看: 633| 评论: 2|来自: 蚂蚁部落

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

一.盒模型介绍:

css盒模型分为两种,一种是符合w3c标准的盒模型,另一种是怪异模式下的盒模型。

(1).w3c标准的盒模型:

在此种盒模型下:

占据的实际宽度:width+padding+border+margin。

占据的实际高度:height+padding+border+margin。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/04/235652scbhpcc2p5piptrz.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

占据的实际宽度:width+margin。

占据的实际高度:height+margin。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/04/235718mesq79f3ed7sesrq.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以上浏览器和其他标准浏览器支持此属性。

1

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

上一篇:@font-face的用法下一篇:CSS3 RGBA
发表评论

最新评论

引用 君羊611428142 2017-6-25 19:26
2017最新web前端课程视频资料一套,加QQ:22852864,备注:领取资料
引用 丢丢 2017-6-22 08:41
非常好的文章

查看全部评论(2)

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-9-26 18:50 , Processed in 0.062077 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部