解决盒子浮动时margin会显示两倍的美观问题

li21 发布于2019-04-23 13:40 / 1958人阅读

摘要：当给几个大小一样有的盒子浮动时，会出现自动加起来的结果。此时可以给每个盒子一个的长来实现很好的效果，这样右边的盒子会把左边盒子的右边压住，如图所示。给盒子相对定位以使用使用属性，这样选择盒子时就会给盒子一个在上面的叠放次序

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

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

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Com-Margintitle>
    <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>

GPU云服务器云服务器浮动显示 html5浮动问题支付时常见问题云服务器销售会遇到哪些问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2196.html

50道CSS基础面试题（附答案）

摘要：弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用这一标记，将浏览器从所有情况中分离出来。偶数字号相对更容易和设计的其他部分构成比例关系。 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本I...

wua_wua2012 2019-08-30 13:58 评论0 收藏0
整理 45 道 CSS 基础面试题（附答案）

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2、box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-boxcontext-box：W3C...

alanoddsoff 2019-04-23 14:38 评论0 收藏0
CSS面试须知，哪些需要掌握得CSS技巧

摘要：首先，巧妙的使用这一标记，将浏览器从所有情况中分离出来。类似于优先级机制优先级最高，有他们在时，不起作用，值需要调整。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。偶数字号相对更容易和设计的其他部分构成比例关系。 1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + paddin...

wushuiyong 2019-08-30 11:24 评论0 收藏0
CSS 面试题总结

摘要：而名作为标签的身份则是唯一的，在页面中只能出现一次。会导致父容器高度塌陷。堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。之后的内联对象会被排列在同一行内。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。 CSS 中类 (classes) 和 ID 的区别。书写上的差别：class名用.号开头来定义，id名用#号开头来定义；优先级不同（权重不同）调用上的...

tomato 2019-08-29 15:06 评论0 收藏0
深入理解css中的margin属性（最新浏览器支持）

摘要：竖直方向的外边距合并两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。本文启发于博客园一篇2016年的深入理解css中的margin属性文章，根据当前浏览器（chrome 71.0.3578.98（正式版本）（64 位）），加上自己的理解，每个例子都是亲测过这篇博文主要分为以下几个部分： margin--基础知识margin--在同...

bingo 2019-08-30 15:55 评论0 收藏0