• 子元素盖住父元素边框


    做TAB选项卡页的时候,当前活动的选项卡有边框,同时下边和面板之间无边框

    记得以前实现过,但再用的时候却又不会了.现在实现如下.

    // tab页标题区域的HTML : 一个div下的若干span,每个span对应一个选项卡.

    <div class="tabs">

      <span class="tab-label">Home</span>

      <span class="tab-label active">Profile</span>

    </div>

    // 选项卡下面的线,是tabs框的下边框

    .tabs{

      border-bottom:1px solid #ddd;

    }

    // 活动选项卡的边框中下边框是透明的,其它三边照常

    .tab-label.active{

      display: inline-block;/*如果是行内元素,且不添加这个,那么父元素就不会包含子元素的padding部分.结果导致不能完全包含子元素*/

      padding: 8px 14px;

      border:1px solid #ddd;

      /*加上下面这几个关键样式,就能让红圈处无边框*/

      margin-bottom:-1px;

      background-color:#fff;

      border-bottom-color: transparent;

    }


    // 子元素的margin-bottom:-1px:

      导致父元素高度由底部缩减1像素,那么底边框位置向上抬升1px,正好与子元素的底边框重合,或者说进入了子元素的范围内,并且是被子元素压住了.

    // background-color:#fff;

      子元素设白色背景,于是父元素底边框在经过此子元素的范围内时被遮盖了.

    // border-bottom-color: transparent;

      此时子元素底边框再设置透明色,也看不见了.

    最终实现图片红圈处的效果

  • 相关阅读:
    PHP正则表达式
    PHP日期时间处理
    好文摘录
    Unix时间戳与C# DateTime时间类型互换
    dedecms表结构分析
    css默认值汇总
    jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
    html中label宽度设置、非替换元素和替换元素
    css position, display, float 内联元素、块级元素
    CSS技巧(一):清除浮动
  • 原文地址:https://www.cnblogs.com/mirrortom/p/8479447.html
Copyright © 2020-2023  润新知