给所有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. [工具]Mac下非常好用的快捷终端Dterm

     [工具]Mac下非常好用的快捷终端Dterm A command line anywhere and everywhere 这是可在任何目录下直接用全局快捷键直接调出命令输入框的小工具,非常好用 作 ...

  2. objective-c 可变参数

    容易发现Cocoa Foundation 中提供了一些可变参数的方法,如: NSLog(NSString *format, ...) 在实际的编程实践中,我们也需要自己实现可变参数的方法.在Objc中 ...

  3. 高级new创建

    myclass *p = new(pcathe)myclass[10];//限定区域分配内存,覆盖模式,可以避免内存泄漏 #include <iostream> class myclass ...

  4. hdu 5540 Secrete Master Plan（水）

    Problem Description Master Mind KongMing gave Fei Zhang a secrete master plan stashed × matrix, but ...

  5. Data Structure(3)——软考阶段学习小结

    数据结构计算机等级考试中有,自考中有,软考中同样有,可见其内容的重要程度,今天对软考阶段视频学习内容的总结,同样是对前面学习内容的回顾,同样是对后面学习的铺垫. 中结:原本因为之前有过类似的总结,这次 ...

  6. sql 查询结果中加入空值列

    select a,b,c,''d from X; 其中d为新加列,''表示默认值为空值 原文:http://hi.baidu.com/ddduggguo/item/747d5ba5ca18fd2689 ...

  7. gulp简单使用小记

    npm install --save-dev 写入package.json里     var gulp = require('gulp'); var less = require('gulp-less ...

  8. js——DOM操作（一）

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  9. boost signal2 slot_base

    先看成员_tracked_objects,从字面上讲是被跟踪的对象,再看,相关函数 bool expired() const,这个函数是检查_tracked_objects是否已经expired.只不 ...

  10. Description：一根高筋拉面，中间切一刀，可以得到2根面条。如果先对折1次，中间切一刀，可以得到3根面条。如果连续对折2次，中间切一刀，可以得到5根面条。Input:你的程序需要解决的问题是，输入连续对折的次数。NOutput输出中间切一刀，可以得到多少根面条。

    #include<iostream> using namespace std ; int main() { int n ; while(cin >> n) { << ...