CSS样式2-CSDN博客

本文链接：https://blog.csdn.net/m0_70990872/article/details/126082058

CSS样式2

position定位的特性为：
css position属性用于指定一个元素在文档中的定位方式，top、right、bottom、left属性则决定了该元素的最终位置。

position的取值有：
static（默认值）
relative
absolute
fixed
sticky

1.使元素完全脱离文档流；
2.使内联元素支持宽高（让内联具备快的特性）；
3.此块元素默认宽根据内容决定（让块具备内联的特性）；
4.如果有定位祖先元素，相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）。

注：其中祖先元素就是他的父级元素，如果没有绝对定位，那么就相当于文档进行偏移；有，就相当于祖先元素偏移。

1.使元素完全脱离文档流；
2.使内联元素支持宽高（让内联具备块的特性）；
3.使块元素默认宽根据内容决定（让块具备内联的特性）；
4.相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响。
（添加滚动条操作：body{height:2000px;}）

在指定的位置，进行粘性操作。
定位在顶部的时候固定在顶部：

position: sticky; top:0;

1.默认的层级为0；
2.嵌套的时候有层级问题。

width
必须有一个固定的宽。

white-space：nowrap
不让内容折行。

overflow：hidden
隐藏溢出来的内容。

text-overflow：ellipsis
添加省略号

#content{ width:200px;border:1px  black solid; white-space：nowrap; overflow：hidden; text-overflow：ellipsis;}

其特性为CSS雪碧也叫做CSS精灵，是一种网页图片应用的处理方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

好处有：
可以减少图片的数量，网页的图片加载速度会更快；
可以减少图片的请求次数，加快网页的打开。

border-radius：给标签添加圆角
如果是椭圆与容器相切的时候，则：

#box{ width: 300px; height: 300px; background: red; border-radius: 20px/40px;}

vw、vh根据屏幕百分比来计算显示使用的像素值，100vw表示占屏幕宽度100%，主要用于移动端开发，适配不同大小的屏幕。

font-size：用于定义单位长度的像素值；
em：1em等于1个font-size的长度；
其好处是统一了长度的大小，可以只改变font-size，就改变了所有的元素的大小。