一、今日学习内容
1.定位（1）position:fixed;（固定定位） （2）position:sticky;（粘性定位）
特点：1、以浏览器的可视窗口为参照点移动元素 不跟父元素有任何关系 不随滚动条滚动 2、固定定位不再占有原来的位置（脱标）
粘性定位特点 1、以浏览器的可视窗口为参照点移动元素 2、不占有位置（脱标）
2.定位叠放次序
可以使用z-index来控制盒子的前后顺序（网页里的Z轴） 数值可以是正整数、负整数、0，默认值是auto，数值越大，越靠上 如果属性值相同，则按照书写顺序，后来者居上 数字后面不加单位 只有定位的盒子才有z-index属性
3.定位的拓展：绝对定位的盒子居中
加了绝对定位的盒子不能听过margin:0 auto; 水平居中，但可以通过计算来实现
脱标的盒子不会触发外边距塌陷的问题
浮动、绝对定位/固定定位 元素都不会触发外边距塌陷的问题。
3.定位的拓展：绝对定位的盒子居中 加了绝对定位的盒子不能听过margin:0 auto; 水平居中，但可以通过计算来实现 脱标的盒子不会触发外边距塌陷的问题 浮动、绝对定位/固定定位 元素都不会触发外边距塌陷的问题。4.元素的显示和隐藏 （1）display：none/block （2）visibility：visible/hideen （3）overflow：visible/hidden/scroll/auto
5.CSS其他技巧
（1）精灵图
步骤：a.获取所需要的小图标大小b.设置一个盒子来放我们需要的小图标，尺寸和我们所需的小图标大小一致c.background-image：url（）；将背景图片引入盒子d.利用background-positionlai 来调整背景图片的位置，以显示我们所需要的图标，注意，x和y轴的像素值一般都是负值，最大是0
（2）输入框删除外框outline:none;
（3）（4）文本域取消拖拽 resize:none;
（5）鼠标样式 cursor：default/pointer/text/move/not-allowed
（6）对齐方式vertical-align：baseline/bottom/midddle/top
（7）CSS三角制作
步骤1、设置边框的宽度，样式，颜色设置为透明
2、将所需要的边框的颜色设置为所需的颜色即可
（8）CSS省略号制作
步骤：1、while-space：nowrap；
2、overflow：hidden；
3、text-overflow：ellipsis；
（9）CSS滑动门制作
步骤1、a标签来实现精灵图的左边
2、span标签来实现精灵图的右边
3、指定padding来撑开盒子即可
二、今日问题
今日课程已掌握
三、解决方案
今日课程已掌握
|
