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 | 把元素的顶端与行中最低的元素的顶端对齐（底线对齐） |
4.1、图片、表单和文字对齐🔥
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
4.2、 图片底侧空白缝隙解决🔥
- bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）
主要解决办法有两种：
-
给图片添加
vertical-align : middle | top |bottom等 -
把图片转换为块级元素
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
-
给右边盒子添加
margin-left: -1px -
正数向右边走，负数向左边走
当我们有多个盒子时的解决办法：
-
让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
-
鼠标经过某个盒子的时候，提高当前盒子的层级即可
-
如果没有定位，则加相对定位(保留位置)
-
如果有定位，则加 z-index
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】]( )**
一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
