关于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往外退 效果如下:
关于border边框重叠颜色设置问题的更多相关文章
- 27.给input边框和背景颜色设置全透明
给input边框和背景颜色设置全透明,但是里面的字不会消失 1.让背景颜色变透明(二选一) background-color:rgba(0,0,0,0); background:rgba(0,0,0, ...
- 7.css3表格、列表、边框的样式设置--list/border
1.css表格: ①Border-collapse是否把表格边框合并为单一的边框.Separate默认值,collapse合并. ②Border-spacing分割单元格边框的距离. ③Caption ...
- poi生成excel整理(设置边框/字体/颜色/加粗/居中/)
转: poi生成excel整理(设置边框/字体/颜色/加粗/居中/) 2016年12月02日 11:05:23 吃奶的牛 阅读数:34324 HSSFWorkbook wb = new HSSFW ...
- iPhone 6/plus iOS Safari fieldset border 边框消失
问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失. 示例代码: <div> <fieldset style="border: 1px ...
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- CCS3怎么实现border边框渐变效果
下图注册按钮的边框有渐变效果,如果让你来实现,你会怎么做呢 个人觉得,省事的做法,直接让UI给背景图片就可以了,如下图 不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图. ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
- CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...
随机推荐
- python2.X与python3.X爬虫常用的模块变化对应
python2 python3 import urllib2 import urllib.request,urllib.error import urllib.request,urllib.error ...
- vs13发布web程序 iis上
一.配置iis 1,找到控制面板--程序--启用或关闭Windows功能 2,从列表中选择Internet Infomation Services,并且把相应的功能条目勾选上,如果不清楚,可以全部选中 ...
- 1、Java多线程基础:进程和线程之由来
Java多线程基础:进程和线程之由来 在前面,已经介绍了Java的基础知识,现在我们来讨论一点稍微难一点的问题:Java并发编程.当然,Java并发编程涉及到很多方面的内容,不是一朝一夕就能够融会贯通 ...
- 【数据库】 SQL 使用注意点
[数据库] SQL 使用注意点 一. 索引 1. 常用的搜索条件,都建议加上索引,但状态列除外(该列只有0,1或几个值,不需要加索引,因为没效果) 2. 查询时, 索引列不能做函数处理,会不走索引 3 ...
- Anytime项目开发记录1
关于Android APP 应用设计,我并没有接受过系统的学习. 下面,是按照我一直以来的方法来进行编辑. 由于在程序开始之前并没有画类图,这里简单的讲述一下程序是如何设计的. 自己实现了一个Appl ...
- inline-block 空隙
IE8-9.Firefox.Safari 是4px Chrome下是8px 出现原因 标签换行引起 解决方案网上很多 但是在布局中尽量避免使用inline-block
- 【个人训练】The Cow Lexicon(POJ-3267)
继续大战dp.2018年11月30日修订,更新一下现在看到这个题目的理解(ps:就现在,poj又503了). 题意分析 这条题目的大意是这样的,问一字符串内最少删去多少的字符使其由给定的若干字符串构成 ...
- Ubuntu下使用Git_4
在这个第四个文章中,我将练习GIT的高级阶段了,由于高级阶段的内容转的比较多,我自己的代码除了我自己可以看懂意外,大家可能看不懂,所以我将会按照 http://git.wiki.navisec.it/ ...
- you need to resolve your current index first 已解决
从一个分支A切换到另一个分支B后,对切换后的B分支进行pull操作,因为pull操作实际上包含了fetch+merge操作,在执行 merge操作时,由于很长时间没有对B分支执行过pull/merge ...
- spring boot 过滤器实现接收 压缩数据 并解压
1.新加类GzipRequestWrapper 继承HttpServletRequestWrapper类 public class GzipRequestWrapper extends HttpSer ...