HTML入门教程6

---

一、什么是盒子模型？

< div > 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

< div >标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

1、外框线margin

• margin:10px 5px 15px 20px;
  • 上边距是 10px
  • 右边距是 5px
  • 下边距是 15px
  • 左边距是 20px
  
  
• margin:10px 5px 15px;
  • 上边距是 10px
  • 右边距和左边距是 5px
  • 下边距是 15px
  
  
• margin:10px 5px;
  • 上边距和下边距是 10px
  • 右边距和左边距是 5px
  
  
• margin:10px;
  • 所有四个边距都是 10px

属性值

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

2、框线border

代码如下（示例）：

border:5px solid red;

属性值

值	说明
border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色
inherit	指定应该从父元素继承border属性值

缩写边框属性设置在一个声明中所有的边框属性。/p>

可以设置的属性分别（按顺序）：border-width, border-style,和border-color.

---

3、内边距padding

• padding:10px 5px 15px 20px;
  • 上填充是 10px
  • 右填充是 5px
  • 下填充是 15px
  • 左填充是 20px

• padding:10px 5px 15px;
  • 上填充是 10px
  • 右填充和左填充是 5px
  • 下填充是 15px
• 
  
• padding:10px 5px;
  • 上填充和下填充是 10px
  • 右填充和左填充是 5px
• 
  
• padding:10px;
  • 所有四个填充都是 10px

• 4、背景background

  background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
  

  值	说明
  background-color	指定要使用的背景颜色
  background-position	指定背景图像的位置
  background-size	指定背景图片的大小
  background-repeat	指定如何重复背景图像
  background-origin	指定背景图像的定位区域
  background-clip	指定背景图像的绘画区域
  background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。
  background-image	指定要使用的一个或多个背景图像

  总结

  以上就是今天要讲的内容，本文仅仅简单介绍了盒子的使用，而盒子提供了大量能使我们快速便捷地布局网页。