CSS进阶班笔记(四)，【工作感悟】

最新推荐文章于 2024-04-20 19:17:52 发布

Java独家笑

最新推荐文章于 2024-04-20 19:17:52 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/m0_60607783/article/details/120112945

版权

程序员专栏收录该内容

58 篇文章 0 订阅

订阅专栏

 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),

 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),

 url('fonts/icomoon.woff?7kkyc2') format('woff'),

 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

 font-weight: normal;

 font-style: normal;

}




3.  html标签内添加小图标

    

    我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进我们的 `<span></span>`标签中

    



![在这里插入图片描述](https://img-blog.csdnimg.cn/b54ee91dd0b74854a8afcce8b1bf37fb.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



4.  给标签定义字体

/span使用字体图标/

span {

font-family: “icomoon”;

}




![在这里插入图片描述](https://img-blog.csdnimg.cn/d03f4bec9701491ea0ecc0bd69d89f5a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



注意：标签中的 `font-family` 的值和我们之前引入字体图标的`font-family` 必须一样，这里均为 icomoon



5.  完成，所以我们的整体代码为：

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    @font-face {

        font-family: 'icomoon';

        src: url('fonts/icomoon.eot?7kkyc2');

        src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

        font-weight: normal;

        font-style: normal;

    }

    

    span {

        font-family: "icomoon";

    }

</style>

<div>

    <span> </span>

</div>




测试效果为：



![在这里插入图片描述](https://img-blog.csdnimg.cn/fac058a088f2454ba22fcb0c99ee679d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



[]( )2.3、字体图标的追加🔥

-------------------------------------------------------------------------------



*   如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

*   以 icomoon字库 网为例，点击网站内`import icons`

*   把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。



![在这里插入图片描述](https://img-blog.csdnimg.cn/136b1488a4cb4233ad7ff77f5f9deb44.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



[]( )2.4、字体文件格式

----------------------------------------------------------------------------



不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。



.ttf 格式、.woff 格式、.eot 格式、.svg 格式，不同浏览器支持不同的格式



![在这里插入图片描述](https://img-blog.csdnimg.cn/ec0439450c03456483a147d5b0eafef5.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



[]( )2.4、字体图标总结

----------------------------------------------------------------------------



1.  如果遇到一些结构和样式比较简单的小图标，就用字体图标

2.  如果遇到一些结构和样式复杂一点的小图片，就用精灵图



[]( )3、界面样式🔥

==========================================================================



所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。



*   更改用户的鼠标样式

*   表单轮廓

*   防止表单域拖拽



[]( )3.1、鼠标样式cursor🔥

----------------------------------------------------------------------------------



鼠标样式`cursor`



*   设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

li {

cursor: pointer;

}




| 属性值 | 描述 |

| --- | --- |

| default | 小白，默认 |

| pointer | 小手 |

| move | 移动 |

| text | 文本 |

| not-allowed | 禁止 |



[]( )3.2、轮廓线outline🔥

----------------------------------------------------------------------------------



轮廓线`outline`：



*   给表单添加 `outline:0`; 或者`outline: none`;样式后，就可以去掉默认的蓝色边框

input {

outline: none;

}




[]( )3.3、防止拖拽文本域

-----------------------------------------------------------------------------



防止拖拽文本域`resize`

textarea {

resize: none;

}




[]( )4、vertical-align🔥

====================================================================================



`vertical-align`:



*   使用场景：经常用于设置**图片**或者**表单（行内块元素）**和**文字垂直对齐**。

*   官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于**行内元素**或者**行内块元素**有效

vertical-align: baseline | top | middle | bottom




| 值 | 描述 |

| --- | --- |

| baseline | 默认，元素放置在父元素的基线上 |

| top | 把元素的顶端与行中最高元素的顶端对齐（顶线对齐） |

| middle | 把此元素放置在父元素的中部（中线对齐） |

| bottom | 把元素的顶端与行中最低的元素的顶端对齐（底线对齐） |



![在这里插入图片描述](https://img-blog.csdnimg.cn/2f7832a64527405181bd3edbcd3a736a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



[]( )4.1、图片、表单和文字对齐🔥

----------------------------------------------------------------------------------



图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。



![在这里插入图片描述](https://img-blog.csdnimg.cn/159dbd0d98f941f5b17eb713341d3c64.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 `middle` 就可以让文字和图片垂直居中对齐了。



[]( )4.2、 图片底侧空白缝隙解决🔥

-----------------------------------------------------------------------------------



*   bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）



![在这里插入图片描述](https://img-blog.csdnimg.cn/6ab28389075f4478a70a11cae3e5a58e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0F1Z2Vuc3Rlcm5fUVhM,size_16,color_FFFFFF,t_70#pic_center)



主要解决办法有两种：



1.  给图片添加 `vertical-align : middle | top |bottom` 等

    

2.  把图片转换为块级元素 `display:block;`，因为块级元素不会有`vertical-align` 属性

    



[]( )5、溢出文字省略显示🔥

==============================================================================



[]( )5.1、单行文本溢出省略号显示🔥

-----------------------------------------------------------------------------------



必须满足三个条件：

/* 1.先强制一行内显示文本 */

white-space: nowrap; /默认 normal 是自动换行，nowrap是强制一行显示文本/

/* 2.超出的部分隐藏 */

overflow: hidden;

/* 3.文字用省略号替代超出的部分*/

text-overflow: ellipsis;

/ellipsis:省略号/




[]( )5.2、多行文本溢出显示省略号显示

-----------------------------------------------------------------------------------



多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webKit内核)

overflow: hidden;

text-overflow: ellopsis;

/* 弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 限制在一个块元素显示的文本的行数 */

-webkit-line-clamp: 2;

/* 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient : vertical;




更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。



[]( )6、常见布局技巧🔥

============================================================================



[]( )6.1、margin负值的运用🔥

-----------------------------------------------------------------------------------



*   两个盒子加边框1px，浮动，贴紧会出现 1 + 1 = 2px


### 最后

即使是面试跳槽，那也是一个学习的过程。只有全面的复习，才能让我们更好的充实自己，武装自己，为自己的面试之路不再坎坷！**今天就给大家分享一个Github上全面的Java面试题大全，就是这份面试大全助我拿下大厂Offer，月薪提至30K！**

**[CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】](https://codechina.csdn.net/m0_60958482/java-p7)**

**我也是第一时间分享出来给大家，希望可以帮助大家都能去往自己心仪的大厂！为金三银四做准备！**
一共有20个知识点专题，分别是：

#### Dubbo面试专题
![](https://img-blog.csdnimg.cn/img_convert/70cb44711b14009988a9d50a45674943.png)

**JVM面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/344599f679d02ba35493a5f471880590.png)

**Java并发面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/3f894dad4c1f305504665403e99adc51.png)

**Kafka面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/2e1cf9dcfcffd7cb23f8f027c9114633.png)

**MongDB面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/e791ddf760d663e53146042a38303a99.png)

**MyBatis面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/1ea3487520c7656d5a2004cace270140.png)

**MySQL面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/1a5beff4f4a541ee5a6c4c9e1f52a181.png)

**Netty面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/0510da3643f3d0a5bca91b42f079ae64.png)

**RabbitMQ面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/e7b19f44b0c67d174ddc025e7ef85e6c.png)

**Redis面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/0189ffba2627fd6b0cbf8e9420b8379c.png)

**Spring Cloud面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/e116d7d1f74ddae4bcb3e88d30614034.png)

**SpringBoot面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/12bf3f2d9ad097d6c6d5fef7f64b3ca2.png)

**zookeeper面试专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/489683ed416491643f542874d2f0021a.png)

**常见面试算法题汇总专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/59f0541f25423eddafd1e293156f5efa.png)

**计算机网络基础专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/9553e36ffbebdb28330d9e8d93140843.png)

**设计模式专题**

![这个GItHub上的Java项目开源了，2020最全的Java架构面试复习指南](https://img-blog.csdnimg.cn/img_convert/5cb7cb9b5cc3c59e445f1375711d97e4.png)

**Netty面试专题**

[外链图片转存中...(img-RGsmSpoI-1630814853093)]

**RabbitMQ面试专题**

[外链图片转存中...(img-YPwnjhex-1630814853094)]

**Redis面试专题**

[外链图片转存中...(img-QB7xVnKN-1630814853095)]

**Spring Cloud面试专题**

[外链图片转存中...(img-wsP94RTu-1630814853095)]

**SpringBoot面试专题**

[外链图片转存中...(img-qgDxJnLG-1630814853096)]

**zookeeper面试专题**

[外链图片转存中...(img-rT65QJUu-1630814853097)]

**常见面试算法题汇总专题**

[外链图片转存中...(img-H7kpBLND-1630814853097)]

**计算机网络基础专题**

[外链图片转存中...(img-cdaYBufA-1630814853098)]

**设计模式专题**

[外链图片转存中...(img-Hv4dld2I-1630814853098)]

Java独家笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS进阶班笔记(四)，【工作感悟】

src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal.
复制链接

扫一扫