0,前言

在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型。在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不甚,有会带来混乱。css3让我们之前了解的怪异模式能够很好的在页面中使用,下面来了解下上面提到的w3c标准盒模型和怪异模式下的盒模型。

  1. div {
  2. width: 200px;
  3. height: 100px;
  4. padding: 20px;
  5. border:30px solid blue;
  6. margin: 10px;
  7. background: red;
  8. }
下面来看看,上面的代码和标准盒模型和怪异模式下的盒模型表现形式有什么不同。

1,w3c标准盒模型

在网页中,每一个元素都是一个盒模型,我们称为盒子,要想写出好的网页,就需要去了解盒子是怎么组成的,达到心中有数的境界。
一个标准的盒子是由 内容+内边距+边框+外边距,这里的内、外边距四边都是有的,看你怎么去设定了,而我们在样式中使用的width 指的盒子的内容,内边距和边框的修改都会改变整个元素的大小。background 背景是由 内容 + 内边距 构成的,下面看一个图


这是上面那张图的盒模型,加上外边距的话,整体宽度是 320,整体高度是220
这里的 200X100 是样式中声明的宽度和高,也就是我们的内容,接下来是内边距,内容盒内边距组成的部分就是红色背景的部分,接下来就是 边框 30 ,外边距10 。
width = 内容 + 内边距 + 边框
标准盒模型的缺点就是,一个元素的整体宽和高,要根据内、外边距、边框的改变去调整内容的宽高,也就是样式中我们所使用的宽、高。

2,怪异模式下盒模型

怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模
式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声
明,将使网页进入怪异模式(quirks mode)。
怪异模式IE8以下独有的。
简单的说,文档声明的正确与否决定了,浏览器解析模式,是否使用怪异模式,即错误的文档声明会进入怪异模式
那我们现在故意写错文档声明,进入怪异模式下,探个究竟:

怪异模式下:width = 内容 + 内边距(两边的) + 边框 ,高度是不可预订的(至少看起来是这样的)
有没有发现什么,怪异模式下的盒子,不必担心我们对内边距和边框的修改来改变整体元素的宽度,而导致页面混乱,但是它的缺点是只在IE8 以下,我们不可能编写页面时使用这种模式,因为我们要兼容大多数浏览器。况且它的高度还是不可预订的。
警告:了解即可,切勿使用

3,CSS3 盒模型

现在我们来认识下css3中的盒模型属性 box-sizing ,它有三个属性
content-box 默认值,维持w3c 标准盒子
border-box 和IE怪异模式下相同,盒子的宽度 = 内容宽度+ 内边距 + 边框
inherit 继承父元素的盒模型模式

这里主要介绍border-box 这个值,虽然和怪异模式下很像,但还是有区别的,就是它的高度 等于height,它可以广泛的去使用,因为它是标准哦,重要的是它支持 IE8 以上浏览器、以及其他浏览器
但是在IE下面使用的时候,一定不要进入怪异模式,使用 border-box 即可,如果进入怪异模式,即使使用 border-box ,也是没有效果的,这个是我不小心误入的。

在正常模式下,IE8 下设置 box-sizing: border-box; 完美的使 width = 内容 + 内边距 + 边框; height = 内容 + 内边距 + 边框; 


上面是 border-box 的兼容情况(是不是发现可以大胆的使用了),附上地址 http://caniuse.com/#search=box-sizing

css3 盒模型的更多相关文章

  1. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  2. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  3. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  4. 第94天:CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  5. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  6. css3盒模型

    css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...

  7. CSS3盒模型之box-sizing

    这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...

  8. CSS3盒模型——box-sizing

    box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...

  9. CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

随机推荐

  1. 2.6.2 Notification的功能与用法

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...

  2. 检查string是否为double

    之前写的方法,使用try catch来处理 如果能捕获异常就说明问题 public bool CheckLegal() { double number; bool flag = true; try { ...

  3. C++11内存模型的一些补充阅读材料

    <Intel Threading Building Block> O'REILLY Chapter 7 Mutual Exclusion - Atomic Operation - Memo ...

  4. -_-#【JS】element.click()

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. POJ -- 3140

    #include<iostream> #include<cstdio> #include<cstring> #include<string> #defi ...

  6. 白帽子讲Web安全2.pdf

    XSS构造技巧 利用字符编码: var redirectUrl="\";alert(/XSS/);"; 本身没有XSS漏洞,但由于返回页面是GBK/GB2312编码的“% ...

  7. 2008---2009学年(A)B)第1学期《中国近代史纲要》课程考核试卷

    湖南人文科技学院公共课 2008---2009学年第1学期<中国近代史纲要>课程考核试卷(A) 考核方式: (闭卷)                                     ...

  8. Shell简介:什么是Shell,Shell命令的两种执行方式

    Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地解释 ...

  9. php分页类代码和使用

    在这要说的一点就是如果你做的分页是有搜索条件的,那么就可以用下面的代码,然后调用之后在new Page()里面把连接加进去就可以了.例如: $href="http://www.***.cn/ ...

  10. iOS 视频播放的简单使用

    最近工作中有用到视频播放的内容,分享一些简单的用法给大家(由于网速问题,本例中使用的是本地的资源进行播放,要播放网络上的修改一些URL即可) 1.iOS9之前的视频播放 首先需要导入MediaPlay ...