CSS3:如何删除flex-container周围的白色边框?

时间:2016-11-18 19:03:23

标签: css css3 flexbox

按照w3schools上的flex-container示例,有以下示例: http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flexline



.flex-container {
  display: -webkit-flex;
  display: flex;
  width: 400px;
  height: 100%;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
&#13;
&#13;
&#13;

我已将结果附加为图像。该图像显示浏览器边缘和flex-container之间的白色边框。

如何删除白色边框?

flex-container with white border around

3 个答案:

答案 0 :(得分:1)

您看到的边框是html默认浏览器边距。重置所有边距和填充元素是一种很好的做法:

* { //* is known by wildcard, it selects all elements on the DOM
  margin: 0;
  padding: 0;
}

请务必在css上避免使用!important,这是一种非常糟糕的做法,而且重用/维护代码会变得更加困难。

答案 1 :(得分:1)

如果问题是由于身体上缺少浏览器重置,我通常会将以下内容添加到我的网站/应用程序中:

1

解决方案的JSFiddle:https://jsfiddle.net/j66gcfcj/

作为浏览器重置的一部分,您可以使用:

html, body {
    width: 100%;
    height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        }

以上内容可以轻松解决您的问题,但会影响您网站中的所有内容。我通常使用上面的通配符实际应用* { margin: 0; padding: 0; } ,如下所示:

box-sizing: border-box;

如果您不想影响您已经处理过的网站,并希望严格关注Flex容器,请使用以下内容:

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

您还可以对Flex容器内的所有内容进行通配符选择:

.flex-container {
    margin: 0;
    }

并且说你想将.flex-container * { margin: 0; } 应用于你的Flex容器以及其中的所有内容:

margin: 0

您可以访问以下网址了解有关浏览器重置的详情:

http://meyerweb.com/eric/tools/css/reset/

答案 2 :(得分:0)

尝试为容器添加css规则:

.flex-container {
  margin: 0 !important;
}

或者让你的弹性容器全宽。例如:

min-width: 100vw;

最好重置CSS顶部的所有paddingsmargins

* {
  margin: 0 !important;
  padding: 0 !important;
}

这可以防止出现这样的问题