Float从中间开始?

有时候有下面的情况,li元素向左浮动,但是却从中间开始?

结构如下:

floatFromeCenter (1)

蓝色的li从中间开始浮动了!

floatFromeCenter (3)

使用firebug查看得知,前面一个容器里面的i元素的margin“伸”出来了!!!

floatFromeCenter (4)

 

这个i的css代码:

 

floatFromeCenter (2)


原因分析:

float 是使用BFC来分隔的,因为没有形成BFC,所以这里默认wrap和这个ul里面如果有浮动元素,它们将会互相影响!

解决办法:

将wrap和ul形成BFC即可。这样可以把各自内部的浮动元素包裹起来。

关于BFC,可以查看:轻松认识BFC 内容也绝对浅显易懂(我都能看懂,嘿)

jQuery里面keypress与keydown区别

看了jQuery的源代码,其实jQuery里面的keypress和keydown是直接来自于原生js里面相应的onkeypress和onkeydown,没有特殊修改。所以下文讲的就是原生js里面的这两个事件的区别。

具体区别

  1.  一个放开一个没有放开,onkeydown 先于 onkeypress 发生。但是如果一直按住某个键不放,两个事件都是会不断触发的。
  2. onkeypress 事件在用户按下并放开任何字母数字键时发生。但是系统按钮(例如:箭头键、功能键)无法得到识别。
  3. onkeydown 事件在用户按下任何键盘键(包括系统按钮)时发生,捕获的 keyCode 不区分字母大小,而 onkeypress 区分。

补充一下,有时候我们为了验证表单数据,就需要根据按键动作来检测输入的数据,如果用keypress和keydown,验证这个动作发生在这个键输入结束之前,就是导致相应的检测函数只能检测到按下这个键之前的数据,所以这时候应该用keyup动作,不过这也从侧面看出keypress和keydown在动作上是差不多的,只是能够获取的键值不同。个人感觉,keydown检测的是键盘的实体键(实体键大小写a和A是一个键嘛),也验证了前面的话。

可以自己测试一下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按键测试</title>
<script src="jquery.js"></script>
</head>
<body>
<div>次数</div>
<script>
i=0;
$(window).keypress( function () { $('div').html(i++) } );
</script>
</body>
</html>

下面是微软的定义的keypress和keydown的按键区别。
onkeypress
As of Microsoft® Internet Explorer 4.0, the onkeypress event fires and can be canceled for the following keys:

Letters: A - Z (uppercase and lowercase)
Numerals: 0 - 9
Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~
System: ESC, SPACEBAR, ENTER

onkeydown
As of Microsoft® Internet Explorer 4.0, the onkeydown event fires for the following keys:

Editing: DELETE, INSERT
Function: F1 - F12
Letters: A - Z (uppercase and lowercase)
Navigation: HOME, END, LEFT ARROW, RIGHT ARROW, UP ARROW, DOWN ARROW
Numerals: 0 - 9
Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~
System: ESC, SPACEBAR, SHIFT, TAB

As of Internet Explorer 5, the event also fires for the following keys:

Editing: BACKSPACE
Navigation: PAGE UP, PAGE DOWN
System: SHIFT+TAB

As of Internet Explorer 5, this event can be canceled for the following keys and key combinations by specifying event.returnValue=false:

Editing: BACKSPACE, DELETE
Letters: A - Z (uppercase and lowercase)
Navigation: PAGE UP, PAGE DOWN, END, HOME, LEFT ARROW, RIGHT ARROW, UP ARROW, DOWN ARROW
Numerals: 0 - 9
Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~
System: SPACEBAR, ESC, TAB, SHIFT+TAB

You can cancel all keys that fire the onkeydown event in HTML Applications, including most accelerator keys, such as ALT+F4.

In Internet Explorer 4.0, you cannot cancel the onkeydown event, but you can use the onkeypress event to cancel keyboard events.

 

轻松认识CSS BFC

对于刚接触前端的同学来说,BFC这个概念有点陌生,因为很少见到明确定义,有点抽象,而且网上的文章说得有点玄乎,所以打算写一篇简单点的文章介绍。

BFC(Block Formatting Context)到底是什么?

当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局,一个环境中的元素不会影响到其它环境中的布局。

