CSS 知识整理(四) 盒子模型及相关属性

CSS 知识整理(四)  盒子模型及相关属性

目录

CSS 知识整理(四)  盒子模型及相关属性

一、盒子模型

二、边框（Border）

三、轮廓（outline）

四、外边距（margin）和填充（padding）

---

一、盒子模型

在html中，每个标签都可以看做是一个盒子，通过调节这个盒子在网页中的位置，可以实现网页的布局以及美化网页，下面就是盒子模型的组成

 盒子模型分为：

• Margin外边距：边框外的延伸的部分
• Border边框：盒子的边框，可添加颜色和宽度
• Padding内边距：边框到实际内容之间的部分
• Content内容：显示具体的内容

一下代码实现了如何设置盒子模型基本元素的值：

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

此时盒子模型变为：

二、边框（Border）

边框属性允许我们对边框样式进行指定

• 边框样式 border-style

允许定义边框样式：无边框，虚线边框，实线边框，双边框，3D边框

• 边框宽度 border-width

可以直接使用像素值（px）进行设置，也可以使用程度副词（thick,medium,thin等）

• 边框颜色 border-color

直接设置颜色，可以使用英文（red,yellow等）也可以使用RGB(#000000) ,

• 边框分边设置

可以分别设置不同边的属性

注意区分各个值对应的边

border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted

 

三、轮廓（outline）

轮廓是外边框外围一层

可设置颜色，样式和宽度

四、外边距（margin）和填充（padding）

图如下：

可以分别天界上下左右的外边距和填充长度。

以上为笔记，具体实现参考菜鸟驿站，这里不重复。