CSS盒子模型

html-css025

CSS盒子模型,第1张

在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。

一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

记住，是所有的元素都可以看出一个盒子！

下图为一个CSS盒子模型的内部结构：

<html>

<head>

<title></title>

<style type="text/css">

<!--

#div {

background-color:#CCCCCC /*这是div背景色！可以不要~这里仅便于你区别*/

margin-top: 20px /*div离页面面顶部的距离为20像素*/

margin-left: 50px /*div离页面面左端的距离为50像素*/

/*这里若设置了顶部和左部就不用设置右和下了~因为2个位置就能把div定位

margin-right: 30px

margin-bottom: 40px */

border:#0099FF 10px solid /*div边框为10像素*/

padding-top: 20px /*内容与div边框顶部的距离为20像素！这里“内容”的位置=20+10+20的像素*/

padding-left: 90px/*内容与div边框左边的距离为90像素！这里“内容”的位置=50+10+90的像素*/

padding-right: 30px /*同上*/

padding-bottom: 50px /*同上*/

}

-->

</style>

</head>

<body>

<div id="div">此处显示 id "div" 的内容这些内容！其实是显示在div的center里！是个隐藏的框框~需要去理解</div>

</body>

</html>

原文链接： https://blog.csdn.net/qq_41145685/article/details/104464232

—————————————————————

一、什么是盒子模型(Box Model)

盒子想必大家都是知道的吧！

生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。

模型是什么呢？

它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件

css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。

二、CSS中的标准盒子模型(W3c标准的盒子模型)

CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件，在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。

1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

2、标准盒子模型的计算

如图：

标准的盒子模型的大小是：content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距)；

注：标准盒子的初始设置宽高大小不包含padding、border和margin的大小。

三、怪异盒子模型(IE标准的盒子模型)

1、怪异盒模型也叫IE盒子模型

怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。

怪异盒子(IE盒子模型)的触发条件：

(1) 给元素添加CSS3属性box-sizing:border-box(注：所以如果用CSS3新属性，就不要考虑低版本浏览器了)

(2)文档结构的doctype不写，这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。

2、怪异盒子(IE盒子模型)模型的计算

如图可见添加了怪异盒的div盒子宽度变小了。

标准的盒子模型的大小是：content(区域内容大小)+margin(外边距)；

注：怪异盒子的初始设置宽高大小包含padding、border大小在内，但不包含margin的大小。