浅谈css阻断合拼及别的危害

日期：2021-01-20 类型：科技新闻我要分享

关键词：抠图换背景，免费的抠图软件，美图抠图，手机抠图软件哪个好，p图软件哪个好用

margin 的不正交和

margin好用时会造成合拼的状况

下列特性会阻断 margin 合拼

border

display: table

display: flex

以上內容为結果详解在正下方

阻断合拼【详解】

/* CSS */

    .box{
        border:1px solid red;
        height: 100px;
        margin: 10px; /* 留意：这里是10像素哦！ */
    }

<!-- HTML -->

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

访问器中是这个样的：

按理数 margin 应当是 div 左右之间的间隔应当为 20px

处理方法 1、

<!-- HTML -->
<!-- css不会改变 -->

<div class="box"></div>
<div style="border: 1px solid blue"></div> <!-- 新加 -->
<div class="box"></div>
<div style="border: 0.1px solid blue"></div> <!-- 新加 -->
<div class="box"></div>
<div class="box"></div>

访问器中是这个样的：

<!-- HTML -->
<!-- css不会改变 -->

<!-- HTML -->
<div class="box"></div>
<div style="display: table"></div>
<div class="box"></div>
<div style="display: flex"></div>
<div class="box"></div>
<div class="box"></div>
<!-- display:block / inline 不容易阻断合拼 仅有table flex 能够 -->

访问器中是这个样的：

别的危害

display 会危害 ul li 的小圆点

position：absolute 会危害 display：inline

position：fixed 会危害 transform

float 会危害 inline

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：公司做互动交流营销推广前有哪些难题必须思索返回下一篇：没有了