三、文本换行问题
1.文本不换行
white-space:nowrap;
2.自动换行
word-wrap: break-word;
word-break: normal;
3.强制换行
word-break:break-all;
四、文本两端对齐
背景：固定宽度的容器（宽度大于文本长度），在默认情况下，文本从左往右排列，外观很丑。
结构：
用户名密码
样式：
div{
width: 80px;
border: 1px solid red;
}
图示：
实现文本两端对齐：
div{
width: 80px;
border: 1px solid red;
text-align: justify;
text-justify: distribute-all-lines;/兼容ie6-8/
text-align-last: justify;
-moz-text-align-last: justify;
-webkit-text-align-last: justify;
}
结果：
五、文本竖向排列
使用场景：竖向文字、文言文、诗词
text-align: justify;
writing-mode: vertical-lr;/从左往右/
writing-mode: tb-lr;/兼容ie/
六、禁止用户选择
在默认情况下，一个页面上的文本信息都是可以被选择的，如图：
实现禁止用户选择：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
七、cursor 属性
cursor：pointer; //小手指；
cursor：help; //箭头加问号；
cursor：wait; //转圈圈；
cursor：move; //移动光标；
cursor：crosshair; //十字光标
八、输入框
1.移除高亮轮廓
outline:none;
2.自定义光标颜色
只是光标的颜色，而不是输入文字的颜色。
caret-color:pink;
3.自定义 placeholder 样式
//webkit内核的浏览器
input::-webkit-input-placeholder {
color: #c2c6ce;
}
//Firefox版本4-18
input:-moz-placeholder {
color: #c2c6ce;
}
//Firefox版本19+
input::-moz-placeholder {
color: #c2c6ce;
}
//IE浏览器
input:-ms-input-placeholder {
color: #c2c6ce;
}
4.禁止缩放文本域
文本域默认情况下是允许用户手动缩放的，但是这并不是期望的效果。所以往往需要禁止缩放：
textarea{
resize: none;
}
九、使用 vw 定制自适应布局
通常情况下，我们通过 rem 来实现自适应布局，vw 算是一个比较另类的玩法吧。通过 vw 来实现就是一行代码解决了：
/基于UI width=750px DPR=2的页面/
html{
font-size: calc(100vw / 7.5);
}
十、通过选择器选择特殊位置
场景：表格着色、边界元素排版
结构：一个 ul 下包含8个 li （代码省略）
ul{
width: 300px;
}
li{
padding: 0 20px;
height: 40px;
line-height: 40px;
color: #fff;
}
/odd表示奇数/
ul>li:nth-child(odd){
background-color: pink;
}
/even表示偶数/
ul>li:nth-child(even){
background-color: aqua;
}
/表示第6个元素（包含）以后的所有元素/
ul>li:nth-child(n+6){
background-color: burlywood;
}
/表示最后一个元素/
ul>li:last-child{
background-color: cornflowerblue;
}
/表示第一个元素/
ul>li:first-child{
background-color: lawngreen;
}
结果：
十一、横向列表
使用场景：横向滚动列表、元素过多但位置有限的导航栏。
ul{
width: 300px;/固定宽度/
height: 100px;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;/元素不换行/
overflow-x: auto;/显示水平滚动条/
overflow-y: hidden;
padding: 0;
}
li{
list-style: none;
height: 90px;
line-height: 90px;
width: 90px;
background-color: cornflowerblue;
margin-left: 10px;
color: #fff;
font-size: 16px;
text-align: center;
flex-basis: 90px;
flex-shrink: 0;
}
ul>li:first-child{
margin-left: 0;
}
/自定义滚动条样式/
ul::-webkit-scrollbar{
height: 10px;
}
ul::-webkit-scrollbar-track{
background-color: #f0f0f0;
}
ul::-webkit-scrollbar-thumb{
border-radius: 4px;
background-color: hotpink;
}
结果：
十二、关闭浏览器输入框内容自动补齐
绝大部分的浏览器都实现了 input 历史记录，可以简化输入的麻烦，但是，有时候弹出的下拉框会挡住页面的其他内容，而且在某些时候也不需要对输入框进行记录，所以这时候就需要将它的提示内容关闭掉。
其中，disableautocomplete 是针对 ie 浏览器的；autocomplete 是针对现代浏览器的。
十三、使用伪类校验表单
场景：表单校验
技术要点：通过 pattern 属性指定输入框的正则表达式，伪类 :valid 和 :invalid 校验输入框输入内容。
结构：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
核心竞争力，怎么才能提高呢？
成年人想要改变生活，逆转状态？那就开始学习吧~
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
完整版PDF资料免费分享，只需你点赞支持，动动手指点击此处就可领取了。
前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。
汇总**
JavaScript
性能
linux
前端资料汇总
完整版PDF资料免费分享，只需你点赞支持，动动手指点击此处就可领取了。
前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。
