分类 Web笔记 下的文章

CSS实现大于父元素宽度的图片居中

通常在Banner的时候需要居中,而且Banner通常都是比较宽的。如果当前页面比Banner宽,那么text-align:center即可。

图片居中演示

不过当页面缩小的时候,图片的左边就会抵住窗口左边,不会随着窗口的缩小而左移。

DEMO演示:当父元素小于图片宽度的时候 图片不居中

上面的演示大家可以改变窗口来看。

解决的方法有三种:

方法一:

这个是最先想到的,就是把图片作为背景来设置到Banner上面。

- 阅读剩余部分 -

JS控制滚轮横向滚动页面

本文的目的:

有时候遇到一个很宽的页面,想要用滚轮横向滚动,这时候一般的鼠标估计都不能做到吧?

演示

说得有点抽象,Demo请点击:JS控制滚轮横向滚动演示

鼠标滚轮事件介绍

鼠标滚轮事件一直以来没有统一的事件。太混乱了,各种浏览器甚至操作系统都会产生差异。

简单点来看,分成两个时间段。

最初的时候,所有的浏览器,除了FireFox,都支持一个叫做MouseWheelEvent的事件,甚至IE6都支持哦

addEventListener使用mousewheel即可,attachEvent则是onmousewheel

对于FireFox有一个类似的DOMMouseScroll事件,addEventListener的时候监听addEventListener

然后,到了后来,其实也就是现在,有了一个新的、标准的滚轮事件,就叫WheelEvent了。

得到了下列浏览器的支持:

Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
31 17.0 (17.0) 9.0 Not supported Not supported

不过MDN说

This is really different event object from MouseWheelEvent.

具体怎么不一样,没有说,不过我不在意,不过估计主要是Delta增量的不一样。

不同浏览器不同操作系统下wheelDelta, wheelDeltaX and wheelDeltaY value的差异:MDN原文(En)

对我来说,Delta量多少都无所谓,我只需要得到正向还是反向滚轮就好了,正负判断即可,一次滚轮事件触发一次想要的效果。

- 阅读剩余部分 -

document.body 和 document.documentElement的区别

<p>文章的起因:之前对这两者的区别一直很模糊,因为也比较少用到,直到最近在写一个返回顶部的按钮的时候。 以前的话,用jQuery,很简单,大家也很熟悉的:</p>

$('html,body').scrollTop(0);

<p>不过现在的公司不使用jQuery作为主力,所以我就想用原生的JS来实现,然后受上一条习惯的影响,写出了如下的语句:</p>

document.getElementsByTagName('html')[0].scrollTop = 0;
document.getElementsByTagName('body')[0].scrollTop = 0;

<p>效果是达到了。不过看起来怪怪的,好像也没见过别的地方有人这么写过。 然后参考其他网站,同时也谷歌了一下,发现常用的是下面的写法:</p>

document.documentElement.scrollTop = document.body.scrollTop = 0;

<p>看起来简洁多了,是吧。不过我发现上面两个document的属性都好陌生啊,document.documentElement是什么,document.body又是什么?</p>

<p>好了,然后,下面的语句让我明白了:</p>

document.getElementsByTagName('html')[0] === document.documentElement;
//true
document.getElementsByTagName('body')[0] === document.body;
//依然true

<p>恍然大悟的感觉有没有!原来document.documentElement就是html,document.body就是body,就这么简单。</p>

- 阅读剩余部分 -

mouseenter、mouseover;mouseleave、mouseout的区别

在jQuery里面,鼠标事件有两对比较容易混淆的。

  • mouseenter和mouseover
  • mouseleave和mouseout

既然容易混淆,把这4个重新组合一下,变成
mouseover/mouseout VS mouseenter/mouseleave

这样是不是清晰多了?至少样子上是。

mouseover/mouseout在原生JS中一直都是有的,也就是onmouseover和onmouseout事件,而且,特大好消息的是,曾经只有IE支持的onmouseenter和onmouseleave事件现在已经来到了Chrome和Firefox中:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 30 10.0 (10) All 11.10 Not supported

