CSS盒子模型及属性

一丶CSS盒子模型

1.概念

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

2.盒子模型中部分的说明：

（1）Margin(外边距)-清除边框外的区域，外边距是透明的。
（2）Border(边框)-围绕在内边距和内容外的边框。
（3）Padding(内边距)-清除内容周围的区域，内边距是透明的。
（4）Content(内容)-盒子的内容，显示文本和图像。

二丶属性

CSS中规定每个盒子分别为：内容区域（content）、内边距区域（padding）、外边距区域（margin）、边框区域（border），这四个部分就构成了完整的CSS盒子模型。

1.外边距（margin）

外边距位于盒子模型的最外围，是边框之外的空间。我们通常使用margin-top、margin-bottom、margin-left、margin-right及它们的简写属性margin来设置外边距，即控制盒子和盒子之间的距离。

它由margin-top，margin-left，margin-right，margin-button组成。表示盒子的上右下左的边距。一般我们写其复合属性margin，如果属性值有一个则表示上右下左的外边距，有两个属性值则第一个值表示上下，第二个值表示左右，三个值则表示第一个值表示上，第二个值表示左右，第三个值表示下。（注：margin可以使盒子居中。使用方法margin：0auto;）

margin:1px;【速写形式】外边距上右下左都有1px

margin:1px2px;上下为1px;右左为2px

margin:1px2px3px;上1px,右左2px,下3px

margin:1px2px3px4px;上1px,右px,下3px,左4px

margin-top:1px;

margin-bottom:2px;

margin-left:10px;

margin-right:5px;

2.内边框（border）

它是来表示盒模型的边框，介于margin与padding两块域之间，默认为无线条。它同样是有上左下右四方向，一般我们写复合属性：border:1px（线的大小）solid（是实线还是其他样式）color（线条颜色）；

除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。
border-width：边界宽度
border-style：边界样式
border-color：边界颜色

3.内边距（padding）

padding表示盒子的内边距。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。与margin类似，padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。
padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
开发者也可以直接使用简写属性padding同时设置四条边的宽度。这一部分的用法与margin类似。

4.Content（内容）

内容区是整个盒子模型的中心，其中存放了网页的主要元素(文本、图像等）。内容区有width、height、overflow三个属性。其中width和height属性用来指定盒子内容区域的宽度和高度。

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

以上便是对本节知识点CSS盒子模型及属性的讲解，大家做好笔记，重在理解，希望对大家有所帮助。

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