html border线条重叠,关于border边框重叠颜色设置问题
盒子模型包括:margin border padding content
在标准盒子模型中 conten不包括border和padding 就是他自身内容所包含的区域。
在IE盒子模型中 content包括border和padding 是内容和border padding之和。
关于盒子边框重叠颜色设置问题:
//就拿下列标签来说
- 房产
- 家居
- 二手房房
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往外退 效果如下:
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 边框消失. 示例代码:
html border线条重叠,关于border边框重叠颜色设置问题相关推荐
- 微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求 解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
- 自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求 解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
- css使两个盒子并列_css如何去掉重叠部分的边框?
在前端开发中,边框border属性是经常会用到的一个属性,它可以给元素添加边框:但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起(如下图),那么如何去掉重叠部分的边框? web ...
- css两个盒子之间只显示一条边框_css如何去掉重叠部分的边框?
在前端开发中,边框border属性是经常会用到的一个属性,它可以给元素添加边框:但两个相邻的元素在一起同时添加了边框,就会出现一个问题,边框会重叠在一起(如下图),那么如何去掉重叠部分的边框?web前 ...
- [css] 外边距重叠是什么?重叠的结果是什么?怎么防止外边距重叠?
[css] 外边距重叠是什么?重叠的结果是什么?怎么防止外边距重叠? 外边距重叠是什么?外边距重叠指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 重叠后的外边距的高度等于两个发生重叠的外边距的 ...
- border:none 与border:0的区别
border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为"0"像素效果等于bo ...
- matlab重叠保留法,【matlab实现】重叠相加法与重叠保留法
两个有限长的序列,当一个序列的长度远大于另外一个序列的时候,如果仍采用常规的处理方法,效率会很低,所以引入了重叠相加法和重叠保留法.下面我们就利用MATLAB来实现这两种方法. 在下面的代码中,我使用 ...
- css 两个元素重叠,css元素如何重叠?
css元素重叠的方法:1.给元素设置负margin,负margin可以让元素的占用空间变小,后面的元素可以覆盖当前的元素:2.使用position属性,利用相对定位和绝对定位来让多个元素进行重叠. 本 ...
- php美化字体带边框,还可以为其设置带图案的线条做为字体边框
在工作和学习中,有时为了封面内容好看,常常需要对文字进行效果上的修改.虽然PS在图形文字处理上有强大的功能,但是如果要求不高的话,小编还是认为用WPS就可以了.下面就来看看具体操作. 一.为" ...
最新文章
- wifi共享大师电脑版_手机开wifi热点,共享网络给电脑,变身4G无线路由器
- linux shell find depth,搞定 Linux Shell 文本处理工具,看完这篇集锦就够了
- 日立预计08财年亏损78亿美元 将裁员7千人
- 顺序程序设计03 - 零基础入门学习C语言09
- 在SpringBoot中使用slf4j与logbak
- 技嘉z77主板msata速度_功不可没的技嘉Z77主板_主板评测-中关村在线
- Android应用程序窗口(Activity)与WindowManagerService服务的连接过程分析
- 彭亚雄:7月24日阿里云上海峰会企业存储大神
- day21 re模块
- 金融数据获取的api接口
- 计算机基础5y浏览器,5y浏览器
- C# 大华相机图像采集
- 打游戏用什么蓝牙耳机好?英雄联盟手游推荐蓝牙耳机
- matlab谱系聚类图,如何看懂SPSS聚类分析的树状图/谱系图?
- 感冒究竟能不能喝咖啡
- Kibana查询耗时
- 数据清洗是清洗什么?
- LinkedList底层链表结构
- cat实时监控-入门demo
- 25_类和面向对象的概念
热门文章
- 计算机二级培训ppt,计算机二级PPT真题:科技政策培训PPT
- mac 10.11 brew php71,MAC OS X 10.11.4下载-OS X 10.11正式版下载 V10.11.6-PC6苹果网
- vue父子传值,slot插槽的使用
- FreeXploiT HTML(Hacker Technology Mad Lead)
- (二)基于kubernetes(1.25.2) 进行基础prometheus监控
- SQL Server Note [vaynexiao]
- 记一次投稿springer期刊,利用tex排版文稿
- pt-table-checksum 使用实践
- Zynq芯片开发流程
- 美国第三季度GDP超预期增长2.6%,铁矿石期货跌4%创新低,欧洲央行加息75个基点