前端三件套之CSS（二）

一、定位

二、显示隐藏元素有3种写法：

三、CSS高级技巧

1.精灵图也称CSS精灵技术、CSS Sprites、CSS雪碧

2.文字图标：某些图标通过文字代码形式显示。

3.CSS三角

4.CSS用户界面样式：1）鼠标的表示样式 2）文本域禁止拖拽与取消表单轮廓

5.vertical-align实现行内块元素/行内元素与文字垂直居中。

6.单行/多行文字溢出用省略号显示（多行的需要考虑兼容性，故交给后端人员处理更好。）

7.常见布局技巧：

一、定位

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="data: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

2、iconfont-阿里巴巴矢量图标库

<!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="data: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="data: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>