Web前端学习课程笔记之HTML+CSS（第五周84~109集）-CSDN博客

本文链接：https://blog.csdn.net/Ghlys/article/details/127845521

四十、CSS定位position

（一）position取值：

static（默认值）
relative相对定位：（84集）

①：如果没有定位偏移量（就是left/top/right/bottom），对元素本身没有任何影响
②：元素不会脱离文档流。
③：对周围元素没有影响。
left、top、right、bottom是对当前元素自身进行偏移。

        #box2{width:100px;height: 100px;background:blue;position:relative;left: 100px;top: 100px;}

absolute绝对定位：（85集）

①：元素脱离文档流。

        #box2{width:100px;height: 100px;background:blue;position:absolute；}
        #box3{width:200px;height: 200px;background:green;}

②：使内联元素支持宽高（让内联具备块特性）

        span{width:100px;height:100px;background-color:yellow ;position: absolute;}

③:使块元素默认宽根据内容决定（是块元素具备内联特性），此时块元素不要设置宽高。

        #box2{background:blue;position:absolute;}

④：left,top,right,bottom是如果有定位祖先元素相对定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移

fixed固定定位：（86集）
①：元素完全脱离文档流
②：使内联元素支持宽高（使内联具备块的特性）
③：使块元素默认宽度根据内容决定（让块具备内联的特性）
④：left,top,right,bottom相对于整个浏览器窗口进行偏移，不受浏览器滚动条影响。（可以用于弹窗与返回顶部）
sticky黏性定位：（86集）
在指定位置进行吸附功能。
只加stikey没有任何影响，但加了left/top/right/bottom:px;后当滚动条接触到文档的指定位置时会不受浏览器滚动条影响。
z-index定位层级
改变元素层级，默认层级为 0，可以设置为负数

        #box1{width:100px;height: 100px;background:red;position:absolute;z-index: -5;}
        #box2{width:100px;height:100px;background:blue;position: absolute;left:50px;top:50px;z-index: -4;}

嵌套时，里面的元素会调节成父元素的层级，你给子元素设置了也没用

用定位实现下拉菜单小练习（87集）
用定位实现元素居中小练习（88集）

四十一、CSS添加省略号

（89集）

实现步骤：

①必须有一个固定的宽：width
②不让内容折行：white-space：nowrap
③ 隐藏溢出内容：overflow:hidden
④添加省略号：text-overflow:ellipsis

        #box2{width:100px;height:100px;border:1px blue solid;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;  }

四十一、CSS雪碧/CSS精灵

（90集）一种网页图片应用处理方式，它允许你将一个网页涉及到的所有零星图片都包含到一张大图中去加载。

好处：
①：可以减少图片的质量，使网页图片加载速度更快
②：减少图片的请求次数，加快网页的打开

四十二、CSS圆角设置

指给标签添加圆角

border-radius：px或%
赋值的含义
①是圆的半径
②当用空格赋两个值时第一个值是左上角和右下角，第二个值是右上角和左下角
③赋四个值时分别是左上，右上，右下，左下
④ 当用/隔开两个值时表示角用椭圆修饰，第一个值是椭圆x轴半径，第二个值是y轴半径
⑤通过给上面两个角设置圆角，下面两个角设置直角可以构造半圆
```
 #box1{width:200px;height: 200px;background:red;border-radius:100px;}
```