乐趣区

css-width-height

jiezi

本文次要对《CSS 世界》3.2 节 width/height 作用的具体细节 的内容进行一些摘取和概括。更多材料可查阅《CSS 世界》。

一、深藏不露的 width: auto

个别状况下，咱们如果没有设置 width，默认值为 auto。依据不同的元素，体现出以下几种个性：

  • 充分利用可用空间。 如 <div>、<p> 等这些块级元素宽度默认是 100% 于父级容器。（英文称：fill-available）
  • 膨胀与包裹。 典型代表是浮动、相对定位、inline-block 元素、table 元素。（英文称：shrink-fit）
  • 膨胀到最小。 最容易呈现在 table-layout 为 auto 的表格。

  • 超出容器限度。 失常在父元素宽度固定的状况下，子元素宽度不会超出父元素。除非有明确的 width 相干设置，如间断的特地长的英文单词，或者是内联元素被设置了 white-space:nowrap。

在 css 世界中，盒子分“外在盒子”和“外在盒子”，同样的，尺寸也分“内部尺寸”和“外部尺寸”。其中，“内部尺寸”示意尺寸由内部元素决定，“外部尺寸”示意尺寸由外部元素决定。

1. 内部尺寸与流体个性

当咱们在一个容器里倒入足量的水时，水肯定会平均铺满整个容器。这就是“流”的概念。在页面中放一个块级元素，宽度天然会铺满容器，所以没必要再设置 width：100%。

例：子元素均有 margin 和 padding，前者 width：auto，齐全借助流个性，后者 width: 100%，后果尺寸会超出父容器。

默认状况下，相对定位元素的宽度是由外部尺寸决定，也有非凡状况，当 left / right 对抗方位的属性值同时存在时，其宽度大小绝对于最近具备定位个性的先人元素计算。

2. 外部尺寸与流体个性

如果一个元素里边没有内容，宽度为 0，那就是利用了外部尺寸，其次要体现在包裹性，就是包裹与自适应性。所谓的自适应性，指的是元素尺寸由外部尺寸决定，但永远小于父容器的尺寸，换句话说，外部子元素仿佛有个 max-width:“父容器宽度”的感觉，button 就是一个很好的例子。

例：有这么个需要，心愿文字少时居中显示，文字内容较多时左对齐，此时可利用这包裹性实现。

<div class="content">
    <span class="text">{{text}}</span>
</div>
.content {
  width: 200px;
  height: 100px;
  text-align: center; /* 次要 */
  background-color: #f0f3f7;
}
.text {
  display: inline-block;
  text-align: left;
}

二、width 值的作用

对于盒模型的四层这里简略复述一下，从内到外别离是 content-box, padding-box, border-box 和通明的 margin-box。默认状况下，width 是作用在 content-box 的，当咱们在布局的时候增加 padding 和 border 的时候，导致元素宽高变大。

如咱们从设计稿上获取一个 width:200px，padding:10px,border:10px 的元素，最终咱们须要通过 width – paddingLeft – paddingRight – boderLelft – borderRight 去计算 content-width。

这样未免太过麻烦。因而 CSS 提供了 border-box 模型不便咱们进行开发。事实上 box-sizing:border-box 扭转的就是 width 的作用对象。原来 width 只作用于 content-box，用了 border-box 后，width = padding + border + content。

三、有效的 height: 100%

height 和 width 一个比拟显著的区别，就是对百分比单位的反对。对于 width 属性，就算其父元素是 width：auto，其百分比值也是能够反对的。然而对于 height 的百分比属性，如果其父元素是 height 为 auto，那么只有子元素在文档流中（如 float，相对定位都能够使元素脱离文档流），其百分比值就齐全没用了。

<div class="height-box">
    <div class="height-item"></div>
</div>
.height-box {background-color: #6096cc;}
.height-item {
    height: 40%;
    background-color: #98e9f1;
}

为什么会这样呢？标准中给出了答案。原文这样形容：如果蕴含块的高度没有显示指定，并且该元素不是相对定位，则计算值为 auto。也就是子元素的 100% * auto=NaN，所以计算结果有效。因而非相对定位元素要应用 height：100%，要一直的给父级，父级的父级增加 height：具体值，才会失效。

那么宽度为什么能够反对呢？因为蕴含块的宽度取决于该元素的宽度，其行为是“未定义”的，也就是不同的浏览器能够有不同的个性，好在大家都想到一块去了，最终的布局成果在各个浏览器下都是统一的。就是依照蕴含块实在的计算值作为百分比计算的基数。

四、无效的 height: 100%

想要 height: 100% 无效，从下面的标准的答案曾经给出，即以下两种办法：

  1. 设置固定高度，例如设置 height: 100px, 或者百分比，height: 100%.
  2. 应用相对定位。即便先人元素 height：auto, 也有计算值。须要留神的是，相对定位的宽高百分比计算是绝对于 padding-box，而非相对定位元素则是绝对于 content-box 计算。

auto 与子元素无关，100% 与父元素无关，无非凡状况，最好不要应用固定值，不利于响应式开发。

退出移动版