CSS3中盒子的box-sizing属性
box-sizing
属性
box-sizing 属性用来改变默认的 CSS盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。
box-sizing:content-box(default) | border-box ;
content-box
默认值,标准盒模型。 width与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。
注意: 内边距, 边框 & 外边距 都在这个盒子的外部。
比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。
border-box
width 与 height 包括内边距(padding)与边框(border),不包括外边距(margin)。
这是IE 怪异模式(Quirks mode)使用的 盒模型 。注意:这个时候内边距和边框将会包括在盒子中。
比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px
.
如果计算后的最内部的内容宽度为负值,都会被计算成0,内容还在,所以不可能通过 border-box来隐藏元素。
尺寸计算公式:width = border + padding + 内容的宽度,height = border + padding + 内容的高度。
Demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
/*计算height,width时包含了padding border的值*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; /*计算height,width时没有包含padding border*/
/*-webkit-box-sizing: content-box;*/
/*-moz-box-sizing: content-box;*/
/*box-sizing: content-box;*/ /*计算height,width时包含了padding 的值*!/*/
/*-webkit-box-sizing: padding-box;*/
/*-moz-box-sizing: padding-box;*/
/*box-sizing: padding-box;*/ background-color: gray;
border: 10px orange solid;
width: 500px;
height: 300px;
}
</style>
</head>
<script> </script>
<body>
<div>Demo</div>
</body>
</html>
Link...
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing
CSS3中盒子的box-sizing属性的更多相关文章
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
- css3中强大的filter(滤镜)属性
CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...
- CSS3中的变形处理(transform)属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...
- CSS3中的skew()属性
刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...
- 总结·CSS3中定位模型之position属性的使用方法
一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...
- css3中display和box小结
display:table用处: 1.创建登高列 2.实现大小不确定元素的垂直居中 3.容器内子项目数目未知,子项目平均分配容器的水平空间 float必须指定其宽度才行,不确定的话就用display: ...
- js中盒子模型常用的属性你还记得几个?
//clientWidth;//内容宽度Width+左右填充padding//clientHeight;//内容高度height+上下填充padding//clientLeft;//左边框的宽度相当于 ...
- css3中的box-sizing常用的属性有哪些?分别有什么作用?
content-box:默认标准盒模型,总宽=width+padding+border+margin border-box:IE标准,怪异盒模型,总宽=width+margin inherit:从父元 ...
随机推荐
- ASP.NET MVC扩展点
16个ASP.NET MVC扩展点[附源码] 1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中!即:创建一个实现了IHttpmodule接口的类,并将 ...
- [置顶] 如何使用c3p0+spring连接oracle数据库
1. 首先是jdbc.properties属性文件的编写,便于数据库移植: datasource.driverClassName=oracle.jdbc.driver.OracleDriver dat ...
- 表达式树解析"框架"
干货!表达式树解析"框架"(2) 为了过个好年,我还是赶快把这篇完成了吧 声明 本文内容需要有一定基础的开发人员才可轻松阅读,如果有难以理解的地方可以跟帖询问,但我也不一定能回 ...
- c#中的对象
字段,属性,方法 对象初始化过程 如果没有继承,顺序如下: 静态变量 静态构造函数 非静态变量 非静态构造函数 如果类有基类,那么基类和子类的初始化顺序如下: 继承类静态成员变量初始化 ...
- 设计模式18---设计模式之策略模式(Strategy)(行为型)
1.场景模拟 简单的报价管理系统: 对于普通用户和新用户报全价 对于老客户统一折扣5% 对于大客户统一折扣10% 2.不用模式的解决方案 package demo16.strategy.example ...
- 企业架构与建模之ArchiMate的由来和详述(上)
终于完成了关于企业架构框架理论的总结,谢谢各位看官的支持,能挺过之前过于理论化的叙述而坚持到现在着实不易,笔者也自愧没有实践经验可以分享,希望日后有兴趣的看官能够不吝赐教.在本系列后面的也是最后一个大 ...
- Linux环境进程间通信(二):信号(下)
linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...
- c语言,递归翻转一个单链表,c实现单链表
目的:主要是练习c里面单链表的实现,递归思想复习; #include <stdlib.h> #include <stdio.h> typedef struct _Node{// ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- 史上最全条件编译解析 #ifdef #ifndef #undef #else #endif
C语言和C++语言程序中广泛存在着#ifdef或#ifndef等条件编译语句,本篇就系统介绍下他们的用法. 这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分 ...