给所有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. 大型项目使用Automake/Autoconf完成编译配置

    http://www.cnblogs.com/xf-linux-arm-java-android/p/3590770.htmlhttp://blog.csdn.net/zengraoli/articl ...

  2. poj3650---将一个字符串中的特定字符转换

    #include <stdio.h> #include <stdlib.h> #include<string.h> int main() { ]; int i; w ...

  3. #include <iomanip>

    1 setfill 2 setprecision 3 setw 1 setfill setfill( 'c' ) 设填充字符为c ▲setfill(char c) 用法 : 就是在预设宽度中如果已存在 ...

  4. 【Stackoverflow好问题】Java += 操作符实质

    问题 直到今天,我都一直以为: i += j 等同于 i = i + j; 但如果有: int i = 5; long j = 8; 这时 i = i + j不能编译.但i += j却能够编译.这说明 ...

  5. 利用ItextPdf、core-renderer-R8 来生成PDF

    近期因为工作上的须要,须要做一个简历产品的下载功能,而下载的形式要去为PDF,内容要求为整个简历的内容,并且格式上要求和简历的格式排版时一致的!前期调研.开发,最后測试上线.差点儿相同花了7天的时间. ...

  6. Egret初体验–躲避类小游戏

    下面简单介绍一下我这个游戏:基本上就3个画面(准备再添加一个胜利的界面)开始画面,一个按钮,点击进入游戏游戏画面,滚动的背景,触摸移动的老鹰,从天而降的翔,以及右上角的时间条结束画面,显示结果,关注按 ...

  7. pagination分页插件

    最近做了个项目,有用到分页, 这类插件应该是很常用的, 虽然网上很多现成的分页插件, 但是还是想着自己写一个, 给自己积累点东西, 顺便练练手, 写了差不多3个小时左右, 代码如下: 代码: < ...

  8. asp.net验证控件中常用的正则表达式

    只能输入数字:“^[0-9]*$” 只能输入n位的数字:“^\d{n}$” 只能输入至少n位数字:“^\d{n,}$” 只能输入m-n位的数字:“^\d{m,n}$” 只能输入零和非零开头的数字:“^ ...

  9. 使用 MyEclipse远程调试 Java 应用程序

    远程调试,需要本程序和服务器上的程序源码是相同的,这我们服务器使用的是tomcat7.在本地通过MyEclipse 10来调试服务器上的代码,需要本地能访问到服务器,我的服务器是在linux下. 1. ...

  10. some knowledge t

    NSNumber static 看下面例子  gCount可以在Person 文件中使用  在main 中不行 @property()括号中可以填的属性 国际化 OC中的快捷键操作 operation ...