本文详细介绍了CSS中的position属性，包括relative、absolute、fixed和sticky定位，以及z-index的用法。此外，还讲解了如何添加省略号来实现文本截断效果，CSSSprite（CSS雪碧图）的概念及其优势。同时，探讨了CSS中的vw、vh单位和em单位的使用，并回顾了HTML的一些常见标签如link、meta、文本标签等。
Web前端——CSS基础三
文章目录
一、position定位
position特性
css中position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
position取值
position取值为static（默认）、relative、absolute、fiexed、sticky
1、relative相对定位
1）语法格式
M{position:relative; left: px; right: px; top: px; bottom: px;}
例如：向右向下各偏移100px——M{position:relative; left:100px; top:100px; }
2)特性
①如果没有定义偏移量（left、top、right、bottom），对元素本身没有影响
②不使元素脱离文档流
③不影响其他元素布局
④left、top、right、bottom是相对于当前元素进行偏移的。例如向右偏移：left：+ px或者right:- px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{width:100px; height:100px; background:red;}
/*使得box2向右向下各偏移100px*/
#box2{width:100px; height:100px; background:lightblue; position:relative; left:100px; top:100px;}
#box3{width:100px; height:100px; background:greenyellow;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</body>
</html>
运行结果：
2、absolute绝对定位
1）语法格式
M{position: absolute; left: px; top: px; right: px; bottom: px;}
2)特性
①使元素完全脱离文档流
②使内联元素支持宽高（让内联具备块特性）
③使块元素默认宽根据内容决定（让块具备内联的特性）
④如果祖先元素有定位，那么相对于祖先元素发生偏移。祖先元素没有定位，则相对于整个文档发生偏移（绝对、相对、固定）
1° 祖先元素没有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{width:400px; height:400px; border:1px red solid;}
#box2{width:100px; height:100px; background:red; position:absolute; right:0; bottom:0;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
运行结果：
2° 祖先元素有定位
<style>
#box1{width:400px; height:400px; border:1px red solid; position:absolute;}
#box2{width:100px; height:100px; background:red; position:absolute; right:0; bottom:0;}
/*其他代码跟楼上一致*/
</style>
运行结果：
3、fixed固定定位
1）语法格式
M{position:fixed; right: px; bottom: px;}
2）特性
①使元素完全脱离文档流
②使内联元素支持宽高（让内联具备块特性）
③使块元素默认宽根据内容决定（让块具备内联的特性）
④相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{height:2000px;}
#box1{width:400px; height:400px; border:1px red solid; position:relative;}
#box2{width:100px; height:100px; background:red; position:fixed; right:0; bottom:0;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
运行结果（浏览器滚动条拉到最下面）：
4、sticky黏性定位
sticky黏性定位：在指定位置，进行黏性操作
语法格式
M{position:sticky; top: px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{height:2000px;}
div{background:red; position:sticky; top:20px;}
</style>
</head>
<body>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
<div>这是一个块</div>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
</body>
</html>
运行结果（拖动滚动条至三分之一的位置处）：
5、z-index定位
默认层级为0，数值越大优先级越高
如果嵌套的时候，子类元素的优先级根据父类元素的优先级决定
语法格式
M{position:absolute; z-index:整数值;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent{width:100px; height:100px; border:1px black solid; position:absolute; z-index:1;}
#box1{width:100px; height:100px; background:red; position:absolute; z-index:0;}
#box2{width:100px; height:100px; background:blue; position:absolute; left:50px; top:50px; z-index:2;}
</style>
</head>
<body>
<div id="parent">
<div id="box1"></div>
</div>
<div id="box2"></div>
</body>
</html>
运行结果：
二、添加省略号
把多行文字，变成有限长度的一行，并且在后面加省略号。
具体步骤
1、width：必须有一个固定的宽
2、white-space：nowrap：不让内容折行
white-space属性是用来定义元素内的空白该如何处理。
nowrap取值：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
3、overflow：hidden：隐藏溢出的内容
4、text-overflow:ellipsis：添加省略号
text-overflow属性规定了当文本溢出包含元素时所发生的事情。
取值：
clip:修剪文本
ellipsis:显示省略号来代替被修剪的文本
string:使用给定的字符串来代表被修剪的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{width:300px; border:1px black solid;/*设置固定宽*/
white-space:nowrap;/*让内容折行*/
overflow:hidden;/*隐藏溢出的内容*/
text-overflow:ellipsis;/*添加省略号*/
}
</style>
</head>
<body>
<div id="content">测试代码测试代码测试代码测试代码
测试代码测试代码测试代码测试代码测试代码测试代码
</div>
</body>
</html>
运行结果：
三、CSS Sprite（CSS雪碧/CSS精灵）
特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载·
好处
1、可以减少图片的质量，网页的图片加载速度快
2、减少图片的请求的次数，加快网页的打开
四、CSS圆角设置
1、语法格式
border-radius:
2、可选值数量
如果在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。
如果要在四个角上一一指定，遵循使用以下规则：
①一个值： 四个圆角值相同
②两个值：左上&右下 右上&左下
③四个值：左上 右上 右下 左下（顺时针方向）
<style>
#box{width:300px; height:300px; background:red;
border-radius:50% 20px;/*左上&右下：50% 右上&左下：20px*/
}
</style>
运行结果：
五、CSS拓展
1、vw、vh
根据屏幕百分比来计算显示使用的像素值，100vw表示占屏幕宽度100%，主要用于移动端开发，适配不同大小的屏幕
2、font-size、em
font-size：用于定义字体单位长度的像素值
em：1em等于1个font-size的的长度
好处：统一了长度的大小，可以只改变font-size，就改变了所有的元素大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*每行显示五个文字*/
#div1{font-size:16px; width:5em; height:100px; background:red; }
</style>
</head>
<body>
<div id="div1">这是一个块这是一个块这是一个块这是一个块这是一个块这是一个块</div>
</body>
</html>
运行结果：
六、HTML常用标签复习
1、link标签
作用：引用外部资源
属性：rel、href
主要功能：引入CSS、网页图标等
<!--引入外部css
stylesheet定义引入的格式为样式表
href属性表示引入的链接（地址）
-->
<link rel="stylesheet" href="css/index.css" />
<!--引入外部css
icon定义引入的格式为网页的图标
href属性表示引入的链接（地址）
-->
<link rel="icon" href="./img/tb.png" />
2、meta标签
功能：定义页面的文本编码类型、定义窗口大小对应的显示模式
<!--定义编码类型为UTF-8-->
<meta charset="UTF-8" />
<!--
name="viewport"表示的是定义窗口视图的情况
content="width=device-width, initial-scale=1.0"
width=device-width：表示根据设备的视图宽度调整网页宽度
initial-scale=1.0：表示设置浏览器首次加载到页面时的初始缩放级别。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3、文本类标签
<p></p>:表示一个段落
<i></i>：表示斜体文本
<span></span>：用于定义单独样式（使用css定义）
<strong></strong>：表示文本粗体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{background:red;}
</style>
</head>
<body>
<p>这是一个段落</p>
<i>斜体的文本</i><br>
<strong>粗体的文本</strong><br>
<span>这是span的内容</span>
</body>
</html>
运行结果：
4、其余标签
video：标签定义视频，比如电影片段或其他视频流
audio：标签定义声音，比如音乐或其他音频流
canvas：用来处理图片、绘制图像等功能，是使用JavaScript操作图像的技术，HTML5中的新标签
echarts库：用来制作图表的技术。
扫一扫
2265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
