css 盒子模型 以及 box-sizing属性
在标准的盒子模型下,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属性的更多相关文章
- CSS 盒子模型(Box model)中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- CSS盒子模型(Box Model)
一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
- CSS盒子模型中的Padding属性
CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...
- css盒子模型中的border属性
认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...
- 前端 CSS 盒子模型 padding 内边距 属性
padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- (5)css盒子模型(基础上)
CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- 前端 CSS 盒子模型 目录
CSS盒子模型介绍 padding border属性
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
随机推荐
- CAP原则 和BASE
CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者不可得兼 [1] ...
- git 撤销已经push到远端的代码
其实是没有直接让远端代码回复到某次的指令,实现撤销push的思路如下: 1.先让代码恢复到想要恢复的前一次提交记录 2.重新提交代码,覆盖端上的代码,就相当于撤销了push 的提交 实现方式如下: 1 ...
- easyui首页模板
Easyui首页html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...
- ProjectManager Beta 7 项目管理器发布
上次在Alpha阶段有一个可用版本Alpha 8也在这个博客发布了,传送:http://www.cnblogs.com/deali/p/ProjectManager.html ProjectManag ...
- ASIHTTPRequest数据压缩
本文转载至 http://blog.csdn.net/zhuoyuetec/article/details/18216439 IOSASIHttprequestsetShouldCompressRe ...
- 软件测试人员需要精通的开发语言(3)--- Linux
Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.不得不说下,中国产的红旗系统,牛的一逼,造价很贵,但具体何用处估 ...
- 爬虫入门【7】Python-文件的读写和JSON
文本文档的读写 最重要的open()方法将返回一个file对象,经常使用的两个参数为open(filename,mode) 其中,filename为file保存的地址,可以是本地地址,相对地址或者绝对 ...
- [原创]将本地代码共享到github的操作步骤
将本地代码共享到github的操作步骤 本地代码目录执行如下命令,初始化为git仓库. git init 到github上新建一个仓库,假设为https://github.com/sky0014/sk ...
- Android笔记之自定义的RadioGroup、RadioButton,以及View实例状态的保存与恢复
效果图 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- Netbeans8.0设置Consola字体并解决中文乱码问题
在Netbeans8.0上开发php,设置字体为Consola后.发现中文显示是乱码的.经过改动jre的配置文件成功攻克了这个问题. 1. 进入jdk安装文件夹下/jre/lib文件夹,找到fontc ...