CSS盒模型(Box model)问题详解

最新推荐文章于 2022-02-25 16:14:11 发布
最新推荐文章于 2022-02-25 16:14:11 发布
阅读量335 收藏
点赞数
分类专栏： CSS样式 文章标签： css float 浏览器 mozilla ie firefox
 width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。左右Margin加倍的问题当box为float时，IE6中box左右的margin会加倍

W3C定义的盒模式如下：
 


盒模型(Box model)

　　width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。
　　但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。

左右Margin加倍的问题
　　当box为float时，IE6中box左右的margin会加倍。比如：

 Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>

　　左面的inner的左面margin明显大于5px。
　　这时候，定义inner的display属性为inline。

外层box自动计算高度的问题
　　根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
　　Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：

 Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style>
.outer {
width:600px;
background:#000;
}
.inner1 {
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>

　　上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：

 Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.52css.com</title>
<style>
.outer {
width:600px;
background:#000;
overflow:auto;
}
.inner1 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head> 
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>
</div>
</body>
</html>

　　因此，外层css要定义overflow属性，内层最后要加上clear属性。

居中问题
　　需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
　　你可以这样定义使它横向居中：

 Example Source Code [www.52css.com]
#wrap { 
width:760px; /* 修改为你的层的宽度 */ 
margin:0 auto; 
} 

　　但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：

 Example Source Code [www.52css.com]
#outer { 
text-align:center; 
} 
#wrap { 
width:760px; /* 修改为你的层的宽度 */ 
margin:0 auto; 
text-align:left; 
} 

