小技巧啊
程序员文章站
2022-04-22 14:02:48
...
(1)解决子元素浮动,父元素设置overflow:hidden后子元素超出部分隐藏的办法
子元素浮动,父元素设置overflow:hidden,爷爷元素设置position:relative.子元素超出的部分就不会隐藏啦。
看代码:
<!doctype html>
<html>
<head>
<style>
.wrapper{
width:300px;
height:300px;
background:maroon;
margin:200px auto;
position:relative;
top:0;
left:0;
}
.child{
width:300px;
height:100px;
background:blue;
overflow:hidden;
}
.smallest{
width:99px;
border-right:1px solid #ccc;
height:100px;
float:left;
background:yellow;
}
.small_child{
position:absolute;
top:100px;
left:0;
width:200px;
height:100px;
background:pink;
z-index:999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="child">
<div class="smallest">
<div class="small_child">
</div>
</div>
<div class="smallest">
</div>
<div class="smallest">
</div>
</div>
</div>
</body>
</html>
效果图如下:
(2)解决div里面包一个img元素,div元素的高度总是比img元素高度多4px,给img元素设置vertical-align:middle就可以去掉多余的4px高。
上一篇: CSS-文字超出隐藏
下一篇: css--文字超出省略号
推荐阅读
-
csdn 博客的css样式 v3_javascript技巧
-
晋城吧对DiscuzX进行的前端优化要点_php技巧
-
详解PHP中的mb_detect_encoding函数使用方法_php技巧
-
JavaScript prototype 使用介绍_javascript技巧
-
javascript和HTML5利用canvas构建猜牌游戏实现算法_javascript技巧
-
微信小程序 实现listview带字母滑动
-
JavaScript对象参数的引用传递_javascript技巧
-
jQuery+php实现ajax文件即时上传的详解_php技巧
-
C# 执行bat批处理文件的小例子
-
让JavaScript和其它资源并发下载的方法_javascript技巧