通过子div覆盖父div的border-bottom
2016-03-14 18:18
246 查看
今天有个作业涉及到通过子div覆盖父div的border-bottom,如例子
点击前
点击后
简单解释:
如果不想子元素的border覆盖父元素的,可以在父元素加上overflow:hidden,让它变成BFC,里面的盒子不影响外面的盒子
额,顺便想到了一道前端面试题:点击打开链接
点击前
点击后
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 300px; height:300px; border:red solid 10px; } div a{ display: block; height:300px; } .bottom{ color:white; height:300px; border-bottom: 10px solid white; } </style> <script type="text/javascript"> function show (ojb) { ojb.className="bottom"; } </script> </head> <body> <div> <a href="#" onclick="show(this)">隐藏下边</a> </div> </body> </html>
简单解释:
如果不想子元素的border覆盖父元素的,可以在父元素加上overflow:hidden,让它变成BFC,里面的盒子不影响外面的盒子
额,顺便想到了一道前端面试题:点击打开链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #demo { width: 100px; height: 100px; border: 2px solid #000; position: relative; } #demo:after { content: ''; display: block; width: 14.1421px; height: 14.1421px; border-top: 2px solid #000; border-right: 2px solid #000; position: absolute; right: -10px; top: 20px; transform: rotate(45deg); background-color: #fff; } </style> </head> <body> <div id='demo'> </div> </body> </html>
相关文章推荐
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- html小技巧之td,div标签里内容不换行
- div flash firefox div层总是被flash层遮盖
- 小技巧处理div内容溢出
- 让超出DIV宽度范围的文字自动显示省略号...
- 解决div被flash挡住的设置方法
- 网页中Span和Div的区别
- firefox下rowspan+border+border-collapse的bug
- DIV+CSS经常用到的属性、参数及说明
- CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
- DIV CSS网页布局 最小高度(min-height)的妙用
- css下margin、padding、border、background和font缩写示例
- DIV border边框显示不完全问题的解决方法
- Div CSS absolute与relative的区别小结
- 图片垂直居中之姊妹 DIV垂直居中
- 基于Jquery+div+css实现弹出登录窗口(代码超简单)
- div scroll始终在最底部的实现代码
- div层跨越iframe帧显示在上面的解决方法附代码
- MySQL Workbench不能启动