CSS盒子模型及属性

目录

文章目录

前言

一、内容区（content）

1、使用范例

1.1编写代码

1.2效果展示

二、内边距（padding）

2、使用范例

2.1编写代码

2.2效果展示

三、外边距（margin）

3、使用范例

3.1编写代码

3.2效果展示

 四、边框（border）

4、使用范例

4.1编写代码

4.2效果展示

• 总结

---

前言

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

不同部分的说明：

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

---

一、内容区（content）：内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。

内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。

1、使用范例

1.1编写代码

代码如下（示例）：

 

当overflow 属性值为hidden时，溢出部分将不可见；

为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；

当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；

当为auto时，将由浏览器决定如何处理溢出部分。

1.2效果展示

如下图所示（示例）：

---

 

二、内边距（padding）：指内容区和边框之间的空间。

内边距有五个属性：padding-top、padding-bottom、padding-left、padding-right 和 padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。

2、使用范例

2.1编写代码

代码如下（示例）：

 box-sizing: border-box：是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。

2.2效果展示

如下图所示（示例）：

---

三、外边距（margin）：外边距位于盒子的最外围，是添加在边框外周围的空间。

空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。

通常⽹页由多个盒⼦排列⽽成，可以通过外边距属性设置盒⼦与盒⼦之间的距离，外边距就是元素边框与相邻元素之间的距离。CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。

3、使用范例

3.1编写代码

代码如下（示例）：

3.2效果展示

如下图所示（示例）：

 

 1、定义外边距：

margin-top；上外边距；

margin-right；右外边距；

margin-bottom：下外边距;

margin-left：左外边距；

margin：上下左右外边距；

2、块级元素⽔平居中：

当我们对块级元素设置width宽度，同时将左右的外边距设置为auto时，可以使其居中

margin:0 auto; /*实现⽔平居中*/

margin:5px auto /*实现⽔平居中，且上下拉开5px外边距*/

3、内外边距的清除的重要性

为了⽅便控制⽹页中的元素，制作⽹页是通常先清除元素的默认内外边距

*{

padding:0;/*清除内边距*/

margin:0;/*清除外边距*/

}

---

 四、边框（border）：边框是环绕内容区和内边距的边界。

边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。

4、使用范例

4.1编写代码

代码如下（示例）：

border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。

CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。

使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。

使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。

4.2效果展示

如下图所示（示例）：

---

• 总结

CSS内容相对较为琐碎，所以需要在运⽤的过程中加强记忆，在练习中加强知识的深度。同时也需要掌握各种截图⼯具、测量⼯具的使⽤。