CSS教程

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

 

前言：

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 值。

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三大模块(一)：盒子模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航