关于border边框重叠颜色设置问题

盒子模型包括:margin border padding content

   在标准盒子模型中 conten不包括border和padding  就是他自身内容所包含的区域。

   在IE盒子模型中    content包括border和padding   是内容和border padding之和。

   关于盒子边框重叠颜色设置问题:

//就拿下列标签来说
<ul>
    <li class="on">房产</li>
    <li>家居</li>
    <li>二手房房</li>
</ul>
css:
li{list-style: none;
            display: inline-block;
            border: 1px solid #4c6fe2;
            border-bottom: none;
            width:80px;}
   ul{border-bottom:2px solid #6e442c;
            height:px;
   width:400px;
            display: inline-block;
        }

.on{
          border-bottom:40px solid red;


      }   

因为ul没设定宽度所有加border的时候会撑开父元素宽度:效果如下

给父元素ul设置height

ul{border-bottom:2px solid #6e442c;
            height:28px;
            width:400px;
            display: inline-block;
        }

效果如下:

再缩小ul的高度:

  把颜色设置为#fff 白色:

    由此可见content内容区域的大小是固定不变的。border变大也只是外面去增加,而不会往里面增加。

   给父元素设置高度的时候,只要border的宽度超过父元素ul的时候就会覆盖父元素的边框。

 刚好覆盖如何设置:

li{list-style: none;
            display: inline-block;
            height:28px;
            border: 1px solid #4c6fe2;
            border-bottom: none;
        width:80px;

      }
        ul{border-bottom:2px solid #6e442c;
            height:29px;
   width:400px;
            display: inline-block;
        }
      .on{
          border-bottom:2px solid red;

   上面把li的border-top设置为1px height设置为28 没有设置padding和下边框   那么只要把ul height设置为28+1 的时候 再把li的border设置为1px solid #fff;

   时候刚好可以覆盖ul的的下边框。如下:

 如果li没设置height怎么实现border覆盖?  

 li{list-style: none;
      display: inline-block;
      border: 1px solid #4c6fe2;
       border-bottom: none;
        width:400px;
     }
ul{border-bottom:2px solid #6e442c;
    height:29px;
    width:400px;
    display: inline-block;
}
.on{
    border-bottom:2px solid red;
    padding-bottom:10px;
      }

可以设置padding-bottom,把border往外退 效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

居中详解

 讲解 1,单行文本的居中:           <div class='center'><span>单行文本框居中</span></div>         ...

3359
来自专栏前端知识分享

第4天:JS入门-给div设置宽高背景色

今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

791
来自专栏IT大咖说

分享7款超赞的CSS3动画效果,值得你收藏!

今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。

2273
来自专栏前端知识分享

第181天:HTML5——视频、音频

941
来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

862
来自专栏肖蕾的博客

第六章:常用控件日常科普标签(Lable)图片(Image)按钮(Button)

1.控件是用于开发构建用户界面(UI)控件,帮助完成开发中视窗,文本框,按钮,下拉菜单,等界面元素 2.在LibGdx中,提供的控件有 按钮,勾选框,下拉框,...

1072
来自专栏闻道于事

CSS样式表

CSS样式表的样式主要可以分为大小,背景,字体,对齐方式,边界边框,列表方块,格式布局等。 元素的大小: #div1{ width:30...

3798
来自专栏Android先生

android自定义view(自定义数字键盘)

至此,我们写的差不多了,然后就是要提供一个接口,对外开放,方便用的时候调用,获取到数字或者其他信息:

1352
来自专栏移动端周边技术扩展

Chat 中 通常录制语音使用,仿微信

1944
来自专栏Petrichor的专栏

opencv: 图片 设置 透明度 并 叠加(cv2.addWeighted)

3112

扫码关注云+社区