目录
1.精灵图 也称CSS精灵技术、CSS Sprites、CSS雪碧
4.CSS用户界面样式：1）鼠标的表示样式 2）文本域禁止拖拽与取消表单轮廓
5.vertical-align实现行内块元素/行内元素与文字垂直居中。
6.单行/多行文字溢出用省略号显示（多行的需要考虑兼容性，故交给后端人员处理更好。）
一、定位
1.盒子可自由在某个盒子内移动
定位的效果有 2.盒子可固定在屏幕的某个位置
3.盒子可以压住某个盒子
定位产生的原因：标准流和浮动（可使多个块盒子在同一行无缝隙排列）都无法实现以上3种效果。
注意，经常用到子绝父相。（子元素用绝对定位，父元素用想对定位。）
定位 = 定位模式 +边偏移
1.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
/* 静态定位，实际上就是标准流，和没有设置的一样。 */
.static1 {
position: static;
width: 200px;
height: 200px;
background-color: rgb(140, 245, 3);
}
.static2 {
width: 200px;
height: 200px;
background-color: rgb(245, 51, 3);
}
/* 相对定位，特点：1.相对自己原本的位置而变化移动；2.不脱标，不管怎么动原来的位置都不会被后面的元素顶替。 */
.box1 {
position: relative;
top: 100px;
left: 180px;
width: 200px;
height: 200px;
background-color: aquamarine;
}
.box2 {
width: 200px;
height: 200px;
background-color: rgb(61, 35, 179);
}
/* 绝对定位。性质：
1.若没有祖先元素或祖先元素没有定位，则以浏览器（document文档）为准定位。
2.若祖先元素有定位（相对、绝对、固定定位），则以最近一级的祖先元素为准移动
3.脱标（绝对定位不占原来的位置）
*/
/* A */
.grandfather {
position: relative;
/* 此时只有A与C的代码块有定位，且son是father的子元素且是grandfather的“子孙元素”。同时符合性质2。这两例子都是对性质2的举例。 */
width: 500px;
height: 600px;
background-color: rgb(240, 12, 88);
}
/* B */
.father {
/* position: absolute; 此时可以只有B+C的代码块，且要son是father的子元素。此时符合性质2。 */
width: 200px;
height: 300px;
background-color: rgb(199, 211, 90);
}
/* C */
.son {
position: absolute;
/* 写第一个性质的案例，只有C块代码有定位，A与B都没有定位破/A与B代码都不写 */
top: 50px;
right: 30px;
width: 150px;
height: 60px;
background-color: blueviolet;
}
/* 固定定位。1：以浏览器为参考点，固定在某个位置不动。2.脱标 */
.fix {
position: fixed;
top: 30px;
right: 30px;
}
</style>
</head>
<body>
<!-- 静态定位 -->
<div class="static1"></div>
<div class="static2"></div>
<!-- 相对定位 -->
<div class="box1"></div>
<div class="box2"></div>
<!-- 绝对定位。 -->
<div class="grandfather">
<div class="father">
<div class="son">
</div>
</div>
</div>
<!-- 固定定位 -->
<div class="fix">
<img src="images/girl.jpg" alt="">
</div>
</body>
</html>2.在版芯左右的广告类固定代码 （ 一种前端小算法：具体如以下注释 ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.W {
width: 800px;
height: 1300px;
background-color: blanchedalmond;
margin: 0 auto;
}
.advertisement {
position: fixed;
/*固定定位*/
/* 1.左距离先把设置为浏览器的一半，此时也刚好是版心中间。 */
left: 50%;
/* 2.设置左外边距，大小为版心宽度的一半 */
margin-left: 400px;
width: 50px;
height: 60px;
background-color: blue;
}
</style>
</head>
<body>
<div class="advertisement"></div> <!-- 广告窗口，必须写在版心前。 -->
<div class="W">版心</div>
</div>
</body>
</html>3.粘性定位：相对定位+固定定位 ，
即以浏览器可视窗口为参考点移动位置（固定定位）+占有原先位置（相对定位）
且必须有top、left、bottom、right中至少一个才有效，但是IE不兼容，所以少用粘性定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 3000px;
}
.nianxing {
position: sticky;
top: 0;
width: 800px;
height: 50px;
margin: auto;
background-color: cadetblue;
}
</style>
</head>
<body>
<!-- 粘性定位 -->
<div class="nianxing">
</body>
</html>4.总结
5.定位的叠放顺序： {z-index：数值} ；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位叠放顺序</title>
<style>
.box {
position: absolute;
/*可以是相对/绝对/固定定位 */
}
.order1 {
top: 10px;
left: 30px;
width: 400px;
height: 500px;
background-color: cadetblue;
z-index: 1;
/* 定位顺序代码，数值可以是正整数、负整数、0，默认auto。必须有定位，才能用此代码，数值越大，位置越上 */
}
.order2 {
top: 50px;
left: 80px;
width: 400px;
height: 500px;
background-color: rgb(49, 31, 218);
z-index: 3;
}
.order3 {
top: 80px;
left: 100px;
width: 400px;
height: 500px;
background-color: rgb(165, 14, 77);
z-index: 2;
}
</style>
</head>
<body>
<div class="box order1">1</div>
<div class="box order2">2</div>
<div class="box order3">3</div>
</body>
</html>6.定位特性的拓展，其中有第2个小算法，具体如特性2及其解释（实际与第1个算法相似）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位特性拓展</title>
<style>
/* 特性1.绝对定位，脱标，是不占有原来位置的，故该盒子下的语句或其他标准流会直接顶替原来的位置，故文字会被遮住 */
/* .box {
position: absolute;
top: 0;
width: 100px;
height: 500px;
background-color: cadetblue;
} */
/* 1.相比浮动，浮动虽然也脱标，也不占有原来的位置，但是他原先就是为设置文字效果而产生，所以浮动后，盒子不会压住文字，而是并排完整显示。 */
.box {
float: left;
width: 100px;
height: 500px;
background-color: cadetblue;
}
/* 特性2.另一个前端小算法：绝对定位的盒子居中算法 */
.center {
position: absolute;
/* 1.先给盒子绝对定位 */
top: 50%;
/* 2.使盒子相对父级元素的垂直位置的一半 */
margin-top: -100px;
/* 只是上边框居中，所以需要调整位置，用外边距调整，大小设置为本盒子对应大小（高度）的一半 */
left: 50%;
/* 2.使盒子相对父级元素的水平位置的一半 */
margin-left: -100px;
/* 只是左边框居中，所以需要调整位置，用外边距调整，大小设置为本盒子对应大小（宽度）的一半 */
width: 200px;
height: 200px;
background-color: #e61313;
}
/* 特性3：设置绝对/固定定位的元素，其元素性质都与原本的相反
如：行内元素可以直接设置高度、宽度（约=块元素），块元素没有设置宽度和高度则直接以文本框形式显示 */
.change {
position: absolute;
background-color: chartreuse;
}
.change span {
position: absolute;
top: 200px;
height: 200px;
width: 300px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box"></div>
<p>离离原上草，一岁一枯荣，野火烧不尽，春风吹又生。</p>
<div class="center"></div>
<div class="change">
<div>盒子设置了绝对/固定定位，大小仅与文字内容一致</div>
<span>行内元素设了绝对/固定定位，添加宽高就直接形成拥有盒子性质。</span>
</div>
</body>
</html>二、显示隐藏元素有3种写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏元素</title>
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
/* 第一种：display（显示隐藏元素。用途：设置元素如何显示，搭配js） none表示隐藏元素；block表示显示元素。且不保留原来的位置（脱标） */
/* display: none; */
/* display: block; */
/* 第二种：visibility（显示隐藏元素。用途同上，但少用）。inherit继承父级元素的可见性。hidden元素隐藏。visible元素可见。但不脱标（保留原位置） */
/* visibility: hidden; */
/* visibility: visible; */
/* 第三种：overflow （溢出显示隐藏元素。用途：当内容溢出给定的高、宽时，按要求隐藏多余的内容。但有用定位的盒子则忌用Hidden，容易被隐藏相关信息。） */
/* overflow: auto; 自动判断，若内容溢出则自动添加滚动条 */
/* overflow: hidden; 若内容溢出给定元素的大小，溢出部分被切掉 */
overflow: scroll;
/* 不管是否溢出，都有横竖两个滚动条。 */
/* overflow: visible; 没有改变任何元素，相当于此句没写 */
height: 200px;
width: 200px;
background-color: aquamarine;
}
.box2 {
height: 200px;
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
哔哩哔哩（NASDAQ:BILI；HKEX:9626 [232] ），英文名称：bilibili，简称B站，现为中国年轻世代高度聚集的文化社区和视频平台，该网站于2009年6月26日创建，被粉丝们亲切地称为“B站” [1-2] 。2018年3月28日，哔哩哔哩在美国纳斯达克上市 [3] 。2021年3月29日，哔哩哔哩正式在香港二次上市 [218] 。
B站早期是一个ACG（动画、漫画、游戏）内容创作与分享的视频网站。 [5-6] 经过十年多的发展，围绕用户、创作者和内容，构建了一个源源不断产生优质内容的生态系统，B站已经涵盖7000多个兴趣圈层的多元文化社区，曾获得QuestMobile研究院评选的“Z世代偏爱APP”和“Z世代偏爱泛娱乐APP”两项榜单第一名并入选“BrandZ”报告2019最具价值中国品牌100强 [2] [7-9] 。
</div>
<div class="box2"></div>
</body>
</html>三、CSS高级技巧
1.精灵图 也称CSS精灵技术、CSS Sprites、CSS雪碧
作用：有效降低服务器接收和发送请求的次数，提高页面加载速度。实际上就是把页面的各种小背景图放在一个大图里，通过代码对大图里相对移动找到该图标并显示。
代码里的图片链接：搜狗图片搜索 - 字母图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精灵图</title>
<style>
span {
display: inline-block;
background: url(images/abc.jpg) no-repeat;
}
.w {
width: 95px;
height: 75px;
background-position: -104px -486px;
}
.o {
width: 80px;
height: 75px;
background-position: -302px -240px;
}
.d {
width: 65px;
height: 76px;
background-position: -311px 0;
}
</style>
</head>
<body>
<h2>精灵图案例。编写wood这个词</h2>
<span class="w"></span>
<span class="o"></span>
<span class="o"></span>
<span class="d"></span>
</body>
</html>2.文字图标：某些图标通过文字代码形式显示。
= 简单图标选文字图标，复杂的用精灵图。
字体图标下载网址：1、Icon Font & SVG Icon Sets ❍ IcoMoon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字图标</title>
<style>
/* 这是icomoon图库的引入方法，阿里巴巴矢量图库的引入方式稍有不同。 */
/* 文字声明，代码来自从icomoon网页下载来的图标压缩包解压后的style.css里的前部分内容 */
/* 要记得将压缩包里的fonts文件夹放到此代码同级文件夹里。 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8gh53h');
src: url('fonts/icomoon.eot?8gh53h#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8gh53h') format('truetype'),
url('fonts/icomoon.woff?8gh53h') format('woff'),
url('fonts/icomoon.svg?8gh53h#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 500px;
color: rosybrown;
}
</style>
</head>
<body>
<span></span> <!-- 此内容为图标的文字显示形式，具体在压缩包里的demo.html里找到想要的图标，点击手机形式图标并复制粘贴到这里即可 -->
</body>
</html>3.CSS三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角做法</title>
<style>
.box1 {
position: absolute;
/*子绝父相 */
left: 150px;
top: -20px;
width: 0;
height: 0;
border: 10px solid transparent;
/* 设一个10像素的正方形，且色彩为透明，边框为实线 */
border-bottom: 10px solid saddlebrown;
/* 将想要显示的小三角形的区块显示出来 */
}
.box2 {
position: relative;
margin-top: 20px;
width: 200px;
height: 200px;
background-color: saddlebrown;
}
</style>
</head>
<body>
<div class="box2">
<div class="box1"></div>
</div>
</body>
</html>
4.CSS用户界面样式：1）鼠标的表示样式 2）文本域禁止拖拽与取消表单轮廓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户界面的样式</title>
<style>
* {
margin: 0;
padding: 0;
}
input,
textarea {
outline: none;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<input type="text"><!-- 表单，每次一点击，边框会显示为蓝色， 通过上面的样式代码取消轮廓。文本域也一样 -->
<textarea name="" id="" cols="30" rows="10"></textarea> <!-- 文本域，右下角有几个斜杆那里可自由拖拽文本域大小，样式代码取消这样的功能 -->
<!-- 鼠标的5种显示样式 -->
<p style="cursor: default;">小白，默认鼠标样式</p>
<p style="cursor: pointer;">小手鼠标样式</p>
<p style="cursor: move;">移动鼠标样式</p>
<p style="cursor: text;">文本鼠标样式</p>
<p style="cursor: not-allowed;">禁止鼠标样式</p>
</body>
</html>5.vertical-align实现行内块元素/行内元素与文字垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块元素/行内元素与文字垂直居中</title>
<style>
img {
vertical-align: middle;
/* 让文字与图片垂直居中 */
}
</style>
</head>
<body>
<img src="images/abc.jpg" alt="">
江山就是人民，人民就是江山。
</body>
</html>应用之：因行内块元素会与文字基线对齐（相当于小学英语作业本那倒数第二条线对齐），故图片底侧会留空白。解决方案有2，提倡1.
1.给图片添加vertical-align:bottom/top/middle;
2.把图片转化为块元素（但是会使得图片独占一行）。
6.单行/多行文字溢出用省略号显示（多行的需要考虑兼容性，故交给后端人员处理更好。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单行/多行文字溢出省略号显示</title>
<style>
/* 单行文字溢出省略 */
.single {
width: 150px;
height: 200px;
background-color: blue;
/* 步骤及其必要条件 */
/* 1.控制文本必须单行显示，nowrap为强制单行显示意思，normal位置不够自动换行 */
white-space: nowrap;
/* 2.溢出部分隐藏 */
overflow: hidden;
/* 3.溢出部分省略号显示 */
text-overflow: ellipsis;
}
/* 多行文字溢出省略（建议留给后端处理） 有兼容性问题，适用webKit浏览器或移动端（多为webkit内核的移动端）。*/
.double {
width: 300px;
height: 200px;
background-color: rgb(73, 218, 16);
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒子对象的子元素排列方式。 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<!-- 单行文字的溢出显示 -->
<div class="single">一生所爱隐约在白云外，苦海翻起爱恨，在世间难逃避命运。——卢冠廷《一生所爱》</div>
<div class="double">
去讲心中理想，不会俗气，情感有若行李，仍然沉重，待我整理。
——陈奕迅《岁月如歌》
下起雨也要勇敢前进，我相信一切都会平息，我现在好想回家去，天黑黑，欲落雨。
——孙燕姿《天黑黑》
</div>
</body>
</html>7.常见布局技巧：
1.margin负值应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见布局巧妙应用</title>
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid orange;
margin-left: -1px;
/* 使边框往左移动1px，使得后面的边框恰好压住前面的边框，避免因浮动而重叠边框产生更大像素的边框。 */
}
/* ul li:hover {
1. 若盒子没有定位，则用相对定位（保留位置）提高盒子层级
position: relative;
border: 1px solid rgb(0, 255, 55);
} */
ul li:hover {
/* 2.若盒子有定位，则用z-index提高层级（有定位才能用z-index） */
z-index: 1;
border: 1px solid rgb(0, 255, 55);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>2.文字围绕浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见布局应用2</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 320px;
height: 95px;
background-color: aquamarine;
margin: 0 auto;
}
.pic {
padding: 5px;
/* 使照片在盒子中居中显示，具体像素看盒子大小 */
float: left;
width: 150px;
height: 92px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/tupian.jpg" alt="">
</div>
<p>
It's a happy day.
</p>
</div>
</body>
</html>3.行内块元素的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块元素</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 32px;
height: 32px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 32px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
</li>
</ul>
</div>
</body>
</html>
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
