当前位置: 首页 > Web开发 > 开发 >正文

值得了解的关于CSS auto的相关知识!!

来源:互联网时间:2021-05-31 18:12:52编辑:网友分享
在CSS中,我们有auto值,它可以用于像margin,position,height,width等属性。在本文中,会先解释auto的工作方式以及如何最大程度地利用auto的技术细节,当然,会配合一些用例和示例。
值得了解的关于CSS auto的相关知识!!

在CSS中,我们有auto值,它可以用于像margin,position,heightwidth等属性。在本文中,会先解释auto的工作方式以及如何最大程度地利用auto的技术细节,当然,会配合一些用例和示例。

简介

auto关键字的使用因属性而异。 对于本文,我将在每个属性的上下文中解释值。

width: auto

块级元素(如<p><p>)的初始宽度是auto,这使得它们占据了包含它们的块的整个水平空间。

根据CSS规范

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ +‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = 块的宽度

当一个元素的宽度值为auto时,它包含marginpaddingborder,不会变得比它的父元素大。其中 content 的宽度将是content本身减去marginpaddingborder

值得了解的关于CSS auto的相关知识!!

css

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

一切都好,元素 item 被限制在其父项中。

值得了解的关于CSS auto的相关知识!!

值得了解的关于CSS auto的相关知识!!

这里使用 flex 布局将按钮排列在一起。

CSS

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

对于 PC,我们每个项需要都取全宽。在这种情况下,你可能倾向于使用width: 100%,对吗?下面是一个更好的解决方案。

CSS

@media (min-width: 800px) {
    /* Revert the wrapper to a block element instead of flex */
    .group {
        display: block;
    }

    .group__item {
        width: auto;
    }
}

由于.group是一个块元素,因此使用width: auto可以很好地填充其父元素的可用空间。

事例源码:https://codepen.io/shadeed/pen/399de6d9d473137998f87f957cfdfa03?editors=1100

height: auto

说到height,情况就不一样了。元素的高度等于默认值为auto的内容。

考虑下面的例子

<p class="wrapper">
  <p class="item">What's my height?</p>
</p>

要使.item获得其容器的全部高度,我们可以使用以下方法之一:

  1. .wrapper一个固定的高度,然后为.item元素添加height: 100%

  2. .wrapper使用 flex 布局,默认情况下它将拉伸子项.item

CSS

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}

值得了解的关于CSS auto的相关知识!!

根据CSS规范:

如果margin-leftmargin-right值均为auto,则它们的使用值相等。 这使元素相对于包含块的边缘水平居中。

值得了解的关于CSS auto的相关知识!!

CSS

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

事例源码:https://codepen.io/shadeed/pen/b086f8402be981e871ac5db15495dec8?editors=0100

Flexbox

在某些情况下,在flexbox中使用自动页边距非常有用。当一个子项目有一个marginauto 时,它将被推到远的另一边。例如,如果一个flex项目的左边是margin-left: auto,那么它将被推到最右边。

考虑下面的模型,父级元素是一个 flex 布局:

值得了解的关于CSS auto的相关知识!!

值得了解的关于CSS auto的相关知识!!

值得了解的关于CSS auto的相关知识!!

值得了解的关于CSS auto的相关知识!!

MDN 描述

该项目根据其宽度和高度属性调整大小,但会增长以吸收flex容器中的任何额外自由空间,并会收缩到其最小尺寸以适合该容器,这等效于设置“ flex:1 1 auto”。

具有flex:auto的项目将根据其宽度和高度来调整大小,但它可以根据可用的额外空间来增大或缩小。 在研究本文之前,我不知道这一点!

HTML

<p class="wrapper">
  <p class="item item-1">Item</p>
  <p class="item">Item</p>
  <p class="item">Item</p>
</p>

CSS

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}

值得了解的关于CSS auto的相关知识!!

grid 和 auto 边距

使用CSS网格时,可以使用自动页边距实现类似于 flexbox 的结果。 当我们有一个网格,并且其中的网格项目具有margin-left: auto时:该项目将被推到右边,其宽度将基于其内容长度

考虑下面的例子:

值得了解的关于CSS auto的相关知识!!

值得了解的关于CSS auto的相关知识!!

然而,这可能会显示一个滚动条,即使内容高度很短。参见下面的示例

值得了解的关于CSS auto的相关知识!!

position 属性

对于CSS定位属性top,right,bottom和left,我们可以使用auto关键字作为它们的值。 接下来我要解释的是对我来说是新的,我在研究本文时学到了它。

考虑下面的模型:

值得了解的关于CSS auto的相关知识!!

在CSS中,每个属性都有一个初始值/默认值。 如果我检查了子项并转到computed styles,你猜下left属性的值会是什么?

值得了解的关于CSS auto的相关知识!!

如何在较大的视口中重设left? 我们不能使用left:0,因为这会将子元素粘到边缘,这不是我们想要的。 请参阅下面的模型,以了解我的意思。

值得了解的关于CSS auto的相关知识!!

top属性也是如此。 对于rightbottom属性,其默认计算值分别等于元素的宽度和高度。

事例源码:https://codepen.io/shadeed/pen/d062539938346e5458f769cbc08833e1?editors=0100

用例和示例

值得一提的是,下面的用例可能还不够,但是我尝试添加一些用例,希望它们对你们有用。

提示箭头

对于提示框,我们需要一个指向箭头,以使其对用户更加清晰。 如果我们正在设计系统上,则应该考虑多个状态。 例如,提示的箭头指向左侧,另一个箭头指向右侧。

值得了解的关于CSS auto的相关知识!!

请注意,在初始实现中,我使用left: auto来覆盖left: -15px。 供您参考,这是非常常用的,我建议改用以下内容:

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /* Arrow code */
    position: absolute;
    right: auto;
    left: 100%;
}

通过使用100%,我们避免了使用硬编码的值(箭头宽度),如果我们改变箭头的大小,这个值可能会失败。这是一个更经得起时间考验的解决方案。

卡片组件

你可能有一个card组件,其左上角有一个操作,它可能仅用于装饰,也可能是一个有用的操作。不管是什么,你都应该考虑到它是双向的。

值得了解的关于CSS auto的相关知识!!

Flexbox 和 自动边距

当谈到flexbox时,它有无限的可能性。 通过将其与自动边距相结合,我们可以构建功能强大的布局。

考虑下面的例子

值得了解的关于CSS auto的相关知识!!

CSS

.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item__action {
  margin-left: auto;
}

就是这样! 通过使用margin-left: auto,将动作推到最右角。 更好的是,如果您要构建多语言网站,我们可以使用CSS逻辑属性。 CSS将如下所示:

.item__action {
    margin-inline-start: auto;
}

CSS grid 和自动边距

在向网格项目添加边距时,它可以是固定值,百分比或自动值。 我对auto更感兴趣。 考虑以下:

值得了解的关于CSS auto的相关知识!!

CSS

.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

我想将label 与input的左边缘对齐。 为此,我需要应用以下内容:

.input-group label {
    margin-left: auto;
}

值得了解的关于CSS auto的相关知识!!

这样,只有当内容高度足够大时,它才会显示滚动条。

英文原文地址:https://css-tricks.com/almanac/properties/o/overflow/

作者:shadeed

更多编程相关知识,请访问:编程教学!!

以上就是值得了解的关于CSS auto的相关知识!!的详细内容,更多请关注web开发者其它相关文章!

上一篇: 详解使用Docker给nodejs程序打包

下一篇:css3怎么实现强制不换行

您可能感兴趣的文章

相关阅读