浅谈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

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