给所有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. Delphi 实现无窗口移动（发WM_NCHITTEST消息计算，然后再发WM_SYSCOMMAND消息，带参数SC_DRAGMOVE）

    procedure imgListMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer) ...

  2. MYSQL 简单的循环存储过程

    BEGIN ; ; DO DO ); ; ) THEN ; END IF; END WHILE; ; ; END WHILE; END

  3. 收敛 p75

    三种收敛.中心极限定理.大数定理.delta方法

  4. poj - 1228 - Grandpa's Estate

    题意:原来一个凸多边形删去一些点后剩n个点,问这个n个点能否确定原来的凸包(1 <= 测试组数t <= 10,1 <= n <= 1000). 题目链接:http://poj. ...

  5. C_const

    const * const在*左边,指向一个常量. * const const在*右边,指针是常量. 1 const int *p;//指向常量的指针,与下面一样 2 int const *p1;// ...

  6. ios 常用宏（copy）

    分享一下我现在用的 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3 ...

  7. ASP.NET MVC 学习之路-1

    本文在于巩固基础 学习参考书籍:ASP.NET MVC4 Web编程 首先确定我们学习MVC的目标: 我们学习ASP.NET MVC的目的在于开发健壮的.可维护的Web应用,当然这需要一定的知识基础, ...

  8. css笔记：如何将一个页面平均分成四个部分？

    今天,我在刷面试题的时候,突然想到一道题:如何将一个页面平均分成四个部分(div)呢?其实难度也不大,于是直接上代码 <!DOCTYPE html> <html lang=" ...

  9. SSIS之Foreach循环容器用法

    要实现的业务:A数据库服务器上某库的T_GOODS_DECL的状态字段“Is_Delete”标记为“1”的时候删除B数据库服务器上对应库的T_GOODS_DECL表中的记录,二者的主键为“DECL_N ...

  10. iOS - SQLite Database 操作数据库

    iOS - SQLite Database 操作数据库   Sqlite 能被用在ios上做数据处理用,只要你懂得一点sql 就很容易使用sqlite 1:创建一个简单的View based appl ...