css盒子模型

最新推荐文章于 2021-11-05 17:00:20 发布

ddzgbujc927800

最新推荐文章于 2021-11-05 17:00:20 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/Chenguohong/p/7088187.html

版权

css盒子模型

css盒子模型（Box Model）

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin（外边距）- 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框）- 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距）- 清除内容周围的区域。会受到框中填充的背景颜色影响
Content(内容)- 盒子的内容，显示文本和图像

元素的宽度与高度

重要：当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

例子：

width:250px;  
padding:10px;  
border:5px solid gray;  
margin:10px;

总宽度=250px（宽）+20px（左填充+右填充）+10px（左边框+右边框）+20px（左边距+右边距）=300px

最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

盒子模型的5个必要属性

width

盒子里面内容的宽度。

height

盒子里面内容的高度。

padding

内边距，盒子内容距离边框的距离。上下左右四个方位的padding属性：

padding-top
padding-bottom
padding-left
padding-right

准则：在使用css的时候，能够使用简写就使用简写

padding:10px 20px; 第一个值表示上下的padding 第二个值表示左右的padding padding:10px 20px 30px; 上左右下 padding:10px 20px 30px 40px; 上右下左 padding:20px 15px 30px; 上为20px 下为30px 左右为15px； padding:20px;上下左右 padding-left:30px; 左 30px

border

边框。

border： 1px solid red; 1px：边框的宽度为1px solid：边框线型为实体 red：边框的颜色为红色（可以用八进制十六进制英文单词表示）

margin

外边距。使用方法与padding相似，上下左右四个方位的margin属性：

margin-top
margin-bottom
margin-left
margin-right

在使用margin时需要注意的点： 1.塌陷 margin塌陷存在于块级元素之间如果元素变成了行内块元素或者行内元素则不会塌陷如果元素脱离了标准文档流则也不会塌陷

2.通过margin让盒子居中。

让盒子左右居中margin:0 auto;

使用margin:0 auto;让盒子居中需要注意的点:

盒子必须要有明确的width
盒子必须处于标准文档流中
是让盒子居中，而不是让盒子里面的文字居中。
如果让文字居中用text-align:center; text-align:center / left /right;

Tip:如果想要移动子元素的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border。

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE 8及更早IE版本不支持填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

转载于:https://www.cnblogs.com/Chenguohong/p/7088187.html