css3 Box model 与 Box-sizing
1、Box Model(盒模型)
CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型。它们的相同之处是对元素的width、height、padding、border、margin以及元素实际尺寸的计算关系,而它们的不同之处则是两者的计算方法不一致。
1)、W3C的标准Box Model:
/*外盒尺寸计算(元素空间尺寸)*/
Element空间高度 = content height + padding + border + margin
Element空间宽度 = content weight + padding + border + margin
/*内盒尺寸计算(元素大小)*/
Element Height = content height + padding + border
Element Weight = content weight + padding + border
2)、IE传统下的Box Model(IE6以下,不含IE6版本)
/*外盒尺寸计算(元素空间尺寸)*/
Element空间高度 = Content Height + margin(Height包含了元素内容高度、边框高度、内边距高度)
Element空间宽度 = Content Weight + margin(Height包含了元素内容宽度、边框宽度、内边距宽度)
/*内盒尺寸计算(元素大小)*/
Element Height = content Height(Height包含了元素内容高度、边框高度、内边框高度)
Element Weight = content Weight(Weight包含了元素内容宽度、边框宽度、内边框宽度)
目前浏览器大部分元素都是基于W3C标准的Box Model,但对于form中的部分元素还是基于传统的Box Model上,比如:input中的submit、reset、button和select等元素,这样,如果我们给其设置border和padding,它也只会向内延伸。
2、Box-sizing : content-box | border-box | inherit
1)、content-box:此值为其默认值,其让元素维持W3C标准的Box Model展示,也就是说元素的宽度(weight)和高度(height)等于元素边框(border)加上 元素的内边距(padding) 加上 元素内容的宽度(content width)或高度(content height)
2)、border-box:此值让元素维持IE传统的Box Model(IE6以下版本)展示,也就是说元素的宽度(weight)和高度(height)等于元素内容的宽度(content weight)和高度(content height)。这里的content width和content height包含了元素的border、padding、content width和content height
box-sizing现在的浏览器都支持,但IE家庭里只有IE8以上版本才支持,虽然现代的浏览器都支持,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上 -moz-,Webkit内核需要加上-webkit-,Presto内核需要加上-0-,IE8需要加上-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀。
/*Content box*/
Element {
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
-o-box-sizing:content-box;
-ms-box-sizing:content-box;
box-sizing:content-box;
}
/*Border box*/
Element {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
css3 Box model 与 Box-sizing的更多相关文章
- CSS Box Model All In One
CSS Box Model All In One CSS 盒子模型 All In One CSS Box Model CSS Box Model Module Level 3 W3C Working ...
- HTML和CSS的盒子模型(Box model)
本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset
目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...
- Box Model,边距折叠,内联和块标签,CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...
- 重新认识Box Model、IFC、BFC和Collapsing margins
尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...
- 盒子模型(Box Model)
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...
随机推荐
- Maven 项目中的 pom.xml 文件内容说明
下面是一个比较全面的 POM 文件的结构,当然常用的并不需要这么多配置,视自己的项目需求而定. <project xmlns="http://maven.apache.org/POM/ ...
- react小知识
概述 有句话说得很好,代码是写给人看的,顺便让机器执行而已.所以我总结了一些写react不太注意的地方,供以后开发时参考,相信对其他人也有用. 组件封装 由于组件其实就是React.createEle ...
- PHP利用Session实现上传进度
实现文件上传进度条基本是依靠JS插件或HTML5的File API来完成,其实PHP配合ajax也能实现此功能. PHP手册对于session上传进度是这么介绍的: 当 session.upload_ ...
- CentOS7 linux 中提示 bash: ls: 未找到命令...
记录一次CentOS7里执行ls命令失败的问题 执行ls命令时报找不到命令,原因是环境变量PATH被修改, 解决办法: 执行 export PATH=/bin:/usr/bin:$PATH 然后 ...
- Redis主从和集群
主从概念 一个master可以拥有多个slave,一个slave又可以拥有多个slave.如此下去,形成了强大的多级服务器集群架构. master用写数据,经统计:网站的读写比率是10:1 通过主从分 ...
- 浏览器上安装vue devtools
安装前要检查一下node版本的(node -v),必须将版本提高到>4.4.7.低版本的node在安装devtools时执行npm install 时报错.如何升级node版本,若在window ...
- 关于jQuery的一些东西
1.jQuery的选择器学习 基本选择器 id选择器 $("#id名") 返回的是存储了指定的HTML元素对象的数组 标签 ...
- .NET内存管理、垃圾回收
1. Stack和Heap 每个线程对应一个stack,线程创建的时候CLR为其创建这个stack,stack主要作用是记录函数的执行情况.值类型变量(函数的参数.局部变量 等非成员变量)都分配 ...
- maven多环境参数配置
maven中properties加载顺序 <build><filters></filters></build>中的配置 pom.xml中的<pro ...
- 三、TortoiseGit之配置密钥
TortoiseGit使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥. 也就是说使用 ssh-keygen -t rsa -C "username@email.co ...