CSS（2）-优快云博客

本文链接：https://blog.youkuaiyun.com/augenstern416/article/details/144435743

1.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

解决办法，可以设置浮动float:left;

不想浮动的话在ul用font-size:0去掉空白；

ul使用font-size:0 唯一的缺点就是要再次设置LI的font-size

2.overflow scroll时不能平滑滚动的问题怎么处理？

当设置div宽度，里面的内容不设置宽度时候；

使用overflow: scroll是上下滚动，左右不滚动；设置内部的元素p超过父级的宽度；

然后设置overflow: scroll是上下和左右都有滚动条；分别设置就可以了

overflow-x:scroll;

overflow-y:hidden;

或者设置overflow后，在单独设置；

overflow:auto;

overflow-y:hidden;

3.引入样式表CSS的方式有几种？分别是什么？优先级有什么不同

🌕

一：内联式/行内样式：使用该属性可以直接指定样式，当然，该样式仅能用于该元素的内容，对于另一个同名的元素则不起作用。
二：嵌入式（style）：用户可在HTML文档头部定义多个style元素，实现多个样式表。
三：外部引用式（link）
- ①可以在多个文档间共享样式表，对于较大规模的网站，将CSS样式定义独立成一个一个的文档，可有效地提高效率，并有利于对网站风格的维护。
- ②可以改变样式表，而无需更改HTML文档，这也与HTML语言内容与形式分开的原则相一致。
- ③可以根据介质有选择的加载样式表。
四：导入样式表：@import url(“css/base.css”);

优先级:就近原则

内联式>内嵌式>外部引用式>导入样式表

4.解释下CSS sprites，以及您要如何在页面或网站中使用它

一、CSS sprites的详细介绍

原理：将多个小图像（如图标、装饰性图像等）合并成一个较大的图像文件。
优势：
减少HTTP请求，减轻服务器负载，提高缓存效率，简化维护

二、如何在页面或网站中使用CSS sprites

创建sprites图像：使用图像编辑软件（如Adobe Photoshop、GIMP等）或在线工具（如CSS Sprites Generator）将多个小图像合并成一个大图像。
定义CSS：
- 为每个需要显示sprites图像的元素设置background-image属性，指向sprites图像。
- 使用background-position属性来定位显示图像的哪一部分。
- 可以设置width和height属性来指定显示图像的尺寸。
HTML应用：
- 在HTML中，为需要显示sprites图像的元素添加相应的类名或ID。
- 通过CSS选择器来应用定义好的sprites样式。
测试和优化：
- 在不同的浏览器和设备上测试页面，确保sprites图像能够正确显示。
- 根据测试结果对sprites图像和CSS进行调整和优化。

三、示例代码

假设我们有一个包含三个图标的sprites图像，我们想要在网页上使用这些图标：

/* 定义一个类，设置背景图像和尺寸 */
.icon {
  width: 32px; /* 图标的宽度 */
  height: 32px; /* 图标的高度 */
  background-image: url('spritesheet.png'); /* sprites图像 */
  display: inline-block;
}

/* 定义每个图标的位置 */
.icon-home {
  background-position: 0 0; /* 定位第一个图标 */
}

.icon-about {
  background-position: -32px 0; /* 定位第二个图标 */
}

.icon-contact {
  background-position: -64px 0; /* 定位第三个图标 */
}

<!-- 使用类来应用不同的图标 -->
<div class="icon icon-home"></div>
<div class="icon icon-about"></div>
<div class="icon icon-contact"></div>

5.为什么要初始化CSS样式？

浏览器默认样式差异，一致的布局和样式，避免意外的样式继承，减少调试时间

6.px和em,rem有什么区别？

px 是像素，em 是相对单位(取决于元素自身或者父元素)，rem是根元素（html元素）字体大小单位

7.PNG\GIF\JPG的区别及如何选

图像质量：如果图像质量至关重要，且对文件大小没有严格要求，可以选择PNG格式。如果需要存储和传输大量图像，且对图像质量有一定容忍度，可以选择JPG格式。
文件大小：如果需要在网络上传输或存储大量图像，且对图像质量要求不高，可以选择JPG格式。如果需要在保持图像质量的同时减小文件大小，可以选择PNG格式，并适当调整压缩比率。
透明度：如果需要图像具有透明背景或需要实现半透明效果，可以选择PNG格式。如果只需要简单的透明效果或不需要透明背景，可以选择GIF或JPG格式。
应用场景：根据具体的应用场景来选择合适的图像格式。例如，在网页设计中，可能需要使用PNG格式来保持图像质量和透明度；在社交媒体中分享照片时，可以选择JPG格式来减小文件大小并提高加载速度。

🌕