目录
一、标签显示模式（display）
（一）、什么是标签显示模式
顾名思义就是标签以什么样的方式进行显示，比如div会自己显示一行，span一行可以显示多个，那如果我们想把div在一行内显示多个如何去做，那就需要用到display显示模式了。而display显示模式有以下几种类型：
（二）、块级元素（block-level）
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
1.常见的块级元素有
div h1-h6 p ul li ol br hr，其中div是典型的块级元素。
2.块级元素的特点：
（1）会独占一行。
（2）可以设置宽度高度。
（3）块级元素里面可以容纳任意的元素和内容。
（三）、行内元素（inline-level）
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
1.常见的行内元素有
span input a b i s u，其中span是典型的行内元素。
2.行内元素的特点：
（1）不会独占一行。
（2）不可以设置宽度高度。
（3）行内元素里面只能容纳文本和图片和其他的行内元素。
（四）、行内块元素（inline-block）
对块元素进行转换，把块级元素转换为在一行内显示，是较为常用的标签显示模式。
1.行内块元素有几个特殊的：
img和input 可以对它们设置属性，这是比较特殊的两个。
2.行内块元素的特点：
（1）不会独占一行。
（2）可以设置宽度高度。
（3）块级元素里面可以容纳任意的元素和内容。
（五）、标签显示模式转换语句
块转行内：display:inline;
行内转块：display:block;
块、行内转换为行内块：display:inline-block;
代码示例：
<!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>
span{
font-size: 30px;
}
.s1{
color: white;
display: inline-block;
}
</style>
</head>
<body>
<div>
<div class="s1">首页</div>
<div class="s1">新闻</div>
<div class="s1">游戏</div>
<div class="s1">角色</div>
<div class="s1">世界</div>
</div>
</body>
</html>结果示例：
二、背景样式
（一）、背景颜色
1.设置盒子背景的颜色：background-color
代码示例：
<!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>
.s1{width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（二）、背景图片
设置背景的图片：background-image
注意这里会自动默认铺满整个盒子。
代码示例：
<!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>
.s1{width: 100px;
height: 100px;
background-image: url(./images/ditu.jpg /*这里填写的属性为图片的地址*/);
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（三）、图片的重复方式
1.不平铺no-repeat 不改变背景大小
background-repeat: no-repeat;
2.横向平铺
background-repeat: repeat-x;
3.纵向平铺
background-repeat: repeat-y;
代码示例：
<!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>
.s1{
width: 200px;
height: 200px;
background-image: url(./images/ditu.jpg);
background-repeat: repeat-x;
/* background-repeat: no-repeat; 不平铺*/
/* background-repeat: repeat-y; 纵向平铺*/
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（四）、图片位置
设置背景图片的位置：background-position
代码示例：
<!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>
.s1{
width: 200px;
height: 200px;
background-image: url(./images/ditu.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
/* 此处的属性值分别为：水平位置 垂直位置 */
/* 也可用百分比表示：50% 50% */
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（五）、图片附着
|
属性名
|
background-attachment
|
|
属性值
|
scroll | fixed
|
|
默认值
|
scroll
|
|
描述
|
设置背景图像是否固定或者随着页面的其余部分滚动。
|
（四）、简写属性
|
属性名
|
background
|
|
属性值
|
color image repeat attachment position
|
|
默认值
|
每个属性的默认值
|
|
描述
|
设置背景图像是否固定或者随着页面的其余部分滚动。
|
代码示例：
<!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>
.s1{
border: 1px solid red;
width: 200px;
height: 200px;
background: red url(./images/ditu.jpg) no-repeat 100px 100px fixed;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
三、盒子模型
（一）、盒子边框（border）
|
属性
|
作用
|
|
border-width
|
定义边框粗细，单位是
px
|
|
border-style
|
边框的样式
|
|
border-color
|
边框颜色
|
可以设置盒子不同方向不同的边框样式。
代码示例：
<!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>
.s1{
width: 200px;
height: 200px;
border-top: 5px solid yellow;
border-bottom: 5px double blue;
border-left: 5px dashed red;
border-right: 5px dotted green;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（二）、border的三角形原理
当我们减小盒子的宽高时，边框的形状会发生改变而当元素降低到0时，边框就会变成三角形。然后我们可以通过设置边框为透明，来实现三角形。
代码示例：
<!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>
.s1{
width: 0px;
height: 0px;
border-top: 20px solid rgba(255, 255, 0, 0);
border-bottom: 20px solid rgba(0, 0, 255, 0);
border-left: 20px solid blue;
border-right: 20px solid rgba(0, 128, 0, 0);
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
（三）、圆角边框（radius）
radius可以让你设置元素的外边框圆角，当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
语法格式：
border-radius: 左上角 右上角 右下角 左下角;
代码示例：
<!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>
.s1{
width: 100px;
height: 100px;
border: 2px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
<div class="s1"></div>
</div>
</body>
</html>结果示例：
四、总结
今天周一周一，这一周才刚刚开始啊........我累了 0.0 毁灭吧！！！！！！
扫一扫
315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
