CSS 使用after伪类清除浮动
今天早上去上班的时候还在纠结,设定before和after,可是他们的位置位于元素的哪里呢?兄弟元素?子元素?在firebug里看不到他们俩的位置,在FF自带的审查元素里倒是能看到,其实是位于该元素的子元素。
于是,以前,我们说过用一个div来清除浮动,现在我们可以把它省掉了——给父元素设定after。
如下:
element:after {
clear: both;
content: "";
display: block;
}
今天早上去上班的时候还在纠结,设定before和after,可是他们的位置位于元素的哪里呢?兄弟元素?子元素?在firebug里看不到他们俩的位置,在FF自带的审查元素里倒是能看到,其实是位于该元素的子元素。
于是,以前,我们说过用一个div来清除浮动,现在我们可以把它省掉了——给父元素设定after。
如下:
element:after {
clear: both;
content: "";
display: block;
}
今天又碰到了这种需求,是因为我们要做个点击获得全文(之类的)功能,设置了overflow:hidden
,如果完整的显示了,那么我们就不需要显示全部内容的按钮,否则就要加上。
当时就在想,这玩样儿恐怕不太好办吧?overflow是CSS自动判断的,我完全没有经受,怎么判断确实是个问题。
还好谷歌还是能够找到答案的:jquery如何判断div是否文本溢出
里面提到了一个很好的方法:
$(selector).map(function() {
if (this.offsetWidth < this.scrollWidth) {
// do whatever you want
}
});
这里的offsetWidth
和scrollWidth
是DOM对象所具有的属性,而不是jQuery对象,所以要先转成DOM对象:jQuery与DOM对象的互相转换
关于这两个,以下扩展阅读:
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
https://developer.mozilla.org/zh-CN/docs/Web/API/element/scrollWidth
这篇文章和jQuery其实是完全没有关系的,只是我始终无法理解,直接实现DOM不就好了,OOP有什么实践价值么?
于是师匠通过一例,似乎让我有点收获嘛~至少感觉这样写,比我过去写的function都优雅不少。
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
在一个网站上看到选中文字时的效果和平时的表现有些不同,顿时就习惯性的F12了,结果看到selection这个伪元素,去MDN查了一下各种伪元素:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
钉子菊苣的博客有一篇博文,讲的是关于::before
和::after
的高级用法,感觉相当赞:你所不知的 CSS ::before 和 ::after 伪元素用法
关于selection,可以看https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
FF需要进行特殊处理,也就是-moz-
。
于是可以这样:
*::selection {
color: #000;
background: transparent;
}
*::-moz-selection {
color: #000;
background: transparent;
}
愉快的玩耍啦~
前两天在研究CSS3中的transform
和animation
,感觉transform
对于一个没有立体感的人而言还是很难的,但是,这里有一篇文章却把它讲的好理解多了(但还是有不理解的部分,果然技术有待加强):好吧,CSS3 3D transform变换,不过如此!
本文演示均未考虑到Chrome问题
变量提升,会把变量的声明提到作用域的前面,于是我就被坑了一次又一次= =啊原来只是声明啊。
于是比如:
console.log(a);
var a = 0;
只会输出undefined。
这一点,在对象里是一样的~所以千万不要在被坑哟=w=
昨天被toggle坑了,因为在w3school里是这么写的:http://www.w3school.com.cn/jquery/event_toggle.asp
里面的第一段:
$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
在他的示例中也是可以使用的,但是在我的环境下竟然没有办法达到这个效果,刚开始以为自己写错了,结果没想到这货已经被取消掉了,在官方文档中,现在只有fadeIn和fadeOut切换的效果了:http://api.jquery.com/toggle/
于是只好自己写click事件了=A=
这里mark一下常用英文字体:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
当然还有诸如:Verdana
Tahoma
之类的字体啦~
另外,还有一个现在常用的英文字体:Open Sans
以前尝试过用body来,结果由于冒泡的缘故,导致就算点击,也会被body中的点击事件覆盖导致根本无法弹出窗体。
于是去查了一下:
$(document).mouseup(function(e){
var _con = $(' 目标区域 '); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
some code... // 功能代码
}
});
/* Mark 1 的原理:
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/
在关于点击空白关闭弹窗的js写法推荐?看到的,里面有许多方法, 这是其中一种,感觉也挺好的。