css的盒模型有哪些-成都创新互联网站建设

成都创新互联网站制作

028-86922220

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

css的盒模型有哪些

这篇文章主要介绍了css的盒模型有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联-专业网站定制、快速模板网站建设、高性价比临洮网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式临洮网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖临洮地区。费用合理售后完善，十多年实体公司更值得信赖。

css的盒模型有2种，分别为：1、W3c标准的盒子模型（标准盒模型），width和height指的是内容区域的宽度和高度；2、IE标准的盒子模型（怪异盒模型），width和height指的是内容区域、边框、内边距总的宽度和高度。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

  • width和height：内容的宽度、高度（不是盒子的宽度、高度）。

  • padding：内边距。

  • border：边框。

  • margin：外边距。

盒子模型的示意图：

css的盒模型有哪些

代码演示：

css的盒模型有哪些

上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。

注意：宽度和真实占有宽度，不是一个概念！来看下面这例子。

标准盒模型和IE盒模型

盒子模型分为两种：

  • 第一种是W3c标准的盒子模型（标准盒模型）

  • 第二种IE标准的盒子模型（怪异盒模型）

我们目前所学习的知识中，以标准盒子模型为准。

标准盒子模型：

css的盒模型有哪些

IE盒子模型：

css的盒模型有哪些

上图显示：

在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：

  • width和height：内容的宽度、高度（不是盒子的宽度、高度）。

  • padding：内边距。

  • border：边框。

  • margin：外边距。

CSS盒模型和IE盒模型的区别：

  • 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

  • IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。

标签也有margin

标签有必要强调一下。很多人以为标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是，即浏览器。而是的儿子。浏览器给默认的margin大小是8个像素，此时占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。



 
  
  
  
  
  
  Document



div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}



 

 


有生之年


狭路相逢


 

上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：

css的盒模型有哪些

认识width、height

一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。

比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：

css的盒模型有哪些

下面这两个盒子，真实占有宽高，都是302*302：

盒子1：

	.box1{
		width: 100px;
		height: 100px;
		padding: 100px;
		border: 1px solid red;
	}

盒子2：

	.box2{
		width: 250px;
		height: 250px;
		padding: 25px;
		border: 1px solid red;
	}

真实占有宽度 = 左border + 左padding + width + 右padding + 右border

上面这两个盒子的盒模型图如下：

css的盒模型有哪些

如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。

认识padding

padding区域也有颜色

padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。

效果如下：

css的盒模型有哪些

padding有四个方向

padding是4个方向的，所以我们能够分别描述4个方向的padding。

方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。

小属性的写法：

	padding-top: 30px;
	padding-right: 20px;
	padding-bottom: 40px;
	padding-left: 100px;

综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）

padding:30px 20px 40px 100px;

如果写了四个值，则顺序为：上、右、下、左。

如果只写了三个值，则顺序为：上、右、下。??和右一样。

如果只写了两个值，比如说：

padding: 30px 40px;

则顺序等价于：30px 40px 30px 40px;

要懂得，用小属性层叠大属性。比如：

padding: 20px;
padding-left: 30px;

上面的padding对应盒子模型为：

css的盒模型有哪些

下面的写法：

padding-left: 30px;
padding: 20px;

第一行的小属性无效，因为被第二行的大属性层叠掉了。

感谢你能够认真阅读完这篇文章，希望小编分享的“css的盒模型有哪些”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


本文题目：css的盒模型有哪些
本文路径：http://kswsj.cn/article/jcecei.html

其他资讯