前端小技巧（一）

最新推荐文章于 2021-07-09 17:59:36 发布

原创最新推荐文章于 2021-07-09 17:59:36 发布 · 178 阅读

CC 4.0 BY-SA版权

本文分享了前端开发中实用的技巧，包括解决边框问题、移动端边框模拟、双波浪线取整、元素居中、AJAX跨域、图片自适应、文字溢出处理、消除li元素间隙、满屏显示、事件绑定、jQuery操作、CSS权重理解及严格模式使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.解决边框问题，内边距和边框在设定商务高宽内部

box-sizing:border-box;

2.移动端模拟1px的边框

box-shadow:0 0 0 1px #ddd;

3.~~双波浪线取整

var str="123.123";
console.log(~~str);    //123

4.垂直居中的思路

transform:translate(-50%,-50%);

display:table-cell;

5.ajax跨域

xhrFields:{withCredentials:true}
crossDomain:true

6.width
前者最大为图片的大小，后者根据父元素自适应

max-width:100%;
width:100%;

7.文字溢出

width:300px; 
white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis;  //溢出部分为省略号

8.li中 inline-block出现40px的空隙

ul{font-size:0;}

9.满屏

<script type="text/javascript" src="fullpage.js"></script>

10.绑定事件

11.jq取值，赋值

$("").attr("");                      //取值
$("").attr("","");                   //赋值

12.权重

13.严格模式

use strict