给所有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. 【OpenGL游戏开发之二】OpenGL常用API

    OpenGL常用API 开发基于OpenGL的应用程序,必须先了解OpenGL的库函数.它采用C语言风格,提供大量的函数来进行图形的处理和显示.OpenGL库函数的命名方式非常有规律.所有OpenGL ...

  2. Android TextView文字描边的实现！！

    Android开发:文字描边 转自:http://www.oschina.net/code/snippet_586849_37287 1. [代码][Java]代码 1 2 3 4 5 6 7 8 9 ...

  3. poj3507---去掉最小值和最大值

    #include <stdio.h> #include <stdlib.h> int main() { ) { ,max=,min=,t; ; i<; i++) { sc ...

  4. 关于 unity3d securityexception no valid crossdomain policy available 的错误解决方法

    错误大概就是这样的,事实上我一直没有注意,好像是我转平台到webplayer的关系,就无法访问自己的服务器上面的东东了,现在怎么做呢? 在自己的服务器根目录(哪个是根目录不懂,可以去投胎了哈),创建一 ...

  5. linux系统的性能问题排除分析

    需要结合sar和top进行检查. top下关注load,%wa,%idle等 sar -u -o cpureport 10 3 每10秒采集3次 放在同目录下的文件cpureport 里 检查io s ...

  6. oracle动态游标

    declare   v_col1 varchar2(254);   v_col2 varchar2(254);   v_sql  varchar2(1024);   type my_cursor is ...

  7. php,ajax登陆退出

    利用ajax可以做到页面无刷新登陆. 运行效果 目录结构 site/ css/ images/ js/ site/css/bootstrap.css(bootstrap样式表) site/js/boo ...

  8. WinForm DataGridView看似刷新的问题

    昨天同事winform遇到一个问题, 窗体上有一个时间控件,和一堆文本,下拉控件,时间控件是每秒都在动态走的 窗体下发一个DataGridView 控件显示保存后的数据 保存的数据库是在另一台机器B上 ...

  9. 在EBS中如何创建CUX_TOP

    1.创建cux用户1.1.创建表空间SQL> conn / as sysdba;Connected.SQL> create tablespace CUXD datafile '/vis/d ...

  10. win32 控件的创建和消息响应

    1. 控件的创建 控件的创建和窗口创建是一样的,例如: ,,,, hWnd,(HMENU)IDB_BUTTON01,hInst,NULL); 是一个按钮的创建,其中hWnd是窗口句柄,hInst是应用 ...