css一些小技巧

hellowoeld      2022-02-09     645

关键词:

1.元素的垂直水平居中

<style>
.father{
   position: relative;
}
.sun{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>
<div class="father">
   <div class="sun"></div>
</div>

2.强制禁止换行

 white-space:nowrap;

3.超出出现滚动条

<style>
   .slide{
         overflow: auto;
         width: 100%;
    }
</style>
<div class="slide">
</div>

 

2018-05-22css左右布局左中右布局以及一些小技巧

1、左右布局如果有以下html结构,设置左右两栏布局<divclass="parent"><divclass="leftChild"></div><divclass="rightChild"></div></div>设置浮动:左右布局常用的方法就是为子元素设置浮动,然后在其父元素上使用clearfix... 查看详情

css小技巧使用

...垂直水平居中在css的世界里水平居中比垂直居中来的简单一些,经过了多年的演化,依然没有好的方式来让元素垂直居 查看详情

css的几个小技巧(代码片段)

本文收录css设置样式的一些小技巧1.设置文字在块级标签居中(包括水平居中和垂直居中)水平居中方法一:使用text-aligntext-align:center方法二:目标标签的父级标签设置position:relative,目标标签设置margin:auto.parentposition:relative.targe... 查看详情

一些js小技巧

退出forEachtry{vararr=[1,2,3,4];arr.forEach(function(item,index){//跳出条件if(item===3){thrownewError("LoopTerminates");}//dosomethingconsole.log(item);});}catch(e){if(e.message!=="LoopTerminates")throwe;}; 查看详情

css使用小技巧

对于元素position属性中的relativeabsolute页面居中问题/*relative*/div{position:relative;margin:0auto}?/*absolute*/div{position:absolute;left:50%}  查看详情

css一些css技巧(代码片段)

查看详情

记录下最近写前端的一些小技巧(代码片段)

纯CSS实现鼠标指向文字上下滑动HTML代码<spandata-title="首页">首页</span>CSS代码spanposition:relative;display:inline-block;transition:allease-out.3sspan:afterposition:absolute;left:0;width:100%;color:#00C0FF;content:attr(data-title);transform:translateY(100%) 透... 查看详情

css黑魔法小技巧,让你少写不必要的js,代码更优雅(代码片段)

...想到受到了大家的欢迎,有人希望能博主还能整理个CSS的一些黑魔法小技巧,无奈我CSS一直很渣,没什么干货,最近写了一个Chrome插件GayHub,算是把GitHub的样式审查了个变,在写的过程中,也收获了很多关于CSS的小技巧,尤其是... 查看详情

好程序员分享vue的一些小技巧

  好程序员分享Vue的一些小技巧,前言:用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到... 查看详情

idea这个小技巧太实用了。。

...当你在使用IDEA编写项目代码的时候,是否遇到过如下一些情况?与别人沟通,需要简写某个功能的伪代码想记录一些json格式的数据,并且能格式化,即JSON文档功能想记录一些其他语言例如HTML,CSS,SQL... 查看详情

css高频实用小技巧

利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round - 查看详情

前端常用css小技巧

 注意:以下前缀兼容性写法注释-o-:Opera-ms://IE10-moz://火狐-webkit://Safari4-5,Chrome1-91. 去除iOS移动端input,textarea输入框聚焦时上方内阴影样式input,textarea,select{appearance:none;-moz-appearance:none;//Firefox-webkit-appe 查看详情

vs2017一些小技巧(代码片段)

下面我总结一些VS2017中的一些小技巧这些小技巧,大神的你有可能早就知道了,也有可能我少说了,如果你觉得我写的不对,欢迎在下方进行评论:1.TODO的使用当你编辑代码的时候是不是遇到过,一个地方的代码需要调用另一个... 查看详情

js中的一些小技巧

js数字操作:1.1取整:取整有很多方法如:parseInt(a,10);Math.floor(a);a>>0;~~a;a|0;前面2种是经常用到的,后面3中算是比较偏的,因为其有不足之处,比如将下面代码放到console里测试:varnum=2150000000;console.log(num|0);console.log(parseFloat(num))你会发... 查看详情

css小技巧(代码片段)

1.用css伪元素勾勒出关闭按钮.boxposition:relative;padding:10px;width:200px;height:100px;border:1pxsolid#e1e1e1;&:afterclear:both;content:".";display:block;height:0;line-height:0;overflow:hidden;.closeposi 查看详情

css/js小技巧(代码片段)

js中动态添加的css属性,自动添加前缀,适配当前浏览器letelementStyle=document.createElement(‘div‘).styleletvendor=(()=>lettransformNames=webkit:‘webkitTransform‘,Moz:‘MozTransform‘,O:‘OTransform‘,ms:‘msTransform‘,standar 查看详情

位操作符的一些运算小技巧(代码片段)

位操作符的一些运算小技巧本文主要介绍一些会经常使用到的位操作小技巧。使用位操作符时有以下两点需要注意进行位运算时数据全部是换算为二进制的。位操作符只适用于整形变量,不适合浮点数变量。(本质是由... 查看详情

一些ssh小技巧(代码片段)

本文来自网易云社区。作者:沈高峰ssh经常需要使用的,每次使用都 ssh  [email protected] -p 12138 -i ~/.ssh/id_rsa来一遍显然太麻烦了,下面分享一点使用ssh的小技巧1、客户端配置linux下,ssh会去读~/.ssh/con... 查看详情