Chinaunix首页 | 论坛 | 博客

咩羊。的ChinaUnix博客

首页　| 　博文目录　| 　关于我

咩羊。

  • 博客访问： 875131
  • 博文数量： 366
  • 博客积分： 10267
  • 博客等级： 上将
  • 技术积分： 4290
  • 用 户 组： 普通用户
  • 注册时间： 2012-02-24 14:04
文章分类

全部博文（366）

文章存档

2012年（366）

我的朋友
最近访客
推荐博文
相关博文
CSS 必知的7个知识点

分类： 系统运维

2012-04-13 20:31:45

无敌的老公昨天给俺进行了一堂css的培训~~哎，为神马老公啥都知道，我神马都不懂，自愧不如啊~~555

好记性不如烂笔头，遂在此一一总结。本人小菜，从最基础的内容开始。

1、width是个地雷

　　很多页面要求宽度自适应，那么width设百分比吧，否则就是粘着不走的狗皮膏药啦
当没有定义元素宽度时，浏览器撑满整行，实际上执行的是width：auto，宽度自适应。

2、IE6不认识min-height

　　解决办法就是_height，有时候明明不需要可变高度，如果喜欢没原则的min-height，那么记得用_height对付下IE6这个屌娃就行。

3、float和clear

　　float和绝对定位都会破坏正常的文档流，正常流自上而下，而float是一个自左而右或者自右而左的流。

　　clear仅仅是针对上一个浮动元素而言，如果上面没有元素浮动，那么你要清除啥呢？

　　所谓清除浮动，个人认为就是相对于上一个浮动元素，另起一行。

4、position的relative和static的区别

　　relative是相对于自己普通流所在位置的定位，而static是文档普通流，即文档流的默认情况。

　　一般情况，relative跟随top和left两个值，当然也可以用right和bottom，但切记，一切都是相对于自己的普通流。

　　如果将 position 设为 relative , absolute 或 fixed,那么元素会覆盖没有设置 position 属性的元素，姑且把static当没设position吧。

　　这说明元素间是有层级关系的，z-index最高，然后是设置了position的，最后是文档流位于后面位置的元素

5、z-index和overflow

　　用z-index 属性设置元素的堆叠顺序。那么拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

　　不过z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时有用哦。

　　当正常流溢出时，可以选择overflow的scroll或者hidden属性。

　　什么是溢出？比如父级元素定义的高度是100，子级元素定义的高度是150，这撑不住的50就是溢出。

　　所以溢出只出现在子级元素溢出父级元素的情况。一般想解决溢出问题 就只要在父级元素上加一个overflow属性。

　　兄弟元素之间按照正常的普通的流走不会出现溢出的情况，但当子级元素relative时候，也会出现覆盖，但这已经脱离了溢出的管辖范围。

      当然父级的overflow对因relative而溢出的子级元素同样有效。

6、IE有bug就找haslayout
　　haslayout是IE特有的属性，很多IE神奇的BUG都和haslayout有关，要记住，有些样式会触发haslayout，最常用的是zoom:1

　　下列元素默认 hasLayout=true 　　　　
'; tpl += ''; tpl += '
'; tpl += '
'; tpl += '
表情
'; tpl += '
'; tpl += '
'; tpl += ''; $('.z_move_comment').html(''); $(this).parents('.Blog_right1_8').find('.z_move_comment').html(tpl).show(); }); //引用的评论提交 $('#quota_sbumit').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var tid = $(this).attr('tid');//被引用人的id var qid = $(this).attr('cid');//引用的id var url = $(this).attr('url'); var text = $('#rmsg').val(); var tname = $(this).attr('tname'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : tid , 'qid' : qid , 'text': text , 'tname' : tname }, dataType: 'json', success: function(data){ if(data.code == 1){ var tpl = '
'; tpl+= '
' + data.info.header + '
'; tpl+= '
'; tpl+= '

' + data.info.username + '' + data.info.dateline + '

'; tpl+= '

' + data.info.quota.username + '：'+ data.info.quota.content + '

'; tpl+= '

' + data.info.content + '

回复 | 　删除　| 　举报
'; tpl+= ''; tpl+= '
'; $('#replyList .Blog_right1_8:first').before(tpl); $('.z_move_comment').html('').hide(); } else if(data.code == -1){ //showErrorMsg(data.info , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } }, error: function(){//请求出错处理 } }); }); //底部发表评论 $('#submitmsg').click(function(){ if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var bid = $(this).attr('bid'); var toid = $(this).attr('toid'); var text = $('#reply').val(); var url = $(this).attr('url'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : toid ,'text': text}, dataType: 'json', success: function(data){ if(data.code == 1) { var tpl = '
'; tpl += '
' + data.info.header + '
'; tpl += '
'; tpl += '

' + data.info.username + '' + data.info.dateline + '

'; tpl += '

' + data.info.content + '

'; tpl += '
回复 | 　删除　| 　举报
'; tpl += ''; tpl += '
'; $('.Blog_tit3:first').after(tpl); $('#reply').val('文明上网，理性发言...'); } else if(data.code == -1) { showErrorMsg(data.info , '消息提示'); } }, error: function(){//请求出错处理 } }); }); //底部评论重置 $('#reset_comment').click(function(){ $('#reply').val('文明上网，理性发言...'); }); //取消回复 $('#qx_comment').live('click' , function(){ $('.z_move_comment').html('').hide(); }); $('#rmsg, #reply').live({ focus:function(){ if($(this).val() == '文明上网，理性发言...'){ $(this).val(''); } }, blur:function(){ if($(this).val() == ''){ $(this).val('文明上网，理性发言...'); } } }); //删除留言确认 $('.comment_del_mark').live('click' , function(){ var url = $(this).attr('url'); asyncbox.confirm('删除留言','确认', function(action){ if(action == 'ok') { location.href = url; } }); }); //删除时间确认 $('.del_article_id').click(function(){ var delurl = $(this).attr('delurl'); asyncbox.confirm('删除文章','确认', function(action){ if(action == 'ok') { location.href = delurl; } }); }); /* //字数限制 $('#rmsg, #reply').live('keyup', function(){ var id = $(this).attr('id'); var left = Util.calWbText($(this).val(), 500); var eid = '#errmsg'; if(id == 'reply') eid = '#rerrmsg'; if (left >= 0) $(eid).html('您还可以输入' + left + '字'); else $(eid).html('您已超出' + Math.abs(left) + '字 '); }); */ //加载表情 $('#face').qqFace({id : 'facebox1', assign : 'reply', path : '/image/qqface/'}); $('#mface').qqFace({id : 'facebox', assign : 'rmsg', path:'/image/qqface/'}); /* $('#class_one_id').change(function(){ alert(123213); var id = parseInt($(this).val() , 10); if(id == 0) return false; $('.hidden_son_class span').each(function( index , dom ){ if( dom.attr('cid') == id ) { } }); }); */ //转载文章 var turn_url = "/blog/viewClassPart.html"; $('#repost_bar').click(function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var id = $(this).attr('bid'); asyncbox.open({ id : 'turn_class_thickbox', url : turn_url, title : '转载文章', width : 330, height : 131, scroll : 'no', data : { 'id' : id }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); /* //转发文章 $('#repost_bar').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var url = $(this).attr('url'); asyncbox.confirm('转载文章','确认', function(action){ if(action == 'ok'){ $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0){ showSucceedMsg('转发成功！', '消息提示'); }else if(msg.error == 1){ //location.href = '/index.php?r=site/login'; showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); }else{ showErrorMsg(msg.error_content, '消息提示'); } } }); } }); }); */ });
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6