• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
 

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 盒子模型。

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 盒子模型。

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
解决C/C++程序执行一闪而过的方法发布时间：2022-07-13
下一篇：
C++学习之类的构造函数、析构函数发布时间：2022-07-13
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap