一、今日学习内容1、CSS定位
position:fixed(固定定位)
概念：固定定位是元素固定于浏览器可视区域的位置，主要使用的场景：在浏览器页面某个元素需要固定在一个位置，不随屏幕滚动而滚动
特点：
1、以浏览器可视窗口为参照点
不跟父元素有关系
不随滚动条滚动
2、固定定位不在占有原来的位置（脱标）
position：sticky（粘性定位）
概念：是为了网页中元素达到一定的变偏移条件是，停止屏幕滚动效果
特点：
1、以浏览器德克士窗口为参照点移动元素
2、不占有位置（脱标）
定位的叠放次序
定位模式 是否脱标 移动位置 是否常用
static 不脱标 不能使用变偏移 很少
relative 不脱标 相对自身原来位置进行唯一 常用
absolute 脱标 相对于最近一级的有定位的父元素，如果父元素都没有，那么以浏览器为标准
属性
fixed 脱标 浏览器的可视区域 常用
sticky 脱标 浏览器的可视区域 很少
可以使用z-index来控制盒子的前后顺序（网页中的Z轴）
数值可以使正整数、负整数、0，默认是auto，数值越大，月考上
如果数值相同按照书写顺序，后来者居上
数字后面不加单位
只有定位的盒子才有Z-index属性
定位的拓展
绝对定位的盒子居中
加了绝对定位的盒子不能使用margin:0 auto；来水平居中，但可以通过计算来实现
1、left：50%；然盒子的左侧移动到父级元素的水平中心位置
2、margin-left：-150px；让盒子向左移动自身宽度的一半
3、垂直同理
定位的特殊性
1、行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
2、块级元素添加绝对定位或者固定定位，如果不给宽高，默认大小是内容本身的大小
脱标的盒子不会触发外边距塌陷的问题
浮动且对定位/固定定位，元素都不会触发外边距塌陷的问题
2、元素的显示和隐藏
display：显示与隐藏
属性值：
none：隐藏对象
block：显示对象
display隐藏后不占原本的位置，后期经常与JS在一起使用
visibility：显示与隐藏
属性值：
hidden：隐藏
visible：元素可见
visibility属性用于指定一个元素的显示与隐藏
使用visibility：hidden来隐藏元素时，元素仍然占有原来的位置
overflow：益处显示与隐藏
属性值
visible：显示（不剪切也不添加滚动条）
hidden：将超出盒子部分隐藏掉
scroll：给盒子添加滚动条（不管内容超没超出父盒子高度都会显示滚动条）
auto：给盒子添加滚动条（文本超出父盒子高度则显示滚动条，没超出的话不会显示）
3、CSS其他技巧
1、精灵图
为什么要用精灵图
多张笑的图片整合成一张大的图片给返回给浏览器，避免重复请求，减轻服务器压力
精灵图的使用步骤
1、获取所需要的小图标大小
2、设置一个盒子来放我们需要的小图片，尺寸和我们做需要的小图标大小一致
3、background-image：URL（）；将背景引入盒子
4、利用background-position来调整背景图片的位置，已显示我们所需要的图标，注：X和Y轴的像素值一般都是负值，最大是0
2、鼠标的样式
属性 样式
cursor：default 默认的鼠标样式
cursor：pointer 小手鼠标样式
cursor：text 输入文本时的鼠标样式
cursor：move 鼠标拖动时的样式
cursor：no-allowed 禁止的鼠标样式
3、文本的上下对齐方式
vertical-align目的：为了让行内元素或者行内块元素按照不同的方式来进行对齐
文字的各个线说明
顶线、中线、基线、底线
vertical-align：基线对齐（默认）
vertical-align：底部对齐
vertical-align：中线对齐
vertical-align：顶线对齐
备注：
图片的地步有空白的原因：图片默认和文字保持基线对齐，所以下方空白是为了给文字底部预留的空间
想让图片与文字沿中线对齐，可以直接使用verticalalign：middle；来实现
输入框删除外框：
代码：border:0;
删除内边框： outline: none;
CSS三角制作
制作三角的步骤：
1、设置边框的宽度，样式、颜色设置为透明
2、将所需要的边框亚瑟设置为所需要的即可
CSS省略号制作：
步骤：
1、将文字强制一行显示
2、将超出盒子的文字给切掉
3、姜切掉的文字用省略号来代替
CSS滑动门制作
步骤：
1、a标签来实现精灵图左边
2、span标签来实现精灵图的右边
3、指定padding来城开盒子
|