　　第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
　　因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。
stoneoil
关注
专栏目录
详解CSS中的Box Model盒属性的使用
09-24
Box Model是CSS布局的核心概念，它定义了网页元素在页面上的占用空间，包括内容区域(content)、内边距(padding)、边框(border)和外边距(margin)四部分。理解Box Model对于精确控制元素的尺寸和布局至关重要。 正常...
CSS盒子模型详解
qq_46056318的博客
11-01 2384
盒子可见框的大小，由内容区、内边距、边框共同决定，所以在计算盒子大小时，需要将三个区域加到一起计算。CSS将页面中的所有元素都设置为了一个矩形的盒子，对页面的布局就是将不同的盒子摆放到不同的位置。子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度。总结：兄弟元素之间的外边距的重叠，对于开发是有利的，不需要进行处理。内边距，也叫填充，是内容区和边框之间的空间，背景颜色会延申。
CSS 盒子模型（Box Model）
瓜冬瓜的博客
05-27 1466
CSS 盒子模型（Box Model） 由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。 有两种标准，一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。 当对一个文档进行布局的时候，浏览器的渲染引擎会根据这两个标准的其中一个将所有元素表示为一个个矩形的盒子。 这两种标准对 height 和 width 的计算方式...
CSS总结（盒子模型）
cccBtrya的博客
05-22 7518
盒子模型盒子模型属性看下图就很直白了width 和height 设置了内容框的宽/高padding 家族属性设置内边距的宽度(别忘了普通属性比如 padding-bottom ，一次设置一个边).border 家族属性设置边界的宽度、样式和颜色(许多可用的普通边界属性还有很多)。margin 家族属性设置包围CSS盒子外部区域的宽度，这个属性推开布局中其他的CSS盒子溢流（overflow）当用绝...
css盒子模型详解加示例
09-25
此外，使用JavaScript库如jQuery，可以通过`$.boxModel`属性检测当前页面是否遵循W3C标准盒子模型。如果返回`true`，则表示使用的是标准模型；若返回`false`，则可能使用的是IE模型。 在实际开发中，理解并熟练运用...
DIV CSS 盒子模型PPT演讲.zip
02-27
在网页设计中，DIV CSS是构建页面布局的重要工具，而盒子模型（Box Model）则是理解CSS布局的关键概念。这个PPT演讲将深入探讨这一核心知识点，帮助初学者掌握网页设计的基础。 首先，我们要了解什么是盒子模型。在...
css 盒模型整理
03-01
CSS盒模型主要分为两种：标准盒模型（W3C Box Model）和IE盒模型（Internet Explorer Box Model）。这两种模型在处理元素宽度和边距时有所不同。 #### W3C盒模型： - 内容区域（Content）：实际的内容，如文字或...
CSS盒模型相关问题
Imdadaer的博客
12-09 189
CSS盒模型相关问题 1. 基本概念：标准模型 + IE模型 2. 标准模型和IE模型的区别 3. CSS如何设置这两种模型 4. JS如何设置获取盒模型对应的宽和高 5. 实例题（根据盒模型解释边距重叠） 6. BFC（边距重叠解决方案） 具体说明： 1. 标准模型和IE模型：     本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（pad...
css盒子模型的一些问题及解决方法
LIN的博客
09-12 870
margin-top塌陷 1.设置边框 2.overflow：hidden; 3.使用伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&g...
前端面试题之CSS盒模型
simeng-han的博客
11-10 1万+
前端面试对于CSS这块不可或缺的一个考察点就是盒模型（BOX），通过对BOX的提问就可以了解你在CSS知识方面的掌握程度。本文主要介绍CSS中的盒模型在面试中可能会问到的相关问题和知识点，不足指出请指出改正。 首先，最基础的问题–什么是盒模型？ 可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（pa...
CSS盒子模型总结
热门推荐
码厩
09-27 6万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...
CSS盒子模型(margin,padding,border等分别都是什么)以及盒模型的经典塌陷问题
wfy17030212的博客
02-25 668
CSS盒子模型是很重要的一个知识点，尽管现如今flex布局普及，了解并掌握盒子模型还是必不可少的。 文章目录一、盒子模型是什么？二、盒子模型的组成1.元素本身大小三.盒模型常见的问题-边距塌陷和父子嵌套margin塌陷边距塌陷父子嵌套margin塌陷四、盒子模型塌陷问题解决方法总结 一、盒子模型是什么？ 如上图，这就是一个盒子模型，这样类似的图在浏览器开发者工具中的Elements中能够找到。 二、盒子模型的组成 1.元素本身大小 以下的代码 <div class="test"></
Web前端篇：CSS盒模型
ITmiaomiao666的博客
06-13 5430
常用块元素由： p,h1-h6,div,ul,ol,tr,li,form 常用内联元素由： a,span,em,i,strong,u, 常见的内联块元素 input img 盒模型常用属性： 盒子模型中有四个属性：内容的宽高、内边距、外边距、边框。 1.padding padding有四个方向，分别描述四个方向的padding。 padding-top:10px; padd...
简述对css盒子模型的理解_CSS盒模型的彻底理解
weixin_39649965的博客
11-28 3315
一、CSS盒模型1、概念CSS 盒子模型本质上是一个盒子。封装了周围的 HTML 元素。它包括：外边距(margin)、边框(border)、内边距(padding)、实际内容(element)四个属性。CSS盒模型有两种：标准模型 + IE模型2、区别标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin IE盒子模型：盒子总...
css盒模型一些常见问题
weixin_47753939的博客
05-27 361
一、盒模型 对于怎么理解盒模型，我们可以把它想象成一个快递盒子，content部分就是你所购买的物品，padding部分就是为了防止物品摔坏的防护泡沫，border部分就是包裹快递的盒子，而margin就是两个快递盒子之间的距离。 二、盒模型常见问题及解决方案 1. margin叠加问题 当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题，这个问题只有上下有，左右是没有这个叠加的问题的，margin会取值大的作为叠加的值。 解决方案： ①BFC规范 ②只给一个元素加边距 2、margin传递的问题
CSS技巧和经验列表
weixin_34010949的博客
11-22 150
如何清除图片下方出现几像素的空白间隙？ 方法1： img{display:block;} 方法2： img{vertical-align:top;} 除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以 ...
css盒模型问题
weixin_33907511的博客
12-26 107
css盒模型问题 1.基本概念：标准模型和ie模型 2.标准模型和ie模型的区别 3.css如果设置这两种模型 4.js如何获取盒模型的宽高 5.边距重叠 6.BFC 1.CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：Margin(外边距)，Border(边框)，Padding(内边距)，和Content(内容)。 分为标准模型和IE模型 ...
CSS3弹性盒模型：自适应布局与私有属性详解
弹性盒模型（Flexible Box Model, 简称 Flexbox）是CSS3中引入的一种强大的布局方式，它能够帮助开发者更好地控制元素在容器中的排列、尺寸调整和空间分配，实现了更加灵活和响应式的网页布局。其设计灵感来源于Fire...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值