标准W3C盒子模型和IE盒子模型

 

CSS盒子模型：网页设计中CSS技术所使用的一种思维模型。

CSS盒子模型组成：外边距（margin）、边框（border）、内边距（padding）、内容（content）。

CSS盒子模型分为：标准W3C盒子模型，IE盒子模型，注意在两种模型中宽（width）和高（height）包括属性的不同。

标准W3C盒子模型：

W3C模型中：

　　　　　　CSS中的宽（width）=内容（content）的宽

　　　　　　CSS中的高（height）=内容（content）的高

eg:

　　　　<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">

　　　　　　W3C模型

　　　　</div>

则此div的实际大小：

　　　　　　　　div高=height+（padding+border+margin）*2=50+(2+1+3)*2=62px;

　　　　　　　　div宽=width+（padding+border+margin）*2=50+(2+1+3)*2=62px;

div内容占大小：

　　　　　　　　div高=height=50px;

　　　　　　　　div宽=width=50px;

 IE盒子模型：

IE模型中：

　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2

　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2

eg:

　　　　<div style="width:50px;height:50px;padding:2px;border:1px solid blue;margin:3px;">

　　　　　　W3C模型

　　　　</div>

则此div的实际大小：

　　　　　　　　div高=height+margin*2=50+3*2=56px;

　　　　　　　　div宽=width+margin*2=50+3*2=62px;

div内容占大小：

　　　　　　　　div高=height-（border+padding）*2=50-（1+2）*2=44px;

　　　　　　　　div宽=width-（border+padding）*2=50-（1+2）*2=44px;

解决办法：

在代码顶部加如下的 doctype 声明，

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

使页面以W3C盒子模型渲染。

eg：

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
　　<html>
　　<head>
　　　　<title>标准w3c盒子模型</title>
　　</head>
　　<body>
　　</body>
　　</html>

为了让网页能兼容各个浏览器，让我们用标准 w3c 盒子模型。

－转载

标准W3C盒子模型和IE盒子模型的更多相关文章

  1. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  2. 标准盒子模型和IE盒子模型

    标准盒子模型 ＝ margin + border + padding + content (content =  width | height) IE盒子模型 ＝ margin + content ( ...

  3. w3C盒子模型和IE的盒子模型

    W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分IE 盒子模型的范围也包括 margin.border.padding. ...

  4. IE盒子模型和W3C盒子模型

    IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...

  5. W3C的盒子模型和IE的盒子模型

    盒子模型分为两种:W3C盒子模型(标准盒子模型)和IE盒子模型 盒子模型组成:content+padding+border+margin 标准盒子模型的width就是content 而IE盒子模型的w ...

  6. IE盒模型和标准w3c盒模型

    Margin(外边距) - 清除边框外的区域,外边距是透明的.Border(边框) - 围绕在内边距和内容外的边框.Padding(内边距) - 清除内容周围的区域,内边距是透明的.Content(内 ...

  7. CSS盒子模型和IE浏览器

    CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding ...

  8. CSS中盒子模型和position（一）

    今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...

  9. 关于css盒子模型和BFC的理解

    CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...

随机推荐

  1. JSON数据格式

    JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...

  2. 【leetcode】Number of Islands（middle）

    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...

  3. 狼抓兔子（bzoj 1010）

    Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一 ...

  4. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  5. Git 操作的一些场景

    1. 某些不需要的文件/文件夹,如:/build 之类,在添加对应的gitignore之前Push了,导致每次编译都会产生新的文件 解决方法:直接删掉不需要的文件/文件夹,然后push gitigno ...

  6. hdu1212(大数取模)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1212 题意:给出两个数a, b,求a%b: 思路:(c+d)%e=c%e+d%e,(c*d)%e=(c ...

  7. entOS7安装iptables防火墙,试验未通过

    CentOS7默认的防火墙不是iptables,而是firewalle. 安装iptable iptable-service #先检查是否安装了iptables service iptables st ...

  8. 三、jQuery--jQuery基础--jQuery基础课程--第3章 jQuery过滤性选择器

    1.:first过滤选择器 本章我们介绍过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素. 在jQuery中,如果想得到一组相 ...

  9. MyBatis魔法堂：即学即用篇

    一.前言                   本篇内容以理解MyBatis的基本用法和快速在项目中实践为目的,遵循Make it work,better and excellent原则. 技术栈为My ...

  10. Asp.Net - 7.AJAX

    AJAX简介 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新面的坏处:页面刷新打断用户操作.速度慢.增加服务器的流量压力.如 ...