给所有div加上边框=10px之后，再给所有div设置margin-left与margin-top;以及浮动（float:left）

因此时需要鼠标悬停效果：所以设置给div设置伪类:hover,然因浮动脱离了标准流。所以覆盖了div的边框,所以鼠标悬停时div边框显示不全设置定位（position:releative;）之后；

经测验：在html中的层级关系为；标准流<浮动流<定位；所以现在鼠标悬停时div所有的边框都会显示，可以模仿淘宝案例等；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

      div{

            width: 400px;

            height: 200px;

            border:10px solid #ccc;

            float: left;

            margin-left: -10px;

            margin-top:-10px; }

        div:hover{

            border-color: red;

            position: relative;

        }

        .content{

            width: 1620px;

            height: 600px;

            padding: 20px;

            border:none;}

    </style>

</head>

<body>

    <div class="content">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>

</html>

源码

CSS：margin负数的使用的更多相关文章

  1. 细说 CSS margin

    作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...

  2. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  3. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  4. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  5. CSS——margin

    CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...

  6. 盒子模型的margin负数用法

    盒子的margin用法大家都应该很清楚,在实际中一般使用margin来水平居中或者让自己移动相应的位置,但是margin给负数在实际中也是有用的. 如图为两个浮动的盒子. 给左边的盒子margin-l ...

  7. CSS Margin（外边距）

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  8. CSS：CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

  9. CSS margin collapsing All In One

    CSS margin collapsing All In One margin collapsing margin 塌陷 / margin 合并 会出现 margin collapsing 的 3 种 ...

随机推荐

  1. pagespeed 安装（chrome版和firefox版）

    原文地址:http://blog.sina.com.cn/s/blog_6c9da636010103va.html pagespeed  让你的网站页面打开速度飞起来! 1.firefox版本下的安装 ...

  2. res://ieframe.dll/acr_error.htm 纯手动解决方法

    res://ieframe.dll/acr_error.htm 引起这个原因的是,你IE浏览器的扩展组件的问题,因为不知道是具体哪个组件出了问题,所以要采用一刀切的方法来处理: 在开始/或开始键+R, ...

  3. Python 随即生成DAG(有向无环图)

    给校队选拔赛出了道DAG上的背包问题,需要生成DAG数据. 最开始使用的方法是先随机生成再判环,如果有环就重新生成.这种方法得到DAG的概率随着点数和边数的增加而急速降低,为了一个DAG要生成很多次, ...

  4. Java面试题之jsp相关

    一.jsp有哪些内置对象?作用分别是什么? 分别有什么方法? 本帖隐藏的内容 答:JSP共有以下9个内置的对象: request 用户端请求,此请求会包含来自GET/POST请求的参数 respons ...

  5. null类型的字段加1

    很高兴今天学到了一种新方法. 数据库中字段类型为Long ,值可能为null,也可能是某一数.因此对该字段数值进行 +1操作时需要判断该值是null还是数值. 同时实现更新操作.具体如下: updat ...

  6. Windows Server 2008 安装好之后的简单配置

    1.禁用密码复杂度 在运行中输入GPEDIT.MSC 打开组策略,找到计算机配置->Windows设置->安全设置->账户策略中的密码策略,将“密码必须符合复杂性要求”设置为禁用即可 ...

  7. Java 中 静态方法与非静态方法的区别

    静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这种方 ...

  8. js基础——cssText

    以前,只知道设置css里的属性都是通过  元素.style.属性名 = 属性值  的方式,此时经常遇到的情况就是类似这样: var head= document.getElementById(&quo ...

  9. gcc 编译器

    gcc -E test.c  预处理 gcc -v test.c  查看编译的整个过程 objdump -d a.out 查看elf文件

  10. codeforces 659C . Tanya and Toys 二分

    题目链接 将给出的已经有了的排序, 在前面加上0, 后面加上1e9+1. 然后对相邻的两项判断. 如果相邻两项之间的数的和小于m, 那么全都选上, m减去相应的值. 如果大于m, 那么二分判断最多能选 ...