你不知道的width:auto

DandJ 发布于2019-08-30 14:22 / 3276人阅读

摘要：比方说，这些元素的宽度默认是与父级容器的。典型代表就是浮动绝对定位元素或者元素，英文称为，收缩到合适中的指的就是这种宽度表现收缩到最小。

说到widh:auto这个属性大家一定不陌生，也都知道width的默认值是auto,正因为auto是默认值，极少有人去关注auto的宽度表现，下面就让我介绍一下我认识的auto的四种宽度表现
1.充分利用可用空间。比方说，

、

这些元素的宽度默认是100%与父级容器的。这种充分利用可用空间的行为还有个专有名字，叫作fill-available。

2.收缩与包裹。典型代表就是浮动、绝对定位、inline-block元素或者table元素，英文称为shrink-to-fit，收缩到合适CSS3中的fit-content指的就是这种宽度表现

3.收缩到最小。这个最容易出现在table-layout为auto的表格中

 
    
      就1列就1列就1列就1列就1列
      当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；
      当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；

table {
  width: 280px;
  margin: 0 auto;
  text-align: left;
  background: #a0b3d6;
  font-size: 12px;
}
td {
  padding: 2px 4px;
  border: 3px solid #fff;
  background: #f9f9f9;
}

当每一列空间都不够的时候，文字能断就断，但中文是随便断的，数字和英文单词不能断。于是第一列的每个字都被断掉，称为min-content。

4.超出容器限制。除非明确的width相关设置，否则上面的三种情况尺寸都不会主动超过父级容器宽度，但是存在一些特殊情况。例如，内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap:


    恰如一江春水向东流，流到断崖也不回头

  .father {
    width: 150px;
    padding: 10px;
    background-color: #cd0000;
    white-space: nowrap;
  }
  .child {
    display: inline-block;
    padding: 5px;
    background-color: #f0f3f9;
  }

自元素既保持了inline-block元素的收缩特性，又同时让内容的宽度最大，直接无视父级容器的宽度限制，称为max-content

云服务器 GPU云服务器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115973.html

没有flexbox弹性盒子，但我们还有table

摘要：结构左基线向左移动右基线向右移动一定要使用属性自己不熟悉的自行主要是为了好设置宽度都是相对于父元素的即将父元素平均分成了等份。由于项目要兼容到IE9，因此将之前flex布局全部给换掉。今天leader让我看了kitecss这个css框架(里面的一些布局方式能比较好的兼容IE8+，里面有一些比较好的栅格布局，垂直居中等方案)。然后具体的学习了里面的一些css技巧和方法，总结如下： gi...

KunMinX 2019-08-28 18:22 评论0 收藏0
挑逗Bootstrap4源代码 - Grid篇（下）

摘要：在这里面有一个新定义的类，它这个嵌入式展开后是，从结构可以看出来，它就是加在元素上的，可以取消列的默认间距。在这里我提供一个自定义的，名字也很简单。写的时候注意顺序，要按照升序排列，小的放在上面，即在上面，写反了将失效。本文所引用的版本为Bootstrap 4 Beta版，阅读者请先下载好相关源文件。时光荏苒，若后续版本代码发生变化，将看心情进行更新补充。如果你觉得本文不错，欢迎...

fobnn 2019-08-29 13:23 评论0 收藏0
解剖CSS布局原理

摘要：前言本文将带你重新认识布局，带你解剖布局原理，前提是你要有基础本文将解除你在布局方面的疑惑。以下将对布局元素和文档流进行详细讲解。而且还能保持文档流，这是其他元素做不到的。前言本文将带你重新认识CSS布局，带你解剖布局原理，前提是你要有基础！本文将解除你在布局方面的疑惑。认识每个布局元素，了解他们的特性，你才知道为什么会是这样的结果。本文内容纯属个人理解，不代表官方。此文主要为理...

李文鹏 2019-08-29 12:28 评论0 收藏0
你不知道的层叠样式表

摘要：层叠样式表层叠规则你或许知道是层叠样式表的缩写。但你不一定真正的理解了其中层叠的含义。用户自定义样式虽然规范中有，但从起，开始不支持用户自定义样式表，而是建议使用扩展来实现。网站提供的样式表，则是我们所提供的的样式。即不为的元素的计算值为。层叠样式表层叠规则你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含...

Bryan 2019-08-29 16:59 评论0 收藏0
VS Code 可以在浏览器运行了？微软正式发布！

摘要： .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.mark...

MudOnTire 2021-10-26 09:51 评论0 收藏0