CSS基础-07-盒子模型和轮廓（外边距 margin，边框border，内边距 padding，轮廓 outline）

1. 盒子模型

1.1 盒子模型简介

1.1.1 概述

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

示意图：
[图片上传失败...(image-3d161-1655303476642)]

1.1.2 示例

 





盒子模型演示

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。

• 显示结果

image.png

1.2 margin

1.2.1 margin 属性

margin属性可以有一到四个值。

• 1个值（四周）

margin:25px;

说明：所有的4个边距都是25px

• 2个值（上下、左右）

margin:25px 50px;

说明：
上下边距为25px
左右边距为50px

• 3个值（上、左右、下）

margin:25px 50px 75px;

说明：
上边距为25px
左右边距为50px
下边距为75px

• 4个值（上、右、下、左）

margin:25px 50px 75px 100px;

上边距为25px
右边距为50px
下边距为75px
左边距为100px

1.2.2 margin相关属性

margin-left

margin-left:50px|2cm

margin-right

margin-right:50px|2cm

margin-top

margin-top:50px|2cm

margin-bottom

margin-bottom:50px|2cm

1.3 padding

1.3.1 padding 属性

四个值和margin相同

1.3.2 padding 相关属性

padding-left

padding-left:50px|2cm

padding-right

padding-right:50px|2cm

padding-top

padding-top:50px|2cm

padding-bottom

padding-bottom:50px|2cm

1.4 border

1.4.1 border属性

border: 25px solid green;

三个参数分别为：边框宽度，边框类型，边框颜色

1.4.2 border的相关属性

border-width

border-style:solid;
border-width:5px;

border-width单独使用无效，需要border-style一起使用

border-style

border-style:none;
border-style:dotted;
border-style:dashed;
border-style:solid;
border-style:double;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;
border-style:hidden;
border-style: dotted dashed solid double;

[图片上传失败...(image-e3b223-1655303476642)]
[图片上传失败...(image-9b5ff6-1655303476642)]

border-color

p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
} 

4. 轮廓 outline

说明：

• 是绘制于元素周围的一条线
• 在border外部，（紧贴border，不受margin影响。）

4.1 简单使用

 
 




注意: 周围的绿圈

• 结果显示
  [图片上传失败...(image-1458e8-1655303476642)]

4.2 outline-style

• 语法

outline-style:dotted;
outline-style:dashed;
outline-style:solid;
outline-style:double;
outline-style:groove;
outline-style:ridge;
outline-style:inset;
outline-style:outset;

• 结果显示
  [图片上传失败...(image-eb78da-1655303476642)]

4.3 outline-width

• 语法

outline-width: thin|thick|10px

• 示例

p.one
{

    outline-style:solid;
    outline-width:thin;
}
p.two
{
    outline-style:dotted;
    outline-width:5px;
}

4.4 outline-color

outline-color:#00ff00|green;

---

image.png