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

2021/10/21 23:09:46

编程Tag： 属性模块 css image 设置边框 background border 三大

本文主要是介绍CSS三大模块(一)：盒子模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言：

一、盒子模型

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):显示文本和图像等

CSS æ¡æ¨¡å

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三大模块(一)：盒子模型

前言：

一、盒子模型

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、阴影属性

相关编程文章

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

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

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

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