CSS清除浮动方法参考:

https://blog.csdn.net/promiseCao/article/details/52771856

    <style>
*{
margin: 0; padding: 0; list-style: none; font-size: 12px;
}
.outer{
width: 560px;
margin: 10px auto;
border: 1px solid #000;
padding: 10px 0 0 10px;
}
.outer>h2{
text-align: center;
font-size: 18px;
margin-bottom: 10px;
} .outer>ul{
/* overflow: hidden; */
/* 这里不能用overflow: hidden; 否则li里面img超出ul范围边角会被裁剪。
疑问: 这里的li是浮动流, 怎么也可以撑起外层盒子的高度??
其实还是会导致塌陷。 由后面 :after 伪元素的设置解决了这个问题。 */
zoom: 1;
/* zoom: 1; 什么作用?? */
}
.outer>ul:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
/* :after伪类+content 清除浮动的影响 。
这些设置撑起了ul的高度。 (li是浮动流,所以撑不起外层盒子。) */
} .outer>ul>li{
width: 80px;
height: 80px;
padding: 10px;
float: left;
background: #f0f0f0;
border: 1px solid #000;
margin: 0 10px 10px 0;
cursor: crosshair;
position: relative;
} /* 子绝父相,img参照li 定位,hover的时候才显示。
由操作引发,后面显示的内容覆盖了原本的,要联想到定位这个方法! */ /* 疑问:
img是属于li标签内的。所以图片的显示只能从li元素的左上角边界开始。
怎么实现左上角能超出边框显示???
    ul不要设置overflow: hidden , 就不会导致img边角被裁减。 */ .outer>ul>li>img{
position: absolute;
left: -14px;
top: -14px;
display: none;
border: 2px solid #000; z-index: 1;
/* z-index要设置,否则img的边框被li给覆盖了。 */
} .outer>ul>li:hover img{
display: block;
} /* .outer>ul>li:hover{
background: url("imgs/1.jpg") -20px -20px no-repeat;
} */
</style>

CSS笔记 - fgm练习 2-10 - 提示框效果 (清除子元素浮动高度塌陷的影响)的更多相关文章

  1. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  2. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  3. WPF提示框效果

    WPF提示框效果 1,新建WPF应用程序 2,添加用户控件Message 3,在Message中编写如下代码 <Border x:Name="border" BorderTh ...

  4. 单一按钮显示/隐藏&&提示框效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  6. 基于JQuery 的消息提示框效果代码

    提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...

  7. DIV+CSS实现左侧带三角形的提示框

    实现效果

  8. Android学习笔记通过Toast显示消息提示框

    显示消息提示框的步骤 这个很简单我就直接上代码了: Button show = (Button)findViewById(R.id.show); show.setOnClickListener(new ...

  9. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

随机推荐

  1. XML解析——SAX解析以及更方便的解析工具(JDOM、DOM4J)

    XML主要用于数据交换,HTML则用于显示. 相对于DOM的树形解析,SAX采用的是顺序解析,这种解析方法可以快速地读取XML数据的方式. SAX主要事件: No. 方法 类型 描述 1 public ...

  2. Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018

    Top 22 Free Responsive HTML5 Admin & Dashboard Templates 2018 May 18, 2018 Alex Ivanovs Website ...

  3. OpenCASCADE中散乱Edge生成Wire

    OpenCASCADE中散乱Edge生成Wire eryar@163.com Abstract. In OpenCASCADE a wire can be built from any number ...

  4. linux 进程等待 wait 、 waitpid

    waitpid() 与 wait() 功能相似,都是用户主进程等待子进程结束或中断. 可用于进程之间的同步 wait 函数原型 pid_t wait(int *status); 函数说明 wait() ...

  5. js---11闭包

    //匿名立即调用函数 (function(){//把a,b,f全部隐藏在函数中,外部访问不到, var a = 5; var b = 6; function f(){ alert(a); } wind ...

  6. vim 计算器寄存器使用

    我们可能会在vim的使用中,碰到下面的情况 当我正在写一周预算的时候,我想计算下每天我买菜花2.7,每天买两顿,周死晚上出去吃,周六额外买1.5斤14.8一斤的猪肉... 这时候你打算怎么办呢,是不是 ...

  7. JS实现队列效果,先进先出

    /** * [Queue] * @param {[Int]} size [队列大小] */ function Queue(size) { var list = []; //向队列中添加数据 this. ...

  8. Day1下午解题报告

    预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...

  9. 配置Lotus Domino集群视频详解

    IBM Lotus Domino Server 有个最重要的高可用特新就是集群,它对于任何使用 Domino 服务器的组织,让用户能够持续访问它们的数据库,保证业务不间断运行.下面通过两个视频来学习如 ...

  10. android学习笔记五。1、Service深入学习

    一.Service,服务是没有界面而在后台长期运行的程序,可以看做是后台的Activity. 1.在Android中按返回键退出一个应用并不会(内存充足时)直接销毁一个进程,所以其中的子线程也可以在后 ...