css3之box-sizing
css盒子模型中包括几种重要的属性,包括margin、border、padding以及content。但浏览器对其盒子模型的解释则有所不痛,启用标准模式还是IE(怪)模式是与当前页面的文档声明相关的。
借用网上一幅图:
这是标准盒子模型,可以看出,其宽和高均为其中content的宽高。
对于IE来说,,其css盒子的宽高则包括了border,padding以及content。
如何判断当前的页面使用了哪种解释模型呢,这就与文档声明有关。在文档顶部增加了doctype声明则会被解释为标准模型,若不加则与具体的浏览器相关了,ie以ie盒子的方式解释,ff仍然以标准盒子方式解释。
css2.1规范即为标准模型,只是IE“自以为是”。为了解决这种“自以为是”的行为,css3规定了这个属性,box-sizing,其值为“content-box”和“border-box”。
当box-sizing为content-box时,解释方法即IE盒子模型;当为border-box时,解释方法为标准模型。
Firefox使用-moz-box-sizing,safari/webkit使用-webkit-box-sizing,而opera使用box-sizing。
但为什么IE会把盒子模型解释成border-size,而这两种模式又有什么样的用法呢?等我熟悉熟悉再说~
既然说到盒子模型,再介绍刚学到的几个新的css3属性,background-origin,background-clip.
background-origin:即用来决定图片的原始起始位置,可选值为:content-box,padding-box,border-box。默认值为padding。
目前在FF中要加-moz-,safari/chrome中要加-webkit-,值为content,padding,border。
background-clip:即用来对背景图片进行适当的裁剪,可选值同background-origin。
含义是指,背景图片无论初始值设置在哪里,但只有在background-clip设置的范围内的部分才会显示出来。
这个具体的用法需要再熟悉一下。
css3之box-sizing的更多相关文章
- CSS3 Flex Box(弹性盒子)
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- 转: css3: display:box详解
示例见: css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...
- CSS3 Flex Box 弹性盒子、弹性布局
目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...
- css3 display:box
想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...
- css3 display:box 属性
先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 一个简单的CSS3+js 实现3D BOX
<!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...
- CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset
目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...
- CSS3学习基本记录
CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...
随机推荐
- Linux&shell 之Shell命令进阶
写在前面:案例.常用.归类.解释说明.(By Jim) 监控程序a.进程查看ps -ef(-e表示系统上运行的所有进程,-f用于扩展输出一些有用的信息列.)ps -efH(-H参数可以将进程组织为分层 ...
- mysql集群安装(centos)
mysql cluster : 1. 基于NDB Cluster 的分布式数据库系统 2. mysql集群中各服务器节点不共享数据 3. 在mysql cluster中节点指的是进程,区别于其他的集群 ...
- 数学概念——I - 数论,线性方程
I - 数论,线性方程 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit ...
- Android中ListView分页加载数据
public class MainActivity extends Activity { private ListView listView=null; //listview的数据填充器 privat ...
- php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
php 获取今日.昨日.上周.本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime.下面首先还是直奔主题以示例说明如何使用 mktime 获取今日.昨日.上周.本月的起始 ...
- XDocument和XmlDocument的区别
刚开始使用Xml的时候,没有注意到XDocument和XmlDocument的区别,后来发现两者还是有一些不同的. XDocument和XmlDocument都可以用来操作XML文档,XDocumen ...
- [转]windows10 64位环境下安装mysql5.7.17
今天以zip模式在windows10 64位环境下安装mysql5.7,到最后一步提示mysql服务无法启动. 安装步骤如下: 1.配置环境变量 我的电脑->属性->高级->环境变量 ...
- js复选框全选
<input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'&g ...
- 【sql进阶】SQL Server 将某一列的值拼接成字符串
今天在统计报表的时候有这么一个需求,将一列字符串拼接成一行,然后展示到新的列中. 每一项的服务列表如下: 最终想要的结果是 sql如下: select AuxTypeName + ',' from ( ...
- MVC 无法将类型“System.Collections.Generic.List<AnonymousType#1>”隐式转换为“System.Collections.Generic.IList<Mvc3Modeltest.Models.Movie>”。存在一个显式转换(是否缺少强制转换?))
1.问题: 2.解决方案:强制指定类型. 解决之.