7-盒子模型

const_w

已于 2023-01-31 13:33:37 修改

阅读量862

点赞数

文章标签： css html 前端

于 2020-12-21 08:34:34 首次发布

本文链接：https://blog.csdn.net/w_45678910/article/details/111411118

版权

1. 盒子模型

盒子模型就是在HTML中盛装元素内容的容器。
每个盒子模型都由元素的内容（content）、内边距（padding）、边框（border） 和 外边距（ margin） 组成。

在这里插入图片描述

div标记

<div>标记是一个块容器标记。
可以将网页分割为独立的部分，实现网页的规划和布局。
大多数HTML标记都可以嵌套在div标记中，div中还可以嵌套多层div标记。
div可以替代大多数的块级文本标记。

盒子的宽和高

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

2. 盒子模型相关属性

2.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: 图片路径裁切方式 / 边框宽度 / 边框扩展距离重复方式;

border-style 边框样式

border-style: solid;  /* 四边均为实线 */
border-style: solid dotted;  /* 上下实线，左右点线 */
border-style: solid dotted dashed;  /* 上实线，左右点线，下虚线 */

border-width 边框宽度

border-width: 5px;  /* 四边宽度均为5像素 */
border-width: 5px 3px;  /* 上下边框5像素宽度，左右边框3像素宽度 */
border-width: 5px 3px 4px;  /* 上边框5像素宽度，左右边框3像素宽度 下边框4像素宽度 */

注!!!
在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。
注意：常用取值单位为像素。

border-color 边框颜色

border-color: #f00;  /* 四边均为红色 */
border-color: #f00 #00f;  /* 上下红色，左右蓝色 */
border-color: #f00 #00f #0f0;  /* 上红色，左右蓝色，下绿色 */

派生了4个边框颜色属性

border-top-colors
border-right-colors
border-bottom-colors
border-left-colors

p{
    border-style: soild;
    border-width: 10px;
    -moz-border-top-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors: #a0a #909 #808 #707 #606 #505 #404 #303;
}
/* 对段落文本<p>添加渐变边框效果 */

border 边框综合属性
border-top: 上边框宽度样式颜色;
border-right: 右边框宽度样式颜色;
border-bottom:下边框宽度样式颜色;
border-left: 左边框宽度样式颜色;
border: 四边宽度样式颜色;

border: 宽度，样式，颜色
注意：三者顺序任意，不分前后

border-radius 圆角边框
圆角边框属性是CSS3新增属性，其基
本语法格式：border-radius: 参数1/参数2
值得一提的是，border-radius属性同样遵循值复制的原则，其水平半径(参数1)和垂直半径(参数2)均可以设置1-4个参数值，用来表示四角圆角半径的大小。
border-image 图片边框

在网页设计中，有时需要对区域整体添加一个图片边框，运用CSS3中的border-image属性可以轻松实现这个效果。

border-image: border-image-source border-image-slice/border-image-width/ border-image-outset border-image-repeat;

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

2.2. 边距属性

内边距（内填充）
padding-top:上边距;
padding-right: 右边距;
padding-bottom:下边距;
padding-left: 左边距;
padding: 四边内边距;

padding: 5px  /* 四个方向内边距为5像素宽度 */
padding: 5px 3px  /* 上下内边距为5像素，左右内边距为3像素 */
padding: 5px 3px 4px  /* 上内边距为5像隶，左右内边距为3像未，下内边距为4像素 */

注意:内边距padding不允许使用负值

外边距（margin）
margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距
margin-left: 左外边距;
margin: 四边外边距;

margin: 5px  /* 四边外边距为5像素宽度 */
margin: 5px 3px /* 上下外边距为5像素，左右外边距为3像素 */
margin: 5px 3px 4px  /* 外边距:上为5像素，左右为3像素，下为4像素 */
注意：和内边距不同，外边距margin允许使用负值

当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。

margin: 0 auto /*利用margin实现块元素水平居中 */
margin: 5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距 */

内外边距清除
为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。

*{
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}

2.3. box-shadow属性

实现阴影的添加

基本语法格式：
box-shadow: 像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;

参数值	说明
像素值1	表示元素水平阴影位置，可以为负值(必选属性)
像素值2	表示元素垂直阴影位置，可以为负值(必选属性)
像素值3	阴影模糊半径( 可选属性)
像素值4	阴影扩展半径，不能为负值(可选属性)
颜色值	阴影颜色(可选属性)
阴影类型	内阴影(inset) / 外阴影(默认) (可选属性)

也可以改变阴影的投射方向以及添加多重阴影效果。

box-shadow: 5px 5px 10px 2px #999 inset, -5px -5px 10px 2px #333 inset;

2.4. box-sizing属性

box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下:

box-sizing: content-box/border-box;

content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding
border-box：当定义width和height时，border 和padding的参数值被包含在width和height之内。

3. 背景属性

background-color设置网页元素的背景颜色
网页元素中的背景颜色用background-color属性来设置：颜色值（例：red,yellow），#十六进制色值（例：#ccc），rgb(r,g,b)
background-image设置网页元素的背景图像

body{
    background-color: #ccc;
    background-image: url();
}

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

RGBA模式RGBA模式：rgba(r,g,b,alpha);
alpha的值为0-1

例如：使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景。
p{ background-color:rgba(255,0,0,0.5);}

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

background-repeat设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。

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

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%:图像右下角与元素的右下角对齐，而不是图像充满元素。

background-attachment设置背景图像固定

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

background-size设置背景图像大小background-size: 属性值1 属性值2;

属性值	说明
像素值	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto
百分比	以父元素的百分比来设置背景图像的宽度和高度.第一个值设置宽度，第二个值设置高度。如果只设置个值，则第二个值会默认为auto
cover	把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背最图像的某些部分也许无法显示在背最定位区域中
contain	把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

background-origin设置背景的显示区域background-origin: 属性值;
在上面的语法格式中，background-origin 属性有三种取值：

padding-box :背景图像相对于内边距区域来定位。
border-box:背景图像相对于边框来定位。
content-box.背景图像相对手内容框来定位

background-clip设置背景图像的裁剪区域background-clip: 属性值;
在语法格式上，background-clip 属性和background-origin属性的
取值相似，但含义不同：

border-box : 默认值，从边框区域向外裁剪背景
padding-box : 从内边距区域向外裁剪背景
content-box : 从内容区域向外裁剪背景

设置多重背景图像
在CSS3中，通过background-image、background-repeat、background-position 和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。
例如:

background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);

background 背景复合属性
CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。

background:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]
[background-size]
[background-clip]
[background-origin];

使用背景图像属性定义列表样式
list-style是一个复合属性，用于控制列表项目符号的样式。在实际网页制作过程中，为了更高效地控制列表项目符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。

4. CSS3渐变属性

4.1. 线性渐变

在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的background-image:linear-gradient (参数值) ;样式可以实现线性渐变效果。
background-image:linear-gradient(渐变角度，颜色值1,颜色值2....颜色值n); linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。

渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键词。
颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。

4.2. 径向渐变

径向渐变是网页中另一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。运用CSS3中的background-image:radial-gradient (参数值) ;样式可以实现径向渐变效果
background- image:radial-gradient(渐变形状圆心位置，颜色值1,颜色值2...颜色值n); radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。

渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。
圆心位置用于确定元素渐变的中心位置，使用“at"加上关键词或参数值来定义径向渐变的中心位置。
“颜色值1”表示起始颜色， “颜色值n"表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。