在标准的盒子模型下,css中 width,padding以及border的关系

关于css中的width和padding以及border的关系。

在css中,width和height指的是内容区域的宽度和高度,增加padding,border,和margin不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

例如:  这样设置div:width=300px; padding=10px;得到的图如下

在这个图中,width的值是多少?

有人可能以为是:width=300+10+10=320,这是错误的,实际width的值还是300。

不会形成总宽度为:300-10-10=280的效果,最终的宽度还是300px不变,总宽度会变成300+10+10=320px;

css3中的box-sizing 改变盒子模型的组成方式

语法:

box-sizing : content-box | border-box | inherit

相关属性 : 无

取值:

content-box:

此值维持css2.1盒模型的组成模式,border|padding|content {element width=border+padding+content}

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型。

示例:

  • content-box:

    .test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

border-box:

此值改变css2.1盒模型组成模式,content|border|padding {element width=content}

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )此属性表现为怪异模式下的盒模型。

border-box:

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

示例代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css3 box-sizing使用指南</title>
<style>
.box_sizing {
width: 180px;
padding: 40px 20px;
background: #a0b3d6;
overflow: hidden;
}
.box_sizing .in {
width: 100%;
border: 12px double #34538b;
padding: 5px;
background: white;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
} </style>
</head>
<body>
<div class="box_sizing">
<div class="in">此处12像素的border和5像素的padding值算在宽度里面了~~!</div>
</div> </body>
</html>

选中最外层div的时候,css的截图如下:

可以看到设置了width=180,实际的内容依然是180,只不过总宽度到了220px

当选中里面的div时,css图如下:

由于设置了box-sizing:border-box,此时12px的border和5px的padding算在了宽度中,此时实际的内容区域为146px

当我们把box-sizing:border-box属性去掉的时候,截图如下:

此时内容区域的宽度还是为180px,但是最外层的div的总宽度为: 180+20+20=220px;

而里面的div的总宽度为: 180+12+12+5+5+20=234px,所以溢出了。最后面的20为最外层div的padding-left;

所以设置了 box-sizing:boder-box ,会把boeder和padding的值也算在内容的宽度中,总宽度不变。

css 盒子模型 以及 box-sizing属性的更多相关文章

  1. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  2. CSS盒子模型(Box Model)

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

  3. CSS盒子模型中的Padding属性

    CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...

  4. css盒子模型中的border属性

        认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...

  5. 前端 CSS 盒子模型 padding 内边距 属性

    padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...

  6. 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  7. (5)css盒子模型(基础上)

    CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...

  8. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  9. 前端 CSS 盒子模型 目录

    CSS盒子模型介绍 padding border属性

  10. CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

    CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

随机推荐

  1. CAP原则 和BASE

    CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者不可得兼 [1]  ...

  2. git 撤销已经push到远端的代码

    其实是没有直接让远端代码回复到某次的指令,实现撤销push的思路如下: 1.先让代码恢复到想要恢复的前一次提交记录 2.重新提交代码,覆盖端上的代码,就相当于撤销了push 的提交 实现方式如下: 1 ...

  3. easyui首页模板

    Easyui首页html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  4. ProjectManager Beta 7 项目管理器发布

    上次在Alpha阶段有一个可用版本Alpha 8也在这个博客发布了,传送:http://www.cnblogs.com/deali/p/ProjectManager.html ProjectManag ...

  5. ASIHTTPRequest数据压缩

    本文转载至  http://blog.csdn.net/zhuoyuetec/article/details/18216439 IOSASIHttprequestsetShouldCompressRe ...

  6. 软件测试人员需要精通的开发语言(3)--- Linux

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.不得不说下,中国产的红旗系统,牛的一逼,造价很贵,但具体何用处估 ...

  7. 爬虫入门【7】Python-文件的读写和JSON

    文本文档的读写 最重要的open()方法将返回一个file对象,经常使用的两个参数为open(filename,mode) 其中,filename为file保存的地址,可以是本地地址,相对地址或者绝对 ...

  8. [原创]将本地代码共享到github的操作步骤

    将本地代码共享到github的操作步骤 本地代码目录执行如下命令,初始化为git仓库. git init 到github上新建一个仓库,假设为https://github.com/sky0014/sk ...

  9. Android笔记之自定义的RadioGroup、RadioButton,以及View实例状态的保存与恢复

    效果图 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...

  10. Netbeans8.0设置Consola字体并解决中文乱码问题

    在Netbeans8.0上开发php,设置字体为Consola后.发现中文显示是乱码的.经过改动jre的配置文件成功攻克了这个问题. 1. 进入jdk安装文件夹下/jre/lib文件夹,找到fontc ...