CSS3 box-sizing属性的应用
在一个文档中,每个元素都被表示为一个矩形的盒子。盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']。
我们要设置某个元素的大小定位,肯定会和这四个元素打交道。只是元素的宽高计算有些默认值。
box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
目前支持box-sizing的浏览器:
就目前来看,大部分人是建议在初始化样式的时候,就设置为border-box
,这样更方便设置元素的宽高
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
语法
box-sizing: content-box | border-box | inherit;
值
content-box
默认值,标准盒模型。width
和 height
只包括内容(content
)的宽和高。在宽度和高度之外绘制元素的内边距和边框。
尺寸计算公式:
width = 内容的宽度。
height = 内容的高度。
border-box
IE的怪异模型 width
和height
属性包括内容(content
)、内边距(padding
)、边框(border
),但是不包括外边距(margin
)。在宽度和高度之内绘制元素的内容、内边距和边框。
尺寸计算公式:
width = 内容的宽度 + 内边距的宽度 + 边框的宽度。
height = 内容的高度 + 内边距的高度 + 边框的高度。
inherit
规定应该从父元素继承 box-sizing
属性的值
例子
See the Pen box-sizing的使用 by LiuwqGit (@weiqinl) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing的使用</title>
<style type="text/css">
.box {
width: 460px;
height: 400px;
border: 1px solid red;
margin: 10px;
background-color: gray;
}
.content {
box-sizing: content-box;
border: 10px solid blue;
width: 300px;
padding: 20px;
margin: 30px;
background-color: green;
}
.border {
box-sizing: border-box;
border: 10px solid blue;
width: 300px;
padding: 20px;
margin: 30px;
background-color: yellow;
}
.inherit {
box-sizing: inherit;
border: 10px solid red;
width: 300px;
padding: 20px;
margin: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
我是content-box值(默认)
<br/>box-sizing: content-box;
<br/>border: 10px solid blue;
<br/>width: 300px;
<br/>padding: 20px;
<br/> margin: 30px;
<div class="inherit">我是inherit值</div>
</div>
</div>
<div class="box">
<div class="border">
我是border-box值
<br/>box-sizing: border-box;
<br/>border: 10px solid blue;
<br/>width: 300px;
<br/>padding: 20px;
<br/>margin: 30px;
<div class="inherit">我是inherit值</div>
</div>
</div>
</body>
</html>
chrome截图:
CSS3 box-sizing属性的应用的更多相关文章
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...
- 学习笔记:CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
随机推荐
- mint-ui —— navbar和tab-container的区别
navbar的具体实现 <template> <div class="page-navbar"> <div class="page-titl ...
- collection 模块
关于一些 特殊数据类型的模块 namedtuple顾名思义,一个带有名字的元祖,他也是跟对象有关的一个 from collections import namedtuple phone = named ...
- spring框架整合hibernate框架简单操作数据库
1.配置文件: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http:/ ...
- JS小福利 —— 实时更新的页面小时钟
今天小女刚学会了一个好玩的小玩意儿~~特来跟大家分享一下~~~ 这是一个有趣的时钟显示程序,可以进行实时的年月日.星期.时分秒更新,有了这组小代码,以后可以作为日期插件应用在大型的JS代码中哦~~ 积 ...
- Java基础---IO(二)--File类、Properties类、打印流、序列流(合并流)
第一讲 File类 一.概述 1.File类:文件和目录路径名的抽象表现形式 2.特点: 1)用来将文件或文件夹封装成对象 2)方便于对文件与文件夹的属性信息进行操作 3)File类的实例是不 ...
- 关于idea的使用心得
开发java多年,所在的项目组一直都在使用的eclipse或者myeclipse,今天偶然的机会接触到了idea,感觉优化的确实不错,下面是我的一些使用心得:
- kettle表输入条件参数设置
@ 获取系统信息:设置命令参数 @ 表输入:
- DB Error || Warning
数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...
- oracle 索引失效的情况分析
见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp54 1) 没有查询条件,或者查询条件没有建立索引 2) 在查询条件上 ...
- if判断与比较操作符gt、lt、eq等的使用
在整数中比较使用如下 //-eq 等于(equal) if [ "$a" -eq "$b" ] //-ne不等于(no equal) if [ "$ ...