likes
comments
collection
share

玩转CSS最小和最大(宽度/高度)

作者站长头像
站长
· 阅读数 46

一枚努力学习前端的程序媛，之前都在自己的博客： Study Of Toast (breadfruit.github.io)(国内站点 上打卡，现在是到了第14期了，每周阅读刷刷。

Min-width

限制盒子的最小宽度，盒子的width大小会随着内容的大小变化，min-width是盒子无文本的时候的大小。

 {
    min-width: 20px;
    height: 30px;
    background-color: aqua;
    border: 1px solid transparent;
 }

玩转CSS最小和最大(宽度/高度)

min-width与padding

在内容较长的情况下，min-width可以扩展按钮的宽度，而水平方向上的padding应该被添加，以实现一个合适的外观按钮。

{
            min-width: 10px;
            padding: 0 5px;
            height: 30px;
            background-color: aqua;
            border: 0px solid transparent;
 }

玩转CSS最小和最大(宽度/高度)

Max-width

限制盒子的最大宽度，

当文本内容超过盒子大小的时候，就会出现溢出现象。

玩转CSS最小和最大(宽度/高度)

max-width与min-width的优先级

从下面的图可以看出，min-width在这个盒子不生效，说明max-width > min-width的优先级，而盒子的宽度是0-max-width，没有所谓的min-width。

      
{     
      min-width: 10px;
      max-width: 30px;
      height: 30px;
      background-color: aqua;
      border: 0px solid transparent;
}

玩转CSS最小和最大(宽度/高度)

那么如果你想你的盒子拥有最小最大宽度的话，可以用width属性和display: inline-block。

在css中，inline-block指的是“内联块状元素”，它同时具备内联元素、块状元素的特点；inline-block元素可以和其他元素都在一行上，元素的高度、宽度、行高以及顶和底边距都可设置。

{
      width: 10px;
      max-width: 30px;
      height: 30px;
      background-color: aqua;
      border: 0px solid transparent;
 }

<style>
{
    display: inline-block;
    min-width: 10px;
    max-width: 30px;
    height: 30px;
    background-color: aqua;
    border: 0px solid transparent;
}
</style>
<body>
    <span class="btn1" />
    <span class="btn1" />
</body>

使用 flexbox 将最小宽度/最小高度设置为零

默认情况下，flex项目不会缩小到它们的最小内容大小(最长单词或固定大小元素的长度)以下。要更改此设置，请设置min-width或 min-height属性。

flex-box的min-width/height是随着内容的大小变化的，也就是无边无际的大。如果父盒子有一定的高度和宽度，这样就会出现溢出的现象，不会出现滚动条。设置

word-space: no-wrap;
overflow: hidden;
text-overflow: ellipisi;

也解决不了。

所以我们需要在flex-box上加上min-width/height：0；

最大宽度/高度和视口单位的流体比率

  • 纵横比：高度/宽度

  • 容器的宽度：可以是固定数字，也可以是动态数字（100％）

  • 设置height为视口宽度的100％乘以纵横比

  • 设置max-heigh，该高度是容器的宽度乘以纵横比

  • max-width设置为等于容器宽度

     /* 纵横比0.56 */
​
   img {
        width: 100%;
        height: calc(100% * 0.56);
        max-width: 100%;
        max-height: calc(100% * 0.56);
  }

玩转CSS最小和最大(宽度/高度)

最小高度和粘性页脚

当一个网站的内容不够长，它希望看到页脚粘到底部.

将body元素作为flexbox容器，然后将其最小高度设置为视口高度的100％

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fafafa;
  line-height: 1.5;
  font-family: "Arial";
}

​​

原文： mp.weixin.qq.com/s?__biz=MzI…

转载自:https://juejin.cn/post/7136937202226823205
评论
请登录