19.HTML CSS边距、边框、填充和内容

模型是CSS布局的基础，理解它的每个组成部分对于创建整洁、响应式的网页至关重要。本文将深入探讨盒模型的四个主要组成部分：边距（Margin）、边框（Border）、填充（Padding）和内容（Content），并解释它们如何共同工作来创建网页布局。

盒模型概述

在CSS中，盒模型是一种用于设计和布局的概念模型，它将HTML元素视为一个盒子。这个盒子包括了元素的内容、内边距、边框和外边距。理解盒模型对于控制元素的大小和在页面上的位置至关重要。

盒模型的结构

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每个盒子从里到外包括：

内容（Content）：这是盒子中的实际内容，包括文本、图片或其他媒体。
内边距（Padding）：内容区域周围的空间，内边距是透明的。
边框（Border）：围绕内边距和内容的线框，可以设置大小、样式和颜色。
外边距（Margin）：盒子外围的空间，用来隔开相邻的盒子。

边距（Margin）

边距是盒子外部的空间，它决定了元素之间的间隔。边距是透明的，不可见，不会被背景颜色或背景图片覆盖。

/* 单边边距设置 */
.element {
  margin-top: 10px;    /* 上边距 */
  margin-right: 15px;  /* 右边距 */
  margin-bottom: 10px; /* 下边距 */
  margin-left: 15px;   /* 左边距 */
}

/* 简写形式 */
.element {
  margin: 10px 15px;   /* 上下边距 | 左右边距 */
}

边距可以用来创建元素之间的空间，或者将元素与页面边缘分开。当两个元素的垂直边距相遇时，它们会合并成一个边距，这个现象称为边距折叠。

边框（Border）

边框是盒子的一个可视化组件，围绕着内边距和内容。边框的样式、宽度和颜色都可以自定义。

.element {
  border-style: solid; /* 边框样式 */
  border-width: 2px;  /* 边框宽度 */
  border-color: black; /* 边框颜色 */
}

/* 简写形式 */
.element {
  border: 2px solid black;
}

边框对于突出显示元素或分隔内容非常有用。你还可以只为边框的一边或几边设置样式。

填充（Padding）

填充是围绕内容内部的空间，它可以增加内容和边框之间的距离。与边距不同，填充区域会被背景颜色或背景图片覆盖。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 简写形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充对于控制元素内部的空白区域非常有用，它可以帮助改善内容的可读性。

内容（Content）

内容是盒子中的文字、图片或其他媒体。内容的大小可以通过设置width和height属性来控制，但实际可见区域的大小还会受到内边距和边框的影响。

.element {
  width: 200px;
  height: 150px;
}

内容区域是设计和布局的核心，所有的文本和媒体都在这里显示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

总结

理解盒模型是前端开发的基础，它允许我们精确控制元素的布局和间距。通过恰当地使用边距、边框、填充和内容，我们可以创建出既美观又功能强大的网页设计。随着响应式设计的兴起，现代CSS框架已经将盒模型的概念整合进其核心，使得跨设备布局变得更加一致和简单。

在日常开发中，经常使用开发者工具来检查和调试盒模型的各个部分，确保我们的样式表现按照预期工作。掌握盒模型，你将能够更加自信地处理网页布局的挑战。

例1: 边框显示的方向一致

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
vertical-align: top;
}
div.box{
width: 427px;
height: 240px;
margin: 100px auto;
border: 5px solid #F8EBD8;
position: relative;
padding: 10px;
}
div.mask{
width: 427px;
height: 240px;
background-color: #8E715B;
position: absolute;
left: 10px;
top: 10px;
/*注意我们不能过渡display position等属性*/
opacity: 0;
transition: 1s;
}
.box:hover>.mask{
opacity: 1;
}
p{
position: absolute;
transition: 0.5s;
background-color: #8E715B;
}
p.top{
width: 0px;
height: 5px;
left: -5px; /* 因为有边框存在 绝对定位包括内边距(padding) */
top: -5px;
}
p.right{
width: 5px;
height: 0px;
right: -5px;
top: -5px;
}
p.bottom{
width: 0px;
height: 5px;
right: -5px;
bottom: -5px;
}
p.left{
width: 5px;
height: 0px;
left: -5px;
bottom: -5px;
}
.box:hover>.top,.box:hover>.bottom{
width: 452px;
}
.box:hover>.right,.box:hover>.left{
height: 265px;
}
dl{
color: #8E715B;
font-size: 14px;
padding: 10px 20px;
line-height: 24px;

transition: 1s 1s;
}
dt{
font-size: 16px;
}
.box:hover dl{
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<img src="img/迪丽热巴2.jpg"/>
<div class="mask">
<dl>
<dt><strong>迪丽热巴</strong></dt>
<dd>1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员，毕业于上海戏剧学院。2013年，迪丽热巴因主演个人首部电视剧《阿娜尔罕》而出道。2014年，她主演了奇幻剧《逆光之恋》。2015年，迪丽热巴凭借爱情剧《克拉恋人》赢得高人气，并获得国剧盛典最受欢迎新人女演员奖。</dd>
</dl>
</div>

<p class="top"></p>
<p class="right"></p>
<p class="bottom"></p>
<p class="left"></p>
</div>
</body>
</html>

实例2: 边框显示的方向相反

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
vertical-align: top;
}
div.box{
width: 427px;
height: 240px;
margin: 100px auto;
border: 5px solid #F8EBD8;
position: relative;
padding: 10px;
}
div.mask{
width: 427px;
height: 240px;
background-color: #8E715B;
position: absolute;
left: 10px;
top: 10px;
/*注意我们不能过渡display position等属性*/
opacity: 0;
transition: 1s;
}
.box:hover>.mask{
opacity: 1;
}
p{
position: absolute;
transition: 0.5s;
background-color: #8E715B;
}
p.top{
width: 0px;
height: 5px;
left: -5px;
top: -5px;
}
p.right{
width: 5px;
height: 0px;
right: -5px;
bottom: 0px;
}
p.bottom{
width: 0px;
height: 5px;
right: -5px;
bottom: -5px;
}
p.left{
width: 5px;
height: 0px;
left: -5px;
top: 0px;
}
.box:hover>.top,.box:hover>.bottom{
width: 452px;
}
.box:hover>.right,.box:hover>.left{
height: 265px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/迪丽热巴2.jpg"/>
<div class="mask"></div>

<p class="top"></p>
<p class="right"></p>
<p class="bottom"></p>
<p class="left"></p>
</div>
</body>
</html>

实例: 按照顺序显示边框

order 盒子边框

复合属性。设置对象边框的特性。
盒子边框三要素：
① 边框粗细
② 边框样式
③ 边框颜色

语法：border: border-width | border-style | border-color ;

边框四边的粗细、样式、颜色，以及上下左右每个位置的样式属性都是可以单独调整的。

边框的颜色不是必要的，如果不指定颜色，默认颜色为黑色，但必须为盒子指定宽高。

初始 HTML

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div{
             width: 500px;
             height: 50px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

边框样式

使用 border-style 可为盒子边框设置样式，以下示例为实线

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid; 
 }

效果：

可单独针对某一方向设置边框样式

示例 CSS 代码

上边：border-top-style: double; （双线）
右边：border-right-style: solid; (实线)
下边：border-bottom-style: dashed; (虚线)
左边：border-left-style: dotted; (点线)

border-style 说明

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0，本属性将失去作用。

如果需要设置不同方向的样式属性，可以写在一句 CSS 代码里，比如说下面这段代码，上下实线，左右虚线。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid dashed;
 }

