如何去除掉inline-block元素之间的默认间距
前几天写一个页面

1
2
3
4
div{width:900px;}
div li{ display:inline-block; width:300px;}

    1

    1

    1

 发现宽度为900px的div居然放不下3个宽度为300px的内联元素li,只好改用了float:left来布局。后来上网一查,才知道inline-block是有默认间距的,默认间距为4px,并且inline也是有默认间距。现在就来盘点一些解决inline-block元素和inline元素之间间距的一些方法:

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

2、设置margin-right为负值,但要考虑上下文的字体和文字大小。

3、先设定子元素字体,再设置父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值,要考虑字体,子元素有文字也要注意设置letter-spacing或word-spacing的值。

5.float:left;

clientX、pageX、offsetX、screenX的区别
这几个属性的区别说难不难,可是很容易搞混,很长一段时间没用,发现又忘记区别了,记不清哪个是哪个!真的很抓狂!

区别:

clientX、clientY:

相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。

pageX、pageY:

类似于clientX、clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

offsetX、offsetY:

相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

screenX、screenY:

相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。

其实这几个的区别很好记的!其实就是英文单词的意思,不过对于广大中国人来说会觉得很迷惑。

client就是客户端,客户端就是浏览器,也就是相对浏览器的坐标。

page就是文档,也就是相对网页的坐标,也就是相对于浏览器可视区域的坐标还要加上滚动条。

offset就是偏移,也就是想相对于源元素的偏移位置。

screen就是屏幕,也就是相对于屏幕的坐标。

这样就好记了~

javascript日常总结的更多相关文章

  1. JavaScript日常学习2

    JavaScript 数据类型    字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义(Undefined). e ...

  2. javascript 日常总结

    1. 将彻底屏蔽鼠标右键 oncontextmenu=”window.event.returnValue=false” < table border oncontextmenu=return(f ...

  3. Javascript日常编码中的一些常见问题

    一.尽量少用全局变量   这是一个疑问最少,同时流传最 广的一条.Javascript使用函数管理作用域,全局变量最大的问题在于同名变量冲突.这种隐患产生比较直接的两个原因就是Javascript语言 ...

  4. JavaScript日常学习3

    JavaScript函数  函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname()     {执行代码} function myFunct ...

  5. JavaScript日常学习1

    您会经常看到 document.getElementById("id"). 这个方法是 HTML DOM 中定义的. DOM (Document Object Model)(文档对 ...

  6. JavaScript日常学习6

    JavaScript的运算符.比较符.条件语句.循环语句.跳出循环(break.continue).标签 JavaScript的运算符.比较符.条件语句.循环语句.跳出循环(break.continu ...

  7. JavaScript日常学习5

    JavaScript字符串属性和方法 eg :var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";      var sln = txt.length; ...

  8. JavaScript日常学习4

    JavaScript事件 1.<button id="btn1" onclick="document.getElementById("btn1" ...

  9. JavaScript日常会跳的坑系列(二)

    1.Number()将部分非数字类型转换为0 强制转换为数值类型函数: parseFloat.parseInt 优点:对非数值类型统一返回NaN 缺点:会将一部分符合数值类型的字符串也识别为数值 pa ...

随机推荐

  1. textarea 在浏览器中固定大小和禁止拖动

    HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...

  2. AD帐户操作C#示例代码(一)——导入用户信息

    最近写了一个AD帐户导入的小工具(为啥写作“帐”户呢?),跟大家分享下相关代码,欢迎各位高手指教! 首先,我准备一个这样的Excel文件作为导入模版,并添加了一些测试数据. 然后,我打开Visual ...

  3. Base64正反编码

    public class Base64 { private static char[] base64EncodeChars = new char[] { 'A', 'B', 'C', 'D', 'E' ...

  4. js中的定义

    执行环境:执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为,每个执行环境都有一个与之关联的 变量对象:环境中定义的所有变量和函数都保存在这个对象中.(在函数中这个变量对象叫活动对象) ...

  5. python ImportError: DLL load failed: %1 不是有效的 Win32 应用程序

    导入的时候报出了 ImportError 在windows上安装python 的模块后,导入模块时报 python ImportError: DLL load failed: %1 不是有效的 Win ...

  6. Codeforces Round #347 (Div. 2) (练习)

    A: 题意:找到[a, b]的最大公约数: 思路:相同时为本身,不同时为1. 套路:碰到水题别想太多: 猜想:两个相邻数,必有一奇一偶,如果偶数有因子3或者其他,奇数可不可能有相同的呢? 枚举一些数后 ...

  7. list对象属性排序

    Collections.sort(list, new Comparator<ScRel>() { @Override public int compare(Object o1, Objec ...

  8. redis hash数据类型

    我们可以将Redis中的Hashes类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和Age等.如果H ...

  9. android调用系统相机并获取图片

    如果不是特别的要求,通过拍照的方式取得图片的话,我们一般调用系统的拍照来完成这项工作,而没必要再自己去实现一个拍照功能.调用系统相机很简单,只需要一个intent就可以跳转到相几界面,然后再通过onA ...

  10. JQuery FullCalendar(一)

    FullCalendar官网:http://arshaw.com/fullcalendar FullCalendar中文API:http://blog.sina.com.cn/s/blog_9475b ...