此篇文章为基础的CSS学习，暂未涉及CSS3的知识点，为本人学习时的笔记记录，同时也适合初学者学习。喜欢的友友可以关注一下，后续会补充JavaScript，TypeScript，vue2.0，vue3.0以及uni框架等等一系列的前端学习文章。（强者不喜请绕道，本人内心脆弱，勿喷）
继续上篇文章的内容，上次说到css的传统布局有三种：
第一种是标准流，在之前的学习中已经多次接触到标准流的知识了；其次是浮动，上一篇的文章中对浮动的知识已经有了较全面的讲解，并且列举了一个小米商城的布局作为案例；那最后一种布局方式就是今天我们要学习的内容，叫做定位布局。
1. 定位
什么是定位呢？定位实际上就是将盒子定在某一个位置，即摆放盒子，按照定位的方式移动盒子（就好比将家具摆放在家里的某个位置一样）。
定位由两部分组成，分别是定位模式和边便宜（即：定位 = 定位模式 + 边偏移）
那么这时候就有靓仔会说了：“啊你说的这么笼统我们怎么知道什么是定位模式什么是边偏移啊？”
说得好，那么现在我们就来仔细说一下组成定位的两部分分别是什么意思。
定位模式：用于指定一个元素在文档中的定位方式，边偏移：决定该元素的最终位置
定位模式有以下四种：
1. static：静态定位
是元素的默认定位，表示没有定位，并且没有边偏移（很少用）语法如下👇
.test{
position: static;
}2. relative：相对定位（重点）
相对定位有以下特点
- 元素在移动位置的时候，相对于它原来的位置来设置
- 原来标准流的位置继续占有，后面的盒子仍以标准流的方式对待（不脱标）
其声明语法如下👇
.test{
position: relative;
}3. absolute：绝对定位（重点）
绝对定位有以下特点
- 绝对定位是元素在位置移动时，相对它祖先元素来设置（若无祖先元素或祖先元素没有定位则以浏览器为准）
- 如果祖先元素有定位且有多个，则以最近一级的祖先元素定位为准
- 绝对定位不再占有标准流位置（脱标）
.test{
position: absolute;
}由于在设置定位时，绝对定位是脱标的，因此需要在该元素的父元素设置相对定位属性，保留标准流属性。 即，子元素设置绝对定位时需要父元素为相对定位。记不住的话可以记下面的口诀：
口诀：子绝父相（父亲需要占有位置，因此需要相对定位保留标准流属性）
顺便补充一个小知识点，加了绝对定位的盒子不再可以使用margin: 0 auto的方式实现水平居中
若是要实现水平居中则需要这样实现👇
.test{
left:50%;
margin-left:-100px; //假设盒子宽度为200px，需要左移盒子一半的宽度
}4. fixed：固定定位（重点）
固定定位可以使元素固定在浏览器可视区的位置，主要使用场景为：浏览器滚动时元素位置不会发生改变。固定定位具有以下特点：
- 以浏览器的可视窗口作为参照移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动而滚动
- 不占有原先位置（脱标）
固定定位的声明语法为👇
.test{
position: fixed;
}2. 定位的叠放顺序
有时候多个元素摆放的时候会出现层叠错误的情况，这个时候就要用到声明定位叠放顺序的语法了。其声明语法如下👇
.test{
z-index: 10;
}该属性的值越大，则层叠的优先级越高。需要注意的是，这条声明语句的属性值是不带单位的。并且这个声明只能在定位的盒子才可以设置。如果多个元素的z-index值都一致时，则后来者居上。（即后声明的优先级更高）
3. 定位的特殊性
绝对定位和固定定位也和浮动类似
- 行内元素添加固定定位或绝对定位，可以直接设置宽高
- 块级元素添加固定定位或绝对定位，若不给宽高则会默认为内容的大小（即不再占据整行）
- 脱标的盒子不会发生外边据坍塌（即外边距合并）
绝对定位会完全压住盒子（包括文字），但浮动元素只会压住下面的标准流盒子，而不会压住标准流内的文字。
以上就为学习完了定位，这下三种布局方式就学习完毕了。需要用到定位布局的情况很多，在我的开发经历中我常常会使用到定位布局的布局方式。因此这是一块很重要的知识点，需要多加练习才能熟悉掌握。
接下来学习的就是新的知识点了：元素显示与隐藏
4. 元素显示与隐藏
有时候往往会出现需要在与用户交互时，发生一些页面的改变：如填写表单结束后需要隐藏表单，或者点击某个按钮时显示某个元素，以及间隔一定时间隐藏广告等等。因此对界面元素的可视操作就需要使用该知识点进行控制。
其实呢，元素的显示与隐藏还不止一种写法，根据不同的情况我们需要使用不同的显示与隐藏方式
下面我们就来了解一下：
1. display显示隐藏（重点）
display：none（隐藏对象，且不再占有原有位置）
display：block（显示元素）
2. visibility显示隐藏
属性值有： inherit（继承上一个父元素的可见性）
visible（可视对象）
hidden（隐藏对象，但继续占有原来的位置）
collapse（隐藏表格的行或列）
3. 对溢出部分进行显示或隐藏
属性值有： visible：溢出部分显示
auto：在需要时添加滚动条（显示不完则自动添加）
hidden：溢出部分隐藏（没有删除）
scroll：溢出部分显示滚动条
4. opacity属性
指定了一个元素的不透明度，其值的范围为0~1，即0%到100%的可视度，语法为👇
.light {
opacity: 0.2;//20%的透明度
}5. CSS的高级技巧
1. 精灵图（又叫雪碧图）
为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术
核心原理：将多张小背景图像整合到一张大图中，则服务器就只需要访问一次请求
精灵图的使用：
移动背景图片位置，此时可以使用background-positon
移动的距离就是目标图片的x和y坐标
需要测量精准的图片和盒子大小
给个案例👇（字母图片自己百度找，此处只展示代码结果）
<!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>
span {
display: inline-block;
}
.a {
width: 30px;
height: 40px;
background:url("OIP.jfif");
}
.i {
width: 30px;
height: 40px;
background: url("OIP.jfif");
background-position: 30px, 0px;
}
.n {
width: 30px;
height: 40px;
background: url("OIP.jfif");
background-position: 120px, 4px;
}
.k {
width: 30px;
height: 40px;
background: url("OIP.jfif");
}
</style>
</head>
<body>
<span class="a"></span>
<span class="i"></span>
<span class="n"></span>
<span class="k"></span>
</body>
</html>2. 字体图标（iconfont）
核心思想：展示的是图标，实质是字体
优点：
- 字体比图像小，加载渲染快，减少了服务器请求
- 兼容所有浏览器
- 灵活性高，可以更改大小颜色等
总结：若结构样式比较简单的就用字体图标，若复杂则用精灵图
字体图标可直接在网上下载，这里推荐一个网址：http://www.iconfont.cn/
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>Document</title>
</head>
<style>
.box {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
</style>
<body>
<div class="box"></div>
</body>
</html>4. CSS用户界面样式
1. 鼠标样式
默认情况下鼠标的样式都是一个箭头，在css内是可以改变鼠标的样式的。语法为👇
li {
cursor: default;
}其中cursor的属性值有：
- default：小白箭头 默认
- pointer：小手
- move：移动
- text：文本
- not-allowed：禁止
为了方便大家直接看结果，这里粘份代码大家可以直接运行看结果：
<!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>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li style="cursor: default;">白色箭头</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">移动样式</li>
<li style="cursor: text;">文本样式</li>
<li style="cursor: not-allowed;">禁止样式</li>
</ul>
</body>
</html>2. 表单轮廓线
给表单添加outline属性值即可去掉默认蓝色边框
语法为👇
input {
outline: none;
}3. 文本域防拖拽
防止文本域被拖拽放大影响到别的盒子
textarea{
resize: none;
}4. vertical-align属性应用
使图片表单文字等属性垂直对齐，但只针对于行内块元素或行内元素
.test{
vertical-align：baseline;
}
可选值有👇
- top 顶部对齐
- middle 中间对齐
- bottom 底部对齐
- 以及上述案例的baseline，基线对齐。
5. 溢出文字部分用省略号显示（重点，常用）
步骤分为：
- white-space：nowrap；（强制一行内显示文本）
- overflow：hidden（超出部分隐藏）
- text-overflow：ellipsis（省略号代替溢出文本）
案例代码如下👇
<!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>
div {
width: 150px;
height: 80px;
background-color:pink;
margin: 100px auto;
/*normal为正常换行，nowrap为强制不换行*/
white-space: nowrap;
/*溢出部分隐藏*/
overflow:hidden;
/*省略号代替*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
哈哈哈哈哈哈哈哈哈哈还好
</div>
</body>
</html>以上就为这篇文章的全部内容了，至此CSS的知识点也总结得差不多了。那是那句话，需要多练才能掌握知识点。下篇文章将更新HTML5和CSS3的知识点，结束HTML和CSS的学习之后，我们就要进入JavaScript语法，typescript语法以及vue框架的学习了，喜欢前端的友友可以关注一下。溜
