摘要:
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定。 问题如下图,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期。但是当Inner Div设置了“margin-top:10px”之后,它的父元素Outer Div也被撑出来一个本不该有的“margin-top:10px”效果。 阅读全文
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定。 问题如下图,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期。但是当Inner Div设置了“margin-top:10px”之后,它的父元素Outer Div也被撑出来一个本不该有的“margin-top:10px”效果。 阅读全文
posted @ 2015-04-24 17:18
html5前端技术分享
阅读(3047)
评论(2)
推荐(0)
摘要:
正则表达式中的特殊字符
字符 含意
\ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界。
-或-
对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*"。
^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"
$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"
* 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa 阅读全文
正则表达式中的特殊字符
字符 含意
\ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界。
-或-
对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*"。
^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"
$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"
* 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa 阅读全文
posted @ 2015-04-24 14:27
html5前端技术分享
阅读(400)
评论(0)
推荐(0)
摘要:
/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{
background-color:#018EE8;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
} 阅读全文
/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{
background-color:#018EE8;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
} 阅读全文
posted @ 2015-04-24 09:59
html5前端技术分享
阅读(1084)
评论(0)
推荐(0)
摘要:
Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
在本文深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。 阅读全文
Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
在本文深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。 阅读全文
posted @ 2015-04-24 09:47
html5前端技术分享
阅读(1483)
评论(0)
推荐(0)
摘要:
可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(
filter: gray;
),不过,当时,其他浏览器是无解的。
不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。 阅读全文
可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(
filter: gray;
),不过,当时,其他浏览器是无解的。
不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。 阅读全文
posted @ 2015-04-24 09:40
html5前端技术分享
阅读(15301)
评论(0)
推荐(0)
摘要:
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?
按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度。 阅读全文
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?
按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度。 阅读全文
posted @ 2015-04-24 09:26
html5前端技术分享
阅读(2902)
评论(0)
推荐(1)
浙公网安备 33010602011771号