前言：

一、盒子模型

1、盒子模型的内容

2、盒子模型的总宽度和总高度

二、盒子模型的相关属性

1、边框属性（border）

(1)、边框线样式： border-style: 属性值;

(2)、边框线宽度：border-width:属性值；

(3)、边框线颜色：border-color：属性值；

(4)、综合设置：border：四边宽度四边样式四边颜色;

(5)、圆角边框：border-radius: 水平半径参数/垂直半径参数;

(6)、图片边框：border-images：图片路径裁切方式/边框宽度/边框扩展距离重复方式;

2、内边距属性

3、外边距属性

4、背景属性

5、阴影属性

前言：

CSS作为网页布局的好帮手，最基本也是最重要的一个模块就是盒子模型。也就是说我们可以通过把HTML元素视为一个一个的方框，然后通过改变这些方框的位置来布局网页，这样方便又高效。

一、盒子模型

1、盒子模型的内容

下图就展示了一个盒子，它具有以下内容：

(1)外边距(margin)：盒子与其他元素之间的额距离

(2)内边距(padding)：也称为填充距离,内容和边框之间的距离

(3)边框(border)：围绕内边距和内容的边框

(4)内容(content):显示文本和图像等

2、盒子模型的总宽度和总高度

A、元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

B、元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

二、盒子模型的相关属性

1、边框属性（border）

四条边框属性若分开设置，则遵循顺指针顺序，即上右下左

(1)、边框线样式： border-style: 属性值;

A、设置四个值：上右下左【顺时针】

B、设置三个值:上（右左）下

C、设置两个值：（上下）（右左）

D、设置一个值：（上右下左）

dotted	定义点线边框
dashed	定义虚线边框
solid	定义实线边框
double	定义双边框
groove	定义 3D 坡口边框。效果取决于 border-color 值
ridge	定义 3D 脊线边框。效果取决于 border-color 值
inset	定义 3D inset 边框。效果取决于 border-color 值
outset	定义 3D outset 边框。效果取决于 border-color
none	定义无边框
hidden	定义隐藏边框

(2)、边框线宽度：border-width:属性值；

A、可以将宽度设置为特定大小（以 px、pt、cm、em 计）

B、也可以使用以下三个预定义值之一：thin、medium 或 thick

C、如果边框样式设置为none或未设置样式，则设置边框也无效

(3)、边框线颜色：border-color：属性值；

可以通过以下方式设置颜色：

A、name - 指定颜色名，比如 "red"

B、HEX - 指定十六进制值，比如 "#ff0000"

C、RGB - 指定 RGB 值，比如 "rgb(255,0,0)"

D、HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"

E、transparent(指定透明度）

(4)、综合设置：border：四边宽度四边样式四边颜色;

三种属性不分先后顺序

(5)、圆角边框：border-radius: 水平半径参数/垂直半径参数;

A、该属性是一个简写属性，将四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

B、使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆

C、四个值代表（顺时针）；两个值：前一个代表左上和右下，后一个代表右上和左下

D、值可以是具体值（px）或者百分比（%），负值无效。

E、即使元素没有边框，圆角也可以用到 background 上面

F、当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

(6)、图片边框：border-images：图片路径裁切方式/边框宽度/边框扩展距离重复方式;

A、用作边框的图像

B、在哪里裁切图像

C、定义中间部分应重复还是拉伸

border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
#borderimg1 {border: 10px solid transparent;padding: 15px;border-image: url(../image/images/b-img.png) 50 round;
}#borderimg2 {border: 10px solid transparent;padding: 15px;border-image: url(../image/images/b-img.png) 20% round;
}#borderimg3 {border: 10px solid transparent;padding: 15px;border-image: url(../image/images/b-img.png) 30% round;
}</style>
</head>
<body>
<p id="borderimg1">border-image: url(border.png) 50 round;</p>
<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>
</body>
</html>

2、内边距属性

padding-top: 上边距；

padding-bottom:下边距；

padding-let:左边距；

padding: 上右下左；

注意：
           A、不能有负值

           B、不能同时设置相对的两个边距

可能的值：

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

举例：

padding: 15px;

padding: 30px 20px 10px;

padding: 60px 70px 80px 90px;

结果：

3、外边距属性

其他同内边距相同

margin-top：上外边距

margin-right：右外边距

margin-bottom：下外边距

margin-left：左外边距

margin

4、背景属性

background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

background-color:

值	描述
color_name	规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number	规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent	默认。背景颜色为透明。
inherit	规定应该从父元素继承 background-color 属性的设置。

背景颜色的范围：颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。

background-image ：

值	描述
url('URL')	指向图像的路径。
none	默认值。不显示背景图像。
inherit	规定应该从父元素继承 background-image 属性的设置。

background-position：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"center"。

默认值：0% 0%。

x% y%

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

xpos ypos

第一个值是水平位置，第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。

background-repeat ：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-attachment ：

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

5、阴影属性

属性	描述
box-shadow	向一个元素添加一个或多个阴影。
text-shadow	在文本中添加一个或多个阴影。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>#img1{border-radius: 50%; /*圆形*/}#img2{padding: 20px;/*内边距*/border-radius: 50%;border:1px solid red;/*边框线的粗细 样式 颜色*/box-shadow:5px 5px 10px 2px blueviolet inset,5px 5px 10px 2px blueviolet inset;}
p{width: 300px;height: 300px;border-style:solid;border-image-source: url(../images/77.jpg);border-image-width: 40px;border-image-slice: 33%;/**/border-image-outset: 0; /*设置边框量*/border-image-repeat: repeat;/*设置图片是否平铺*/
}
</style>
<body>
<img src="../images/20140226145913694ab.jpg" alt="" id="img1">
<br><br>
<img src="../images/99.jpg" alt="" id="img2">
<p></p>
</body>
</html>

CSS三大模块(一)：盒子模型相关推荐

CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
2022年7月28日（CSS三大特性、盒子模型）
目录一.CSS的三大特性 1.1 层叠性 1.2 继承性--简化代码行高的继承 1.3 优先级二.盒子模型 2.1 盒子模型盒子模型的组成: (1)边框(border) (2)内边距(padd ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
前端之CSS篇(三)——CSS三大特性及盒子模式和边距边框
1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性.继承性.优先性 1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题. ...
CSS页面布局之盒子模型
目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表格的细线边框 1.5 边框会影响盒子实际大小 1.6 内边距(padding) 案例:新浪 ...
CSS入门三、盒子模型
零.文章目录 CSS入门三.盒子模型 1.网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
CSS基本知识之盒子模型
CSS基本知识之盒子模型首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...

CSS三大模块(一)：盒子模型

前言：

一、盒子模型

1、盒子模型的内容

2、盒子模型的总宽度和总高度

二、盒子模型的相关属性