要说区别,非常简单:mouseover/mouseout的事件会冒泡(event bubbling),也就是说,假设把mouseover/mouseout事件绑定到了父元素,那么它其中的任何子元素只要发生了mouseover/mouseout事件,同时也会触发父元素的mouseover/mouseout事件,父元素的父元素也会触发……然后一直向上,就像池塘的气泡一样一直往上冒。

而mouseenter/mouseleave不会发生事件冒泡,属于传统思维上的鼠标进出。

- 阅读剩余部分 -

word-break、word-wrap、word-space、white-space对比图

这几个属性不常用,而且名字看起来很相近,所以列出来,对比起来看看。然后不看不知道,一看吓一跳,真的是有点复杂,还涉及到非中文和非英文的情况,而且其中前两者还是CSS 3的属性,怪不得这么细化。下面的表格翻译自W3,假如翻译有不恰当的地方还请指出。

名称 word-break word-wrap
/overflow-wrap
word-spacing white-space
C
S
S
版本
CSS3 CSS3 CSS1 CSS1

定义

This property specifies soft wrap opportunities between letters

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

The word-spacing property increases or decreases the white space between words.

 

The white-space property specifies how white-space inside an element is handled.

定义断词的方式。 对长单词,转行到下一行的方式,只在white-space允许折行的时候起效。 增加或减少
单词间的间距。
元素内的空白符的处理方式。
可取的值

normal:默认值

break-all:允许折行任意单词,Chrome和FF下,中文里面会允许标点符号折行到下一行的开头。

keep-all:不断词。

normal:默认值。约等于word-break: keep-all;

break-word:使单词可以被折行。

normal:默认值,相当于值是0;

length:使用px, pt, cm, em等单位具体定义,值可为负;

inherit:继承

normal:默认值,多个空白符显示为一个,自动折行。
nowrap:多个空白字符显示为一个,文字不自动折行,除非遇到<br />标签。
pre:空白字符被保留,就像<pre>标签一样,文本不自动折行。
pre-line:多个空白字符显示为一个,文本正常折行,换行符被保留。
pre-wrap:空白字符被保留,文本正常换行,换行符被保留。
inherit:继承

额外说明

这个有点复杂,涉及到多种语言的知识。貌似韩文是两个字一个词?

word-wrap和overflow-wrap是同一个意思,不过前者是后者的遗留名字,后者是更新的叫法。

当遇到很长的单词,比如肌联蛋白的IUPAC名的时候,overflow-wrap设置为break-word就能够自动折行了;不然屏幕就只有一行啦,慢慢拉水平滚动条吧。

当为负值的时候,只在IE7以下和FF有效,表现为单词挤在一块儿了。

这个属性说的是
单词,其实就是指定空白符的宽度。因为单词也是通过空格来隔开嘛,不然CSS怎么知道是单词还是字母。

对应
字符间距调整的属性是letter-spacing。

这个估计是最复杂的一个了,各个属性值绕来绕去的。

用的最多的时候可能就是用它的nowrap了吧。

上面的word-break有点抽象,因为涉及到其它的语言,下面补充一下断词的方法,下面的例子使用‘·’来定义断词点。

word-break: normal
这·是·一·些·汉·字,·and·some·Latin,·و·کمی·نوشتنن·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย.

word-break: break-all
这·是·一·些·汉·字,·a·n·d·s·o·m·e·L·a·t·i·n,·و·ﮐ·ﻤ·ﻰ·ﻧ·ﻮ·ﺷ·ﺘ·ﻦ·ﻋ·ﺮ·ﺑ·ﻰ,·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย.

word-break: keep-all
这是一些汉字,·and·some·Latin,·و·کمی·نوشتنن·عربی,·และตัวอย่างการเขียนภาษาไทย.



终于大体上翻译结束,不过肯定还有需要补充的,后面再加上。自己也在这次翻译当中明白了不少,但是对于CSS 3的其余相关属性,我还不是很清楚,比如line-break,以后遇到了再补充吧。