CSS定位
CSS定位用于确定元素在页面上的位置，更加灵活的改变盒子在网页中的位置。
定位模式：position：(static, relative, absolute, fixed, sticky)xx
边偏移属性：偏移方向：偏移值
- left
- right
- top
- bottom
定位的使用场景
- 相对定位：用于小范围的元素位置调整。
- 绝对定位：常用于创建复杂的布局，如模态窗口、下拉菜单等。
- 固定定位：用于创建固定在视口中的导航栏或工具栏。
- 粘性定位：常用于创建滚动时固定在顶部的导航栏。
静态定位
静态定位是默认的定位方式，如果一个元素没有指定定位属性，那么它就是静态定位。
（静态定位的元素不会受到 top、bottom、left 和 right 属性的影响。）
.static {
position: static;
}
相对定位
相对定位的元素是基于其正常位置进行移动。使用 top、bottom、left 和 right 属性可以设置元素相对于其原始位置偏移多少。
属性值：position: relative
使用场景：很少单独使用相对定位，一般都是与拆塔定位方式配合使用。
特点：
- 不脱标，占用自己原来的位置
- 他和
margin的区别：就是使用margin会影响到其他的盒子，但是使用相对定位就不会影响到其他盒子。
- 他和
- 显示模式特点保持不变
- 设置边偏移则相对自己原来的位置移动
.relative {
position: relative;
top: 20px;
left: 30px;
}
注意⚠️：相对定位的元素仍然在文档流中，它原来的空间会被保留。
绝对定位
绝对定位的元素相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，那么它相对于 <html> 元素进行定位。绝对定位的元素会脱离文档流。
属性值：position: absolute
使用场景：子级绝对定位，父级相对定位。（子绝父相）
特点：
- 脱标，不占位
- 显示模式具备行内块特点
- 设置边偏移则相对尊敬的已经定位的祖先元素改变位置
- 如果祖先元素都没有定位，则相对于浏览器可视区（
<html>）改变位置。
.absolute {
position: absolute;
top: 50px;
right: 100px;
}
子绝父相实现垂直水平居中
定位的盒子垂直居中是不能用
margin:0 auto来实现垂直居中。可以使用负偏移来实现。
但是有一个问题，当值是一个非整数的时候，为了实现精确值，就不能使用上面的负偏移来实现了。
这里就引用到了
transform来做，这样就直接用百分之自动转换出来了。transform:translate(-50%,-50%)
⚠️注意：如果没有给绝对定位添加偏移，就不会移动。
虽然脱标，但是没有偏移量，所以还是固定在原位置。
固定定位
固定定位类似于绝对定位，但它是相对于浏览器窗口进行定位。即使页面滚动，固定定位的元素也会保持在相同的位置。
.fixed {
position: fixed;
top: 0;
left: 0;
}
属性值：position: fixed
特点：
- 脱标，不占位
- 显示模式具备行内块特点
- 设置边偏移相对浏览器窗口改变位置
实现顶部导航栏
//给header属性添加固定定位 .header { position:fixed; top:0; left:0; width:100% height:100px box-shadow:0 5px 5ps rgba(0,0,0,0.2); //加个阴影更有效果 } //下面的内容区要添加一个100px的顶部外边距，因为固定定位是脱标的，所以要一个外边距将其撑开。 .box{ margin-top:100px; }
粘性定位
粘性定位是相对和固定定位的混合体。
一个粘性定位的元素在滚动到其指定的偏移之前，表现得像相对定位。一旦达到指定的偏移，它就会固定在那个位置，表现得像固定定位。
属性名：position: sticky
.sticky {
position: sticky;
top: 0;
}
层级效果
作用：设置定位元素的层级顺序，改变定位元素的显示顺序。
z-index: 设置元素的堆叠顺序，数值越大，元素越在顶层。
特点：
- 根据标签的书写顺序排列，越往后层叠越高。
- 数字越大，层级越高
定位总结
| 定位模式 | 属性值 | 是否脱标 | 显示模式 | 参照物 |
|---|---|---|---|---|
| 相对定位 | relative | 否 | 保持标签原有的显示模式 | 自己原来的位置 |
| 绝对定位 | absolute | 是 | 行内块特点 | 1. 已经定位的祖先元素 2.浏览器可视区 |
| 固定定位 | fixed | 是 | 行内块特点 | 浏览器窗口 |
CSS高级
CSS精灵(雪碧图)
CSS精灵也叫CSS Sprites，是一种网页图片应用处理方式，把网页中的一些背景图片整合在一张图片文件中，再使用background-position精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。
使用步骤：
- 创建盒子，盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加
backgtound-positiond属性，改变背景图位置
字体图标
透明度opacity
作用：设置整个元素的透明度（包括背景和内容）
属性名：opacity
属性值：0——1
- 0：完全透明（元素不可见）
- 1：不透明
- 0——1之间：半透明
光标类型cursor
作用：鼠标悬停在元素上的时候指针显示样式
属性名：cursor
属性值：
default：默认值，通常是箭头pointer：小手效果，提示用户可以点击text：选择效果，提示用户可以选择文字move：十字光标，提示用户可以移动not-allowed：禁止符号，提示用户不可以点击
显示和隐藏属性
属性名：dispaly
作用：隐藏盒子的时候，原先的位置会空出来（不占位置）【经常使用】
属性值：
-
block：显示
-
none：隐藏
属性名：visibility
作用：隐藏盒子的时候，原先的位置不会空出来（占据原来的位置）【不常使用】
属性值：
-
visible：显示
-
hidden：隐藏
表格样式
表格属性：<tr>表示行，<td>表示列。
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
给表格添加边框样式：
table{
width:100px;
height:100px;
margin:0 anto;
border:1px solid red;
}
我们会发现这个边框样式只给整个表格的表框添加了样式，但是单元格里面没有样式。
给单元格添加样式：
table,tr,td{
border:1px solid red; //将上面的表框样式图案复制下来到这里
}
这个是时候单元格的样式就出来了。
但是⚠️还是有不理想的地方，那就是每个单元格之间还是有空隙的。
合并相邻的两个边框，使用到以下CSS语句：
border-collapse:collapse;
铛铛~😆，这个是时候就没有缝隙啦🥳。
文字溢出显示省略号
在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。
CSS中文字溢出显示省略号（通常是三个点 “…”）是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。
方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！
-
设置不允许换行，强制文字一行显示
white-space:nowrap; -
设置溢出隐藏
overflow:hidden; -
设置文字溢出用省略号代替
text-overflow:ellipsis;
这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(o)/~
.text-overflow{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个:hover伪类，让鼠标经过的时候显示全。就像这样👇：
这个就更简单啦！只需要在<a>标签下添加一个title属性就可以了。
<a href="#" title="阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴"> </a>
渐变色
线性渐变：
background-image:linear-gradient(red,green);
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
