2024年HarmonyOS鸿蒙最新日常开发CSS小技巧整理_待开发 css(2)，2024年最新鸿蒙面试题2024pdf

最新推荐文章于 2024-08-07 17:04:54 发布

2401_84862354

最新推荐文章于 2024-08-07 17:04:54 发布

阅读量890

点赞数 16

分类专栏：程序员文章标签：鸿蒙面试学习

本文链接：https://blog.csdn.net/2401_84862354/article/details/138832803

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

// 多列展示时
.wrap {
height: 210px;
line-height: 30px;
text-align: justify;
writing-mode: vertical-lr; /*从左向右*/
writing-mode: tb-lr; /*IE从左向右*/
//writing-mode: vertical-rl; /*-- 从右向左*/
//writing-mode: tb-rl; /*-- 从右向左*/
}


6.禁止用户选择

.wrap {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


7.使用硬件加速  
 有时候动画可能会导致用户的电脑卡顿，你可以在特定元素中使用硬件加速来避免这个问题  
 transform: translateZ(0)；  
 translateZ变成3d效果，走GPU渲染；2d是软件渲染


8.将一个容器设为透明

.wrap {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}


9.消除transition闪屏

.wrap {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}


10.自定义滚动条

overflow-y: scroll;
//整个滚动条
::-webkit-scrollbar {
width: 5px;
}

//滚动条的轨道
::-webkit-scrollbar-track {
background-color: #ffa336;
border-radius: 5px;
}

//滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #ffc076;
border-radius: 5px;
}


11.让 HTML 识别 string 里的 ‘\n’ 并换行

body {
white-space: pre-line;
}


12.实现一个css图标

//三角形
.wrap {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
//梯形
.wrap {
width: 25px;
height: 25px;
overflow: hidden;
font-size: 0;
line-height: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent rgb(46, 205, 245) transparent;
}
//实现箭头
. arrow {
position: absolute;
}
. arrow:before,. arrow:after{
position: absolute;
content: ‘’;
border-top: 10px transparent solid;
border-left: 10px transparent solid;
border-right: 10px transparent solid;
border-bottom: 10px #fff solid;
}
. arrow:before{
border-bottom: 10px #0099CC solid;
}
. arrow:after{
top: 1px; /*覆盖并错开1px*/
border-bottom: 10px #fff solid;
}


13.使用CSS显示链接之后的URL

a:after{content:" (" attr(href) ") ";}


14.修改input输入框中光标的颜色不改变字体的颜色

input{
color: #fff;
caret-color: red;
}


15.修改input 输入框中 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;
}


16.子元素固定宽度 父元素宽度被撑开

// 父元素下的子元素是行内元素
.wrap {
white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.wrap {
white-space: nowrap; /* 子元素不被换行*/
display: inline-block;
}


17.实现宽高等比例自适应矩形

<style>

.scale {
width: 100%;
padding-bottom: 56.25%;
height: 0;
position: relative;
}

   .item {
       position: absolute; 
       width: 100%;
       height: 100%;
       background-color: 499e56;
   }   
</style> 
<div class="scale">
        <div class="item">
            这里是所有子元素的容器
        </div>
</div>


18.transfrom的rotate属性在span标签下失效

span {
display: inline-block
}


19.边框字体同色

.wrap {
width: 200px;
height: 200px;
color: #000;
font-size: 30px;
border: 50px solid currentColor;/*或者 border: 50px solid; // 实现二*/
}


**20.让一个盒子的高度自适应屏幕剩余的部分**  
 要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条

HTML结构暂且如下：

nav

content

 方法一：

#main{height:100vh;}
/*或者 #main{height:100%;} */
.container{
height:calc(100vh-50px); /*或者 height:calc(100%-50px);*/
overflow-y:auto;
}
方法二：
#main{height:100%;}

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！