本文详细解析了CSS中的盒子模型，包括边框、内边距、外边距属性及其组合，以及背景属性的使用，如背景颜色、图片、平铺、定位和固定。还介绍了CSS3的新特性，如圆角、图片边框、阴影、渐变和多背景图像。此外，文章探讨了HTML元素的类型，包括块元素、行内元素和行内块元素，并阐述了元素类型转换的方法及其在布局中的应用。
进行网页布局的重要的属性，一个页面由多个盒子组成，每个盒子的内容都不相同
1、看透网页布局的本质：
网页布局过程：
- 先追备好相关的网页元素——基本都是盒子（Box）。 【准备好盒子（标签）】
- 利用CSS设置盒子样式，摆放到相应位置 。 【给盒子（标签）设置样式】
- 往盒子里装内容。 【放内容】
2、盒子模型组成
(1)外边距(margin)：盒子与其他元素之间的额距离
(2)内边距(padding)：也称为填充距离,内容和边框之间的距离
(3)边框(border)
(4)内容content)
【top、bottom、left、right】
3、盒子模型的相关属性
(1)边框属性(border)：
为了分割页面中不同的盒子，常常需要给元素设置边框效果。
| 设置内容 | 样式属性 | 常用属性值 |
| 边框样式 | border-style:上边 [右边 下边 左边]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |
| 边框宽度 | border-width:上边 [右边 下边 左边]; | 像素值px |
| 边框颜色 | border-color:上边 [右边 下边 左边]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 综合设置边框 | border:四边宽度 四边样式 四边颜色; | 无顺序 |
| 圆角边框 | border-radius:水平半径参数/垂直半径参数; | 像素值或百分比 |
| 图片边框 | border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式; |
<style>
#d1{
width: 300px;
height: 150px;
border-style: solid dashed dotted double;
border-width: 5px 1px 2px 3px;
border-color: red blue green #bbffaa;
}
#d2{
width: 300px;
height: 150px;
border: 15px solid blue; /* 综合设置 */
border-radius: 15px;
border-image: url('../images/avatar.png');
}
#d3{
border-style:solid;
border-width:10px;
border-top-color:#a0a #909 #808 #707 #606 #505 #404 #303;
border-right-color:#a0a #909 #808 #707 #606 #505 #404 #303;
border-bottom-color:#a0a #909 #808 #707 #606 #505 #404 #303;
border-left-color:#a0a #909 #808 #707 #606 #505 #404 #303;
}
</style>
<body>
<div id="d1"></div>
<br>
<div id="d2"></div>
<br>
<div id="d3">西安邮电大学</div>
</body>例：需要200*200的盒子，上边框红色，其余边框蓝色
div{
width:200px;
height:200px;
border:1px solid blue;
border-top:1px solid red;
}注意： border， border-top 不可颠倒，下边的将上边的覆盖了
所以一般先写大的，后写小的
(2)内边距属性（ padding）：
【top、bottom、left、right】
padding: 5px; 上右下左-5
padding: 5px 10px; 上下-5 左右-10
padding: 5px 10px 20px; 上-5 左右-10 下-20
padding: 5px 10px 20px 30px; 上 右 下 左
注意：不能有负值
(3)外边距属性（margin）：
【top、bottom、left、right】
注意：和内边距不同，外边距margin允许使用负值
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。margin:0 auto /* 利用margin实现块元素水平居中*/
margin:5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/
(4)内外边距清除
为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
(5)背景属性：
A、背景颜色：background-color
background-color:transparent; /*背景颜色 为 透明色*/ 颜色值，例：red、yellow
#十六进制色值，例：#ccc rgb(r,g,b)，例：rgb(30,0,0)
B、背景图像：background-image
(logo、小的装饰图，超大背景)——方便控制位置
background-image：none；
background-image：url(图片地址)； C、背景图像的平铺属性：background-repeat
repeat：默认值,表示沿水平、垂直方向平铺（反复重复）
no-repeat：不平铺,只显示一张图片
repeat-x：沿水平方向平铺
repeat-y：沿竖直方向平铺
D、背景图像的位置属性：background-position
background-position：x y;
a. 参数是方位名词
水平方向值：left、center、right。
垂直方向值：top、center、bottom。
- 无顺序
- 可省，一个默认居中
例：background-position：top left;
background-position：left top;
（效果相同）
b. 精准单位
- 有顺序，第一个一定是X，第二个定是Y 例：background-position：20px 50px;
- 只有一个值，一定是X坐标，另一个Y默认垂直居中
c. 混合单位（精准单位+方位N）
- 有顺序，第一个一定是X，第二个定是Y
E、背景图像的固定属性（背景附着）：background-attachment
| 固定属性取值 | 含义 |
| scroll | 图像随页面元素一起滚动（默认值）。 |
| fixed | 图像固定在屏幕上，不随页面元素滚动。 |
F、综合设置，复合写法：
background:背景色 url("图像") 平铺 定位 固定;
无顺序要求，空格隔开
(6)盒子的宽与高：
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
4、盒子模型的新增属性
(1)背景色半透明属性：
通过引入rgba模式和opacity属性，对背景与图片设置不透明度
background-color:rgba(255,0,0,0.5);
rgba(r,g,b,alpha);
最后一个参数是alpha 透明度，取值0~1间
"0.3"一般把"0"可省，写“.3”
opacity：opacityValue;
opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值
取值范围 0~1之间。0表示完全透明，1表示完全不透明，而0.5则表示半透明。
(2）圆角： border-radius
在网页设计中，经常会看到一些圆角的图形，如按钮、头像图片等，运用CSS3中的border-radius属性可以将矩形边框四角圆角化，实现圆角效果。
需要注意的是，当应用值复制原则设置圆角边框时，如果“垂直半径参数”省略，则会默认等于“水平半径参数”的参数值。此时圆角的水平半径和垂直半径相等。
(3）图片边框：border-image
在网页设计中，我们还可以使用图片作为元素的边框。运用CSS3中的border-image属性可以轻松实现这个效果。
| 属性 | 说明 |
| border-image-source | 指定图片的路径 |
| border-image-slice | 指定边框图像顶部、右侧、底部、左侧内偏移量。 |
| border-image-width | 指定边框宽度 |
| border-image-outset | 指定边框背景向盒子外部延伸的距离。 |
| border-image-repeat | 指定背景图片的平铺方式 |
(4）盒子阴影（不占空间）：box-shadow
在网页制作中，经常需要对盒子添加阴影效果。使用CSS3中的box-shadow属性可以轻松实现阴影的添加。
box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果。
box-shadow：顺序如下
必须：h-shadow (水平阴影的位置。允许负值）X轴 正右负左
v-shadow (垂直阴影的位置。允许负值）Y轴 正下负上
可选：blur (模糊距离，阴影虚实）
spread （阴影的尺寸大小）
color （阴影的颜色）
inset (将外部阴影（默认outset）改为内部阴影)
文字阴影：
text-shadow:h-shadow v-shadow blur color（可选）
(5）渐变
a. 线性渐变
在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。
渐变角度：渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或关键词。
颜色值：颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。
b. 径向渐变
径向渐变同样是网页中一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，按照椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果。
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);
radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。
渐变形状: 渐变形状用来定义径向渐变的形状，其取值即可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。
圆心位置: 圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。
颜色值: “颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。
c.重复渐变
重复线性渐变
在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);
重复径向渐变
在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。
background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);
(6）多背景图像
在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。
例如：
background-image:
url(images/caodi.png),
url(images/taiyang.png),
url(images/tiankong.png);
(7）多背景图像
1、设置背景图像的大小
在CSS3中，新增了background-size属性用于控制背景图像的大小
background-size:属性值1 属性值2;
| 属性值 | 说 明 |
| 像素值 | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| 百分比 | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会默认为auto； |
| cover | 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中； |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域； |
2、设置背景图像的显示区域
运用CSS3中的background-origin属性可以自行定义背景图像的相对位置。
background-origin:属性值;
在上面的语法格式中，background-origin属性有三种取值，分别表示不同的含义，具体解释如下。
- padding-box：背景图像相对于内边距区域来定位。
- border-box：背景图像相对于边框来定位。
- content-box：背景图像相对于内容框来定位。
3、设置背景图像的裁剪区域
在CSS样式中，background-clip属性用于定义背景图像的裁剪区域
background-clip:属性值;
在语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。
- border-box：默认值，从边框区域向外裁剪背景。
- padding-box：从内边距区域向外裁剪背景。
- content-box：从内容区域向外裁剪背景。
5、元素的类型和转换
在使用这些标签的时候，我们会发现有些标签可以设置宽度和高度属性（如p标签），有些标签则不可以（如strong标签）。这是因为标签有着特定的类型，不同类型的标签可以设置的属性也不同。
HTML元素分为：块元素
行内元素
行内块元素
(1）块元素
<h1>—<h6> <p> <li> <ul> <ol> <div>（<div>标签是最典型的块元素。）
特点：
1. 霸道，自己独占一行。
2. 高度，宽度，外边距及内边距 都可以控制。
3. 宽度默认是容器（父级宽度）的100%。
4. 是一个容器及盒子，里面可以放其他元素（行内或块级元素）。
特殊：
文字类的元素内不能使用块级元素
例：<p> 标签主要用于存放文字，因此<p> 里不能放块级元素，特别是不能放<div>
同理， <h1>—<h6>等都是文字类块元素，里不可放块级元素
(2）行内元素
<strong> <a> <b> <em> <u> <span>（<span>标签最典型的行内元素。）
特点：
1. 相邻行内元素在一行上，一行可显示多个。
2. 宽高直接设置是无效的。
3. 默认宽度是它本身内容的宽度。
4. 行内元素只能容纳文本或其他行内元素，内不能放块元素。
特殊：
<a>链接内不能放链接
(3）行内块元素
行内元素有几个特殊标签
<img/> <input/> <td> ，同时具有块、行元素的特点，称为行内块元素。
特点：
1. 和相邻行内元素（行内块）在一行上
但他们间有空白缝隙，行内可显示多个（行内元素特点）。
2. 默认宽度是它本身内容的宽度（行内特点）
3. 高度，宽度，外边距及内边距 都可以控制（块元素特点）
(4）<div>和<span>标签
div标签
div英文全称为“division”，译为中文是“分割、区域”。<div>标签简单而言就是一个块标签，可以实现网页的规划和布局。
1. <div>标记是一个块容器标记。
2. 可以将网页分割为独立的部分，以实现网页的规划和布局。
3. 大多数HTML标记都可以嵌套在<div>标记中，<div>中还可以嵌套多层<div>。
4. 可以替代大多数的块级文本标记。
span标签
span中文译为“范围”，作为容器标签被广泛应用在HTML语言中。和<div>标签不同的是，<span>是行内元素，仅作为只能包含文本和各种行内标签的容器。
1. <span>标记是一个行内标记。
2. <span>与</span>之间只能包含文本和各种行内标记。
3. <span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用。
4. 当其他行内标记都不合适时，就可以使用<span>标记。
(5）元素类型的转换
一个模式的元素需另外一种模式的特性
a. 转换为块元素：display : block;
<style>
a{
width:150px;
height:50px;
background-color:pink;
display:block; /*将行内元素a转化为块级元素*/
}
</style>
<a href='#'> 我是行内元素 <a>b. 转换为行内元素：display : inline;
<style>
div{
background-color:purple;
display:inline; /*将div块级元素转化为行内元素*/
}
</style>
<div> 我是块元素 </div>c. 转换为行内块元素：display : inline-block;
<style>
span{
display:inline-block; /*转化为行内块元素*/
}
</style>
<span> 行内转换为 行内块元素 </span>当两个相邻或嵌套的块元素相遇时，其垂直方向的外边距会自动合并，发生重叠。了解块元素的这一特性，有助于设计者更好地使用CSS进行网页布局。
(6）块元素垂直外边距的合并
a.相邻块元素垂直外边距的合并
b. 嵌套块元素垂直外边距的合并
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
