当前位置： 首页 > Web前端 > HTML

你需要知道的关于CSS中自动的一切！

时间：2023-04-02 18:37:12 HTML

作者：shadeed译者：前端小智来源：css-tricks喜欢再看，养成习惯分类，也整理了很多我的文档，教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。在CSS中，我们有自动值，可用于边距、位置、高度、宽度等属性。在本文中，我将首先解释自动工作原理的技术细节以及如何充分利用它，以及一些用途当然是案例和例子。简介auto关键字的使用因属性而异。对于本文，我将在每个属性的上下文中解释这些值。width:auto块级元素，如

或

的初始宽度为auto，这使得它们占据了其包含块的整个水平空间。根据CSS规范：'margin-left'+'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right'=blockWidth当元素的宽度值为auto时，它包括边距、填充和边框，并且不会变得比其父元素大。内容的宽度将是内容本身减去边距、填充和边框。我们以上面的模型为例。html

LoremIpsum，痛苦伴随着consecteturadipisicingelite。Eosmaximecumnoncupiditate，preferendissaepelifefugiatidexerciseemofficiisvoluptatewithoutducimuscommodireiciendisitaerrorpainsipsam？

css*{box-sizing:border-box;}.wrapper{最大宽度：600px;保证金：2rem自动0；填充:1rem;}.item{填充：1rem;保证金：050px；边框：15pxsolid#1f2e17;}15pxsolid#1f2e17;是的，如果我们将元素项目的宽度更改为100%而不是自动，会发生什么？该元素将占据其父元素的100%，加上左右边距。//css.item{宽度：100%；填充:1rem;保证金：050px；border:15pxsolid#1f2e17;}大家都说简历里没有项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。元素的宽度为568px，它是：'border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'=15+16++16+15=568px如果方向是ltr，则完全忽略右边距。在我们的例子中，这发生了。但是，如果布局是rtl，则margin-left将被忽略。示例源代码：https://codepen.io/shadeed/pe...width用例：auto仅解释基础知识不足以让我们掌握这个概念，因此需要一些示例来说明。移动设备和PC之间的宽度不同我们有一组按钮。在移动设备上，我们希望它们彼此相邻（每个按钮包装器占据其父元素的50%），而在桌面上，每个按钮应占据其父元素的整个宽度。怎么做？HTML登录
Register
这里使用了flex布局，把按钮排列在一起。CSS.group{display:flex;}.group__item{width:50%;}对于PC，我们需要为每个项目取全宽。在这种情况下，您可能倾向于使用width:100%，对吗？下面是一个更好的解决方案。CSS@media(min-width:800px){/*将包装器恢复为块元素而不是flex*/.group{display:block;}.group__item{宽度：自动；}}由于.group是块元素，因此使用width:auto将很好地填充其父元素的可用空间。示例源码：https://codepen.io/shadeed/pe...大家都说简历里没有项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。height:auto说到高度，情况就不同了。元素的高度等于默认为自动的内容。考虑下面的例子以下方法：给.wrapper一个固定的高度，然后为.wrapper添加height:100%来为.wrapper使用flex布局，默认情况下它会拉伸children.itemCSS.wrapper{height:200px;}.item{height:100%;}margin和auto关键字margin最常见的用例是水平居中已知宽度的元素。考虑以下示例：要使上面的蓝色矩形居中，可以使用以下方法：.element{margin-left:auto;margin-right:auto;}根据CSS规范：如果margin-left和margin-right的值都是auto，那么它们的使用值是相等的。这使元素相对于包含块的边缘水平居中。绝对定位元素的margin:auto另一个不太常见的用于将绝对定位元素居中的用例是margin:auto。当我们有一个元素应该在其父元素内水平和垂直居中时，我们可能会想使用translateX或translateY。我们可以使用下面的方法来使绝对定位的元素居中：设置宽度和高度。元素应该有position:absoluteHTMLIamcentered.CSS.wrapper{position:relative;}.item{width:200px;高度：100px；位置：绝对；左：0；顶部：0；右：0；底部：0；[建筑教程]。Flexbox在某些情况下，在Flexbox中使用自动边距非常有用。当子项的边距为auto时，它将被推到最远的一侧。例如，如果一个flex项目的左侧有margin-left:auto，那么它将被推到最右边。考虑以下模型，其中父元素是一个弹性布局：我们想将第二个项目推到最右边，自动边距在这里派上用场。CSS.wrapper{display:flex;}.item-2{margin-left:auto;}不仅如此，它还适用于水平或垂直方向。参见下面的示例CSS.item-2{margin-top:auto;}此外，如果只有一个子元素，您可以使用margin:auto使其水平和垂直居中。CSS.item-1{margin:auto;}flex属性和auto关键字在flexbox中，我们可以对子项使用flex:auto。这是什么意思？当一个item有flex:auto时，相当于flex:11auto，相当于：CSS.item{flex-grow:1;伸缩收缩：1；flex-basis:auto;}MDN描述项目根据其宽度和高度属性调整大小，但会增长以吸收flex容器中任何额外的可用空间，并会缩小到最小尺寸以适应容器，这是等效的设置“flex：11auto”。具有flex:auto的项目将根据其宽度和高度调整大小，但它可以根据可用的额外空间增大或缩小。在研究这篇文章之前，我不知道这一点！HTML项目项目项目CSS.wrapper{显示：flex;flex-wrap:wrap;}.item{width:120px;height:500px;}.item-1{flex:auto;}示例源代码：https://codepen.io/shadeed/pe...CSS网格和自动设置一列为自动在CSS网格中，我们可以设置一个columntoauto，这意味着它的宽度将基于它的内容长度。看看下面你就会明白我的意思了：wrapper{display:grid;grid-template-columns:auto1fr1fr;}grid和automargins当使用CSS网格时，可以使用automargins来实现类似于flexbox的结果。当我们有一个网格并且其中的网格项目有margin-left:auto:项目将被推到右边并且它的宽度将基于它的内容长度考虑下面的例子：当我们想要item1的宽度基于它的content，而不是网格区域。使用margin-left:auto，可以通过如下代码实现：.item-1{margin-left:auto;}从右到左布局值得一提的是，使用margin-left:auto或margin-right：auto可能适用于从左到右的布局，例如英语。但是，在多语言网站上工作时要注意不要颠覆这些价值观。更好的是，使用flexbox或grid属性，以防使用它们完成工作。如果不是，则使用自动边距作为最后的手段并使用CSS逻辑属性。溢出属性当我们有一个元素时，我们应该考虑它应该包含的最小和最大内容。如果内容超过最大值，那么我们需要显示一个滚动条。您可能想使用以下内容：element{overflow-y:scroll;但是，即使内容高度很短，这也可能会显示滚动条。请参阅下面的示例在Chrome窗口中，滚动条始终显示，这是不正确且令人困惑的行为。通过使用auto关键字，我们可以确保除非内容高度大于其容器，否则不会显示滚动条。根据MDN：取决于用户代理。如果内容适合填充框，它看起来与可见内容相同，但仍会建立一个新的块格式化上下文。如果内容溢出，桌面浏览器会提供滚动条。.element{overflow-y:auto;}position属性对于CSS定位属性top、right、bottom和left，我们可以使用auto关键字作为它们的值。接下来我要解释的内容对我来说是新的，我是在研究这篇文章时学到的。考虑以下模型：我们有一个带有填充的包装元素和一个子元素。子项是绝对定位的，但没有任何定位属性。.wrapper{位置：相对；padding:16px;}.item{position:absolute;宽度：100px；height:100px;}在CSS中，每个属性都有一个初始值/默认值。如果我检查子项并转到计算样式，猜猜左边属性的值是多少？left的默认值是16px，即使没有设置也是如此。为什么会这样？嗯，原因是绝对定位的元素有position:relative相对于它最近的父元素。父项有padding:16px所以子项位于距顶部和左侧16px的位置。很有趣，不是吗？现在，您可能会问，这样做有什么好处？好吧，让我继续。假设孩子必须在较小的视口中从左侧定位100px，对于桌面它应该恢复到默认位置。.wrapper{位置：相对；}.item{位置：绝对；左：100px；宽度：100px；height:100px;}如何在较大的视口中向左重置？我们不能使用left:0，因为那样会使子节点贴在边缘，这不是我们想要的。请参阅下面的模型以了解我的意思。要以正确的方式重置孩子，我们应该使用left:auto。根据MDN：如果一个元素是静态元素，它将被放置在它应该水平放置的位置。这意味着，它将尊重填充，而不是将子项目粘在其父项目的边缘。.item{位置：绝对；左：100px；宽度：100px；height:100px;}@media(min-width:800px){.item{/*这相当于left:16px*/left:auto;}}top属性也是如此。对于right和bottom属性，它们的默认计算值分别等于元素的宽度和高度。示例源码：https://codepen.io/shadeed/pe...大家都说简历里没有项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。用例和示例值得一提的是，下面的用例可能还不够，但我试着添加了一些，希望它们对你们有用。TooltipArrow对于工具提示，我们需要一个指向箭头来让用户更清楚。如果我们正在设计一个系统，我们应该考虑多种状态。例如，提示有一个向左的箭头和另一个向右的箭头。.tooltip:before{/*箭头代码*/position:absolute;left:-15px;}/*这是一个箭头指向右边的版本*/.tooltip.to-right:before{/*箭头代码*/position:absolute;左：自动；右：-15px；请注意，在最初的实现中，我使用left:auto来覆盖left:-15px。供您参考，这是非常常用的，我建议改用以下内容：.tooltip:before{position:absolute;right:100%;}.tooltip.to-right:before{/*箭头代码*/position:absolute;右：自动；left:100%;}通过使用100%，我们避免使用硬编码值（箭头宽度），如果我们更改箭头大小，该值可能会失败。这是一个经过时间考验的解决方案。卡片组件您可能有一个卡片组件，其左上角有一个动作，它可能只是为了装饰，也可能是一个有用的动作。不管是什么，你都应该考虑到它是双向的。通过使用left:auto我们可以轻松地重置它的基础实现。.card.icon{位置：绝对；左：15px；top:15px;}.card.is-right.icon{left:auto;right:15px;}大家都说简历里没有项目可写，所以给大家找了一个项目，还自带【搭建教程】。Flexbox和AutoMargins说到Flexbox，就有无限的可能性。通过将其与自动边距相结合，我们可以构建强大的布局。考虑下面的示例，我们在右侧包含一行，其中包含标题、描述和操作按钮。我们希望操作按钮固定在右侧。HTML确认CSS.item{显示：flex;弹性包装：包装；justify-content:space-between;}.item__action{margin-left:auto;}就是这样！使用margin-left:auto将动作推到最右角。更好的是，如果您正在构建多语言网站，我们可以使用CSS逻辑属性。CSS看起来像这样：.item__action{margin-inline-start:auto;}CSSgridandautomargins当给网格项目添加边距时，它可以是一个固定值，一个百分比或一个自动值。我对汽车更感兴趣。考虑以下内容：HTML全名

CSS。输入-group{显示：网格；网格模板列：1fr；网格间隙：1rem；@media(min-width:700px){grid-template-columns:0.7fr2fr;我想结合标签与输入对齐左边缘。为此，我需要应用以下内容：.input-grouplabel{margin-left:auto;}模态设计在进行模态设计时，重要的是要考虑当内容高度很大时会发生什么。对于这种情况，我们可以使用以下代码：.modal-body{overflow-y:auto;}这样，如果内容高度足够大，它只会显示滚动条。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://css-tricks.com/almana...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。

你需要知道的关于CSS中自动的一切！相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。