一、今日学习内容：
1、固定定位 fixed
固定定位是元素固定于浏览器可视区域的位置，主要使用场景实在浏览器页面中某个元素需要固定在页面的某个位置上，不随屏幕的滚动而滚动。
特点：
1）、以浏览器的可视窗口为参照点，移动元素。
不跟父元素有任何关系，不随滚动条滚动
2）、固定定位不再占有原来位置
2、sticky粘性定位
position：sticky
粘性定位是为了网页中的元素达到一定的边偏移条件时停止随屏幕滚动的效果。
特点：
1）、以浏览器的可是窗口为参照点
2）、脱标，不占有位置
3、定位总结：
定位模式：
static 不脱标 没有边偏移
relative 不脱标 可以，相对于自身原来的位置 常用
absolute 脱标 最近一级有定位的父元素，，以浏览器 常用
fixed 脱标 浏览器的可是区域 常用
sticky 脱标 浏览器的整个区域，使用right需要设置body的宽度 一般
定位的叠放次序
可以使用z-index来控制盒子的前后顺序，z是网页里面的z轴
z-index：正整数，负整数，0 默认是auto
数值越大越靠上
属性值想用则按照书写顺序，后来居上
数字后面不加单位
只有定位盒子才有z-index属性
4、定位的拓展：
绝对定位的盒子居中
没办法用margin：0 auto进行水平居中。但可以通过计算来实现
left：50%让盒子移动到父级元素的水平中心位置。
margin-left：-自身宽度的一般 负值
垂直居中同理
定位的特殊性：
1、行内元素元素添加绝对或者固定定位，可以直接设置宽高
2、块级元素添加绝对定位或者固定定位，如果不给宽高，默认是本身内容的带下。
脱标的盒子不会触发外边距塌陷问题
浮动、定位、固定定位 都不会触发外边距塌陷问题
绝对定位和固定定位会完全压住盒子
浮动脱标不会压住文字，但是定位脱标会压住文字
/5、元素的显示和隐藏
display显示与隐藏
属性值 none隐藏元素 bolock显示元素
display隐藏元素后不占原来的位置，后期经常与js在一起用
visibility显示与隐藏
属性值有hidden 隐藏 visible 元素可见
隐藏后还要占原来的位置
overflow溢出显示与隐藏
overflow：visible 不剪切也不加滚动条
overflow：hidden 隐藏超出的部分
overflow scroll 不管内容是否超出，都添加滚动条
overflow auto 超出高度显示滚动条，不超出不显示
6、css的其他技巧：
精灵图：
多张小图片整合到一张图片返回给浏览器。减轻服务器的压力
使用步骤：
获取投标的大小，
设置一个设置来放我们需要小图标呢，尺寸和我们所需要的大小一致。
将背景图片引入，利用background position调整位置，显示我们所需要的图标。
注意x轴和y轴的像素值一般都是负值，最大是0
鼠标样式:
cursor:default 默认的鼠标样式
cursor：pointer 小手
cursor：text 输入文本时候的鼠标样式
cursor;move 拖动时 的鼠标样式
cursor：not-allowed 禁止的鼠标样式
对齐方式：
目的是为了让行内元素行内块按照不同方式来对齐。
vertical-align 属性可以设置元素的对齐方
vertical-baseline 基线对齐
vertical-aligin：middle 居中对齐
vertical-align：top 顶部对齐
vertical-align：bottm 底部对齐
图片底线的空白原因：图片默认是和文字基线对齐，所以下方式给文字底部的预留空间
想让文字和图片中线对齐，用vertical-align：middle
css的三角制作
设置边框的宽度和样式，颜色设为透明。
将所需要的边框衍射设置为所需的颜色即可。
css的省略号制作
将文字强制一行展示
输入框删除外框：
outline：none；
文本域取消拖拽
resize：none；
将超出的文字切掉。
将切掉的文字用省略号来代替。
css滑动门的制作。
步骤：
精灵图实现滑动门的左边，
span标签来实现精灵图的右边
指定的padding来撑开盒子
|
