当给几个大小一样有boder的盒子浮动时，会出现margin自动加起来的结果。

　　此时可以给每个盒子一个margin-left:-border的长来实现很好的效果，这样右边的盒子会把左边盒子的右边border压住，如图所示。

　　还可以使用伪元素实现动态效果，代码如下。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Com-Margin</title>

    <style>

        div{

            height: 600px;

            width: 300px;

            border:1px solid #ccc;

            float: left;

            margin-left: -1px;

            position: relative;/*给盒子相对定位以使用z-index*/

        }

        div:hover{

            border:1px solid #f40;

            z-index: 1;/*使用z-index属性，这样选择盒子时就会给盒子一个在上面的叠放次序*/

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

解决盒子浮动时margin会显示两倍的美观问题的更多相关文章

  1. webapp 1px显示两倍的问题

    公司最近换新首页,按照设计师的要求<大家都在逛>的分割线要1个像素. .span-3{ width:33.3333%; &:not(:first-child){ &:bef ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. Vue中使用Vue.component定义两个全局组件，用单标签应用组件时，只显示一个组件的问题和 $emit的使用。

    解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...

  4. 使用盒子定位布局时margin和padding使用

    首先说的是区别: 如图所示,黄色padding,绿色margin,中间的content是内容,margin和padding的值是不计算在内容高宽的.这里补充的是在实际情况中边框宽度也是不计算在内的.这 ...

  5. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  6. 织梦dede:list标签在列表页同一文章显示两次的解决方法

    在列表页用{dede:list}标签调用文章的时候出现了同一篇文章显示两次的问题,经过一天的奋战最后终于解决了,下面CMS集中营站长简单说下我的解决过程来供各位学友参考:1.怀疑是不是每次添加都会自动 ...

  7. 如何解决 Matlab 画图时中文显示乱码的问题？

    使用的是win10系统,从前几个月某一天,我的matlab的figure里的中文都变成了口口.很是郁闷,还以为是动到了什么配置引起的. 前几天更新了matlab 2018b,发现还有这个问题.就觉得不 ...

  8. 解决ios下部分手机在input设置为readonly属性时，依然显示光标

    解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上  onfocus="this.blur()"  方法 添加 ...

  9. Typora笔记上传到播客时图片不显示问题解决（已解决）

    前言: ​ 相信我们都遇到过,使用Typora做笔记是一件非常令人舒服的事,然而,它却有一个非常难受的地方,那就是我们在做完笔记想要将其上传到自己的博客时,复制粘贴的图片无法显示.因为Typora复制 ...

随机推荐

  1. 一个docker容器中运行多个服务还是弄一堆docker容器运行？

    不建议直接在单个 Docker 容器中运行多个程序. 以 2017年 10 月18 日 Docker 官方支持 Kubernetes 为分水岭计算,Kubernetes 赢得容器编排之战的最终胜利已经 ...

  2. CentOS修改yum源为阿里云

    yum的工具,自动去下载某个yum仓库的 rpm软件包,并且自动搜索软件下载软件依赖,如同pip3,npm等包管理工具 yum载linux中的 yum仓库是 /etc/yum.repos.d 并且在这 ...

  3. Java正则表达式初学者使用法简介

    在Java中使用正则表达式的方法非常多,最简单的就是和字符串一起使用.对于Java正则表达式初学者,在String中有四个方法可以使用正则表达式,本文正是介绍这四个方法来使用正则表达式来处理文本数据. ...

  4. Mysql root账号general_log_file方法获取webshell

    在前面的phpmyadmin漏洞利用专题中介绍了如何通过root账号来获取webshell,但在现实情况中,由于Mysql版本较高以及配置文件的缘故,往往无法直接通过root账号写入网站真实路劲下获取 ...

  5. Swift 里 Array （一）内存结构

    public struct Array<Element>: _DestructorSafeContainer { #if _runtime(_ObjC) @usableFromInline ...

  6. 找到IIS 站点对应的站点日志

    IIS6 下 IIS7 下 1 找到日志文件的路径 2 找到站点ID 3 打开日志文件路径,找到站点ID 对应的日志文件夹.文件夹的最后一位数字,就对应着站点ID.

  7. [Umbraco] 创建第一个页面

    如何创建一个页面,很简单. 进入settings,首先右键点击“Document Types”, 在出现的菜单点击"Create",在弹出的窗口中 Master Document ...

  8. numpy.random.randn()与numpy.random.rand()的区别（转）

    numpy中有一些常用的用来产生随机数的函数,randn()和rand()就属于这其中. numpy.random.randn(d0, d1, …, dn)是从标准正态分布中返回一个或多个样本值. n ...

  9. Decorator装饰者模式(结构型模式)

    1.需求 假设让我们去设计FCL中的Stream类,该类具有流类的基本功能,除了有各种不同类型的流外(如内存流.文件流.网络流等等),但是在不同的业务场景下,如处理银行业务,需要给相关的内存流进行加密 ...

  10. 全网最详细的Windows系统里Oracle 11g R2 Client客户端（64bit）安装后的初步使用（图文详解）

    不多说,直接上干货! 前期博客 全网最详细的Windows系统里Oracle 11g R2 Client(64bit)的下载与安装(图文详解) 命令行方式测试安装是否成功 1)   打开服务(cmd— ...