盒子模型及其属性

目录

一、盒子的特性

二、盒子模型的相关属性

1.边框属性

2.内边距属性

3.外边距属性

4.背景属性

三、盒子模型新增属性

1.颜色透明度

2.圆角

3.图片边框

4.阴影

5.渐变

---

一、盒子的特性

盒子模型：进行网页布局的重要的属性，一个页面由多个盒子组成，每个盒子的内容都不相同
特性：

(1)外边距(margin)：盒子与其他元素之间的额距离
(2)内边距(padding)：也称为填充距离,内容和边框之间的距离
(3)边框(border)

二、盒子模型的相关属性

1.边框属性

设置内容	样式属性	常用属性值
边框样式	border-style:上边 [右边 下边 左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度	border-width:上边 [右边 下边 左边];	像素值
边框颜色	border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框	border:四边宽度 四边样式 四边颜色;	注意：宽度、样式、颜色顺序任意，不分先后
圆角边框	border-radius:水平半径参数/垂直半径参数;	像素值或百分比
图片边框	border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;

注意：

（1）在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。

注意：常用取值单位为像素。

 （2）

2.内边距属性

注意：
 A、不能有负值
 B、不能同时设置相对的两个边距

3.外边距属性

 注意：

（1）当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中。（margin:0 auto /*利用margin实现元素水平居中）

（2）内外边距清除：

*{
    padding:0;
    margin:0;
}

4.背景属性

A、背景颜色： background-color

B、背景图像： background-image

C、背景图像的平铺属性:background-repeat

平铺属性值	含义
repeat	沿水平和竖直两个方向平铺（默认值）
no-repeat	不平铺（图像位于元素的左上角，只显示一次）
repeat-x	只沿水平方向平铺
repeat-y	只沿竖直方向平铺

D、背景图像的位置属性: background-position

位置属性取值	含义
单位数值	设置图像左上角在元素中的坐标，例如background-position:20px 20px;
预定义的关键字	水平方向值：left、center、right。
	垂直方向值：top、center、bottom。
百分比	0% 0% ：图像左上角与元素的左上角对齐。
	50% 50%：图像50% 50%中心点与元素50% 50%的中心点对齐。
	20% 30%：图像20% 30%的点与元素20% 30%的点对齐。
	100% 100%：图像右下角与元素的右下角对齐，而不是图像充满元素。

E、背景图像的固定属性: background-attachment

固定属性取值	含义
scroll	图像随页面元素一起滚动（默认值）。
fixed	图像固定在屏幕上，不随页面元素滚动。

 F、综合设置：background:背景色 url("图像") 平铺 定位 固定;

盒子的 总宽度 = width + 左右 内边距 之和 + 左右 边框 宽度之和 + 左右 外边距 之和

盒子的 总高度 = height + 上下内边距之和 + 上下 边框 宽度之和 + 上下 外边距 之和

body{
    background-image: url('../images/avatar.png');
    background-repeat: no-repeat;
    background-repeat: repeat-x; 
    background-repeat: repeat-y; 
    background-position: center;
    background-attachment: fixed;  
    background: url('../images/avatar.png') no-repeat center fixed;
    }

三、盒子模型新增属性

1.颜色透明度

通过引入RGBA模式和opacity属性，对背景与图片设置不透明度

p{
    background-color:rgba(255,0,0,0.5);
    opacity：opacityValue;
}

opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。 

2.圆角

border-radius属性可以将矩形边框四角圆角化，实现圆角效果。

border-radius: 50%; /*圆形*/

3.图片边框

属性	说明
border-image-source	指定图片的路径
border-image-slice	指定边框图像顶部、右侧、底部、左侧内偏移量。
border-image-width	指定边框宽度
border-image-outset	指定边框背景向盒子外部延伸的距离。
border-image-repeat	指定背景图片的平铺方式

4.阴影

 box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 outset/inset

5.渐变

“background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。

linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。