比如浮动元素会形成BFC,浮动元素内部子元素主要受各自浮动元素影响,两个浮动元素各自的子元素是互不影响的。不受影响具体表现的一个例子就是,对某个BFC中的元素设置margin,不会引起旁边BFC的变化。所以,这里的没有影响说的是BFC中的元素不会对其它BFC造成影响,不是说BFC本身不影响另一个BFC。

就像把家里的糖果放一个盒子,玩具放另一个盒子,糖果和杯子就完全隔离了互不影响,但是两个盒子还是会互相影响对方的。当初看的很多文章这一步没有讲清楚,让我疑惑了好久。

BFC的定义

BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

在创建了BFC的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在同一个BFC中相邻的块级元素的垂直边距会折叠(collapse)。

在BFC中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。

怎样才能形成BFC

满足下面任何一个条件即可:

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

BFC的作用

  1. 不和浮动元素重叠
    如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个覆盖的现象,很多自适应的两栏布局就是这么做的。比如下图的效果,参考例子 <div style="float:left; border: 2px solid red"> 123</div> <p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1"> The quick brown fox jumped over the  4seohunt.com lazy  dog's back. The quick brown fox jumped over the lazy dog's back. The quick brown fox jumped over the lazy dog's back. The quick brown fox jumped over the lazy dog's back. The quick brown fox jumped over the lazy dog's back. </p>
  2. 清除元素内部浮动
    只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了(IE Haslayout)。
  3. 嵌套元素Margin边距折叠问题的解决
    按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠。 因此要解决margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

DEMO:

<div style="display: inline-block;background-color: green;width: 50px;">
<p style="margin-right: 1000px;"></p>
</div>
<div style="display: inline-block;background-color: red;width: 50px;">
<p></p>
</div>

可以看到,第一个div中的p元素虽然设置了一个较大的margin-right,但是对后面的div没有任何影响。

PS:说到inline-block自然不能忘记IE6、7这两个老不死的家伙,所以上面的例子在IE6、7是看不到效果的,有机会再讲这一点。

 

jQuery选择器初学者需要注意的细节

jQuery的选择器很强大,而且还不用考虑浏览器的兼容性,神器啊~
学习jQuery的第一步可能就是学习它的选择器了吧,不过需要注意的是它选择到的对象不是DOM对象,换句话说,很多常用的DOM专属的方法就不能用于jQuery对象,刚接触可能会混淆。比如不能

$(#test).innerHtml="这个方法不可用"

正确的应该是使用jQuery特有的.html方法

$(#test).html("这个方法才是正确的")

jQuery的选择器具体不说,这里有几点注意的:

容易混淆的:

  1. 多条件选择器:在一个""内有逗号区分,例:$("p,div,span.menuitem"),同时选择p标签、div标签、和拥有menuitem样式的span标签元素;
  2. 相对选择器:2个元素逗号分开 ,例:$("td", $(this)),选择的td元素是当前的(tr)元素下的所有td元素,没有涉及到其他行的td元素;
  3. 层次选择器在一个""内以空格区分,例:$("#div li")或$("#div>li")或$(".menuitem+div")

最后,关于jQuery的选择器的熟悉,最好的当然是实践啦,除此之外推荐大家两个网站,都是jQuery选择器实验室,点击图片进入:


关于子元素的选择,发现了w3school上面的一个错误: http://www.w3school.com.cn/jquery/jquery_selectors.asp页面底部说 $("ul li:first") 表示每个 <ul> 的第一个 <li> 元素,实际上为ul所有li中的第一个li,如果想要达到每个 <ul> 的第一个 <li> 元素 的效果,正确的应该是$("ul li:first-child");


IE6下面line-height失效?

没道理啊,明明IE6是支持line-height的。后来搜索了一下,发现这是IE6的bug。当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 比如

......
<p>姓名<textarea>...</textarea></p>
<p>手机<textarea>...</textarea></p>
......

这种情况下对P设置line-height在其它浏览器正常,但是IE6下面是无效的。

解决办法:对和文字相连接的img、input、textarea、select、object等元素增加样式属性,一般用margin。比如本次例子就对textarea设置了下面的属性:

margin:(希望的line-height-自身高度)/2px 0;
vertical-align:middle

IE6这个魂淡,从趋势图来看时日不多了,已经。