盒子模型包括: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往外退 效果如下:

关于border边框重叠颜色设置问题的更多相关文章

  1. 27.给input边框和背景颜色设置全透明

    给input边框和背景颜色设置全透明,但是里面的字不会消失 1.让背景颜色变透明(二选一) background-color:rgba(0,0,0,0); background:rgba(0,0,0, ...

  2. 7.css3表格、列表、边框的样式设置--list/border

    1.css表格: ①Border-collapse是否把表格边框合并为单一的边框.Separate默认值,collapse合并. ②Border-spacing分割单元格边框的距离. ③Caption ...

  3. poi生成excel整理(设置边框/字体/颜色/加粗/居中/)

    转: poi生成excel整理(设置边框/字体/颜色/加粗/居中/) 2016年12月02日 11:05:23 吃奶的牛 阅读数:34324   HSSFWorkbook wb = new HSSFW ...

  4. iPhone 6/plus iOS Safari fieldset border 边框消失

    问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...

  5. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  6. CCS3怎么实现border边框渐变效果

    下图注册按钮的边框有渐变效果,如果让你来实现,你会怎么做呢 个人觉得,省事的做法,直接让UI给背景图片就可以了,如下图 不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图. ...

  7. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  8. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  9. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

随机推荐

  1. python第一个程序-->hello world

    最近在网上看到一个小笑话,一个程序员的自我嘲讽:“我精通所以计算机语言的hello world!” 好了,废话不多说了,开始撸代码: 我本人用的是python3.6版本,各位可以通过官网下载自己喜欢的 ...

  2. 使用java多线程分批处理数据工具类

    最近由于业务需要,数据量比较大,需要使用多线程来分批处理,提高处理效率和能力,于是就写了一个通用的多线程处理工具,只需要实现自己的业务逻辑就可以正常使用,现在记录一下 主要是针对大数据量list,将l ...

  3. 20145202马超《网络对抗》Exp4 恶意代码分析

    20145202马超<网络对抗>Exp4 恶意代码分析 1.实验后回答问题 (1)总结一下监控一个系统通常需要监控什么.用什么来监控. 虽然这次试验的软件很好用,我承认,但是他拖慢了电脑的 ...

  4. 网页设计简史看设计&代码“隔膜”

    本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...

  5. js数字格式化千分位格式

    带小数点的 var a = 8462948.2453; console.log(a.toLocaleString()) //8,462,948.245 不带小数点的 num.toString().re ...

  6. css的水平居中和垂直居中总结

    Html代码: <div class="md-warp"> <div class="md-main">块级元素</div> ...

  7. VIN码识别:助力汽车后市场转型升级

    随着中国汽车市场的成熟,汽车后市场发展迅速,呈“井喷”式增长.据最新数据统计,2015年,中国汽车后市场产值突破8000亿规模,到2018年有望突破万亿. 所谓汽车后市场是指汽车销售以后,围绕汽车使用 ...

  8. CodeForces-1132F Clear the String

    题目链接 https://vjudge.net/problem/CodeForces-1132F 题面 Description You are given a string \(s\) of leng ...

  9. PhpStorm 配置数据库

    点击软件右边的 Database

  10. eclipse版本命名规则与其他软件命名

    文章:Eclipse各版本代号一览表 eclipse使用星球.神话人物.元素名称作为命名代号. 所以思路要放宽,不要拘泥于已有经验. java是用咖啡命名的: python中文意思是蟒蛇: 不拘泥于已 ...