效果：

border-style 样式属性值

属性值解释none无轮廓。 border-color将被忽略，border-width计算值为0，除非边框轮廓为图像，即border-image。hidden隐藏边框。IE7及以下尚不支持dotted点状轮廓。IE6下显示为dashed效果dashed虚线轮廓solid实线轮廓double双线轮廓。两条单线与其间隔的和等于指定的border-width值groove3D凹槽轮廓ridge3D凸槽轮廓inset3D凹边轮廓outset3D凸边轮廓

边框粗细

使用 border-width 可为盒子边框设置粗细，以下示例边框为 5px 粗细

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width: 5px;
 }

效果

可单独针对某一方向设置边框粗细

示例 CSS 代码

上边：border-top-width: 10px; （双线）
右边：border-right-width: 10px; (实线)
下边：border-bottom-width: 10px; (虚线)
左边：border-left-width: 10px; (点线)

border-width 说明

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-style设置为none或hidden，border-width的使用值将为0。

如果需要设置不同方向的边框粗细，可以写在一句 CSS 代码里。

比如说下面这段代码，上下2px，右2px，左5px。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
 }

效果：

边框颜色

可直接输入
颜色的英文名称
rgb值
十六进制

使用 border-color 可为盒子边框设置颜色，以下示例边框颜色为红色。

 /* CSS代码 */
 div{
     width: 500px;
     height: 50px;
     border-style: solid;
     border-width:2px 2px 2px 5px;
     border-color: red;
 }

效果：

可单独针对某一方向设置边框颜色

示例 CSS 代码

上边：border-top-color: 10px;
右边：border-right-color: 10px;
下边：border-bottom-color: 10px;
左边：border-left-color: 10px;

border-color 说明

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
如果border-width等于0或border-style设置为none，本属性将被忽略。

上面有两个示例讲述如何设置不同方向的属性，border-color 也是相同使用方法，此处就不做示例了。

border 是复合属性

如果你需要同时设置盒子的粗细、样式、颜色，那么你可以将他们的样式表写在同一行代码里。

例如：

 /* CSS代码 */
 div{
     border-top: 5px solid red;
 }

这段代码指定了上边框的三个属性：粗细、样式、颜色

border-top 包含了：

border-top-width: 5px;
border-top-style: solid;
border-top-color: red;

其他同理

教你用 CSS 画个三角形

先来看一个示例

 /* CSS代码 */
 div{
     width: 100px;
     height: 100px;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

细心的你，一定发现了 border 的边框四条边交接处是斜角。

此刻我们把盒子的宽高设置为 0

 /* CSS代码 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid red;
     border-right: 50px solid blue;
     border-bottom: 50px solid green;
     border-left: 50px solid pink;
 }

效果：

是不是完完全全像四个三角形一样。

我们只需要把上边和左右两边的三角形隐藏起来，它不就是一个三角形了。

为 border-color 指定 transparent 值，使盒子边框颜色变透明

 /* CSS代码 */
 div{
     width: 0;
     height: 0;
     border-top: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid green;
     border-left: 50px solid transparent;
 }

效果：

把另外三条边透明之后，就只剩一个三角形了。

完

部分资料引用自：

http://caibaojian.com/css3/properties/border/index.htm

在线咨询

上一篇：H5游戏的山寨坑，绕不过只能跳了
下一篇：教你快速去除水印，获取你想要的素材；网页审查元素教学

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

19.HTML CSS边距、边框、填充和内容

盒模型概述

盒模型的结构

边距（Margin）

边框（Border）

填充（Padding）

内容（Content）

示例

总结

初始 HTML

边框样式

可单独针对某一方向设置边框样式

border-style 说明

border-style 样式属性值

边框粗细

可单独针对某一方向设置边框粗细

border-width 说明

边框颜色

可单独针对某一方向设置边框颜色

border-color 说明

border 是复合属性

教你用 CSS 画个三角形

您的项目需求