关于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 条评论
登录 后参与评论

相关文章

来自专栏恰同学骚年

Web前端温故知新-CSS基础

  定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

723
来自专栏python学习路

二、CSS

css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是...

2857
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 常用选择器

974
来自专栏CaiRui

CSS再学

css的注释 /*.......*/ 直接在html代码中写css <p style="color: rebeccapurple;font-size: 18px...

1667
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

764
来自专栏向治洪

react-native 之布局总结

前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

4408
来自专栏十月梦想

CSS边框

border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

723
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之z-index

1、z-index基础   z-index含义:指定了元素及其子元素的”z顺序“,而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。   z-i...

2775
来自专栏前端萌媛的成长之路

CSS盒子模型

1573
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

772

扫码关注云+社区