标准W3C盒子模型和IE盒子模型
标准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盒子模型的更多相关文章
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- 标准盒子模型和IE盒子模型
标准盒子模型 ＝ margin + border + padding + content (content = width | height) IE盒子模型 ＝ margin + content ( ...
- w3C盒子模型和IE的盒子模型
W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分IE 盒子模型的范围也包括 margin.border.padding. ...
- IE盒子模型和W3C盒子模型
IE盒模型出现在ie5.5以下的版本当中,ie6以上就实行W3C盒模型. box-sizing有两个属性,border-box和content-box. border-box对应传统的盒子模型,即ie ...
- W3C的盒子模型和IE的盒子模型
盒子模型分为两种:W3C盒子模型(标准盒子模型)和IE盒子模型 盒子模型组成:content+padding+border+margin 标准盒子模型的width就是content 而IE盒子模型的w ...
- IE盒模型和标准w3c盒模型
Margin(外边距) - 清除边框外的区域,外边距是透明的.Border(边框) - 围绕在内边距和内容外的边框.Padding(内边距) - 清除内容周围的区域,内边距是透明的.Content(内 ...
- CSS盒子模型和IE浏览器
CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding ...
- CSS中盒子模型和position（一）
今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...
- 关于css盒子模型和BFC的理解
CSS盒子模型 包含元素内容(content).内边距(padding).边框(border).外边距(margin) 一般元素总宽度 = element的width+padding的左右边距+mar ...
随机推荐
- JSTL的c:forEach标签(${status.index})
<c:forEach>标签具有以下一些属性: var:迭代参数的名称.在迭代体中可以使用的变量的名称,用来表示每一个迭代变量.类型为String. items:要进行迭代的集合.对于它所支 ...
- Spring mvc 文件上传到文件夹（转载+心得）
spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...
- 【leetcode】 Letter Combinations of a Phone Number(middle)
Given a digit string, return all possible letter combinations that the number could represent. A map ...
- 【网络】ssl与ssh
ssh(安全外壳协议):百度百科 ssl(安全套接字):http://kb.cnblogs.com/page/162080/ https应用了ssl协议 ssh与ssl的区别:http://blog. ...
- 【XLL API 函数】xlGetBinaryName
用于返回由 xlDefineBinaryName 函数定义的名称数据句柄.定义的名称和工作簿一起保存,我们可以在任意时间访问这个名称. 原型 Excel12(xlGetBinaryName, LPXL ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（零） 前言
前端时间听一个技术朋友说 LayIM 2.0 发布了,听到这个消息抓紧去官网看了一下.(http://layim.layui.com/)哎呀呀,还要购买授权[大家支持一下哦],果断买了企业版,喜欢钻研 ...
- 55. Jump Game leetcode
55. Jump Game Total Accepted: 95819 Total Submissions: 330538 Difficulty: Medium Given an array of n ...
- 多图上传 - Web Uploader
http://fex.baidu.com/webuploader/ 官方DEMO,我都不想说了,各种问题.参考ShuaiBi文章 http://www.cnblogs.com/ismars/p ...
- Delphi之DLL知识学习4---创建DLL
下面是在Delphi中创建一个DLL的全过程,你将看到怎样创建一个接口单元,使之可以被其他的应用程序访问.并且将学会怎么把Delphi的窗体加入DLL中. 一.数美分:一个简单的DLL 下面是包含一个 ...
- How many Fibs?【sudt 2321】【大数的加法及其比较】
How many Fibs? Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 Recall the definition of t ...