首页 > 其他 > 详细

2014-7-22

时间:2014-07-23 11:33:26      阅读:320      评论:0      收藏:0      [点我收藏+]

一、first-child与firsty-of-type

  :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。

  :first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。

  IE6~IE8不支持first-of-type选择器。

二、display: none与visible: hidden

  display: none会让元素失去高宽等。如果一个元素的隐藏和显示占位不影响其他元素的位置和布局,则可以使用display: none和display: block来控制它的隐藏和显示。相反,如果一个元素的隐藏和显示占位会影响其他元素的位置和布局,则需要使用visible: hidden和visibel: visible来控制它的隐藏与显示。

三、可以使用element:hover element{display: block}控制鼠标移上后子元素的显示。之前还一直傻傻的以为只能给元素绑定hover事件来控制其他元素的显示和隐藏...不过用hover直接控制样式,在IE6下是不支持除a元素以外的其他元素hover的。解决的IE6下的这个问题。有两种方法:

1、将a元素嵌套在其他元素里面,设置a元素display: block; padding: ;height: ;让a元素撑满需要hover效果的外层元素

2、利用外部插件csshover.htc,下载该插件后,在html文件的head标签中写入body { behavior:url("csshover.htc"); }即可

推荐使用第二种方法,方便简单

四、absolute定位的子容器不能用内容将其自身撑开到自适应的宽度的问题:当absolute定位的一个元素的任一级父容器被设置为float或者display: inline-block时,就会出现这个问题。解决的方法是,给该absolute定位的元素加上white-space: nowrap;样式强制不换行。引申一下,对于开发中遇到莫名其妙的换行问题,尝试一下使用white-space: nowrap;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>absolute定位的子容器不能被撑开的测试</title>
    <style type="text/css">
        div:after{ display: block; content: ""; clear: both; }
    </style>
</head>
<body>
    <div style="width: 960px; margin: 10px auto; ">
        <h1 style="background: #f4b75a;">出现absolute定位的子容器不能被撑开的问题</h1>
        <div style="float: right; display: inline; ">
            <a href="#" style="position: relative;">我的账户信息<i></i></a>
            <div style="position: relative;margin-top: -1px; ">
                <div style="position: absolute; top: 100%;right: 0;line-height: normal; background: #edebeb; ">
                    <a style="display: block;" href="#">我的订单</a>
                    <a style="display: block;" href="#">我的包裹</a>
                    <a style="display: block;" href="#">我的账户</a>
                    <a style="display: block;" href="#">我的余额</a>
                    <a style="display: block;" href="#">我的会员中心</a>
                    <a style="display: block;" href="#">我的现金券</a>
                    <a style="display: block; color: red;" href="#">我的金币(新)我的金币(新)</a>
                </div>
            </div>
        </div>
    </div>
    <div style="width: 960px; margin: 10px auto; margin-top: 200px; ">
        <h1 style="background: #f4b75a;">父容器没有浮动,absolute定位的子容器能被撑开</h1>
        <div style="display: inline; margin-top: 200px; ">
            <a href="#" style="position: relative;">我的账户信息<i></i></a>
            <div style="position: relative;margin-top: -1px; ">
                <div style="position: absolute; top: 100%;left: 0;line-height: normal; background: #edebeb; ">
                    <a style="display: block;" href="#">我的订单</a>
                    <a style="display: block;" href="#">我的包裹</a>
                    <a style="display: block;" href="#">我的账户</a>
                    <a style="display: block;" href="#">我的余额</a>
                    <a style="display: block;" href="#">我的会员中心</a>
                    <a style="display: block;" href="#">我的现金券</a>
                    <a style="display: block; color: red;" href="#">我的金币(新)我的金币(新)</a>
                </div>
            </div>
        </div>
    </div>
    <div style="width: 960px; margin: 10px auto; margin-top: 200px; ">
        <h1 style="background: #f4b75a;">解决absolute定位的子容器不能被撑开的问题</h1>
        <div style="float: right; display: inline; ">
            <a href="#" style="position: relative;">我的账户信息<i></i></a>
            <div style="position: relative;margin-top: -1px; ">
                <div style="position: absolute; top: 100%; right: 0;line-height: normal; background: #edebeb; white-space:nowrap; ">
                    <a style="display: block;" href="#">我的订单</a>
                    <a style="display: block;" href="#">我的包裹</a>
                    <a style="display: block;" href="#">我的账户</a>
                    <a style="display: block;" href="#">我的余额</a>
                    <a style="display: block;" href="#">我的会员中心</a>
                    <a style="display: block;" href="#">我的现金券</a>
                    <a style="display: block; color: red;" href="#">我的金币(新)我的金币(新)</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

2014-7-22,布布扣,bubuko.com

2014-7-22

原文:http://www.cnblogs.com/liumeimei/p/3860942.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!