css高度自适应-CSS 世界阅读笔记 - 流程和宽度

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

元素。

要回答这个问题，您首先需要了解外袋和内袋（也称为集装袋）。前面讨论的块级元素和内联元素，当我们谈论它们是显示在一行上还是包装时，实际上是在谈论外袋。内袋实际上负责元素的宽度和内容。

这内

袋从内到外可分为内容盒、填充盒、边框盒和边距盒。

仔细观察，我们将看到内容框是围绕给定内容宽度和高度的圆圈css高度自适应，因此宽度：100px 作用于内容框。举个反例：

div {
  width: 100px;
  padding: 20px;
  border: 20px solid;
}

元素的长度现在为 180px = 20px（右边框）+ 20px（右填充）+ 100px（

内容）+ 20px （

左边框）+ 20px（左填充）。

但是这些宽设置使流动性消失，当我们给出元素宽度：auto时，元素的宽度将“自适应”填充容器，并且给定宽度值将使这种流动性消失。因此，“无长度”标准将使布局更加灵活和宽容。另一方面，如果您没有准确估计边框，填充和内容的长度，则很容易由于空间不足而导致页面布局错位。

3.4 宽度分离原理

“宽度

“分隔原则”表示 CSS 中的 width 属性不与影响长度的填充/边框（有时是边距）属性共存，即无法出现以下组合：

.first-div {
  width: 100px;
  border: 1px solid;
}

/* 或者 */

div {
  width: 100px;
  padding: 20px;
}

坏案例

如果我们想在第一个 div 中添加填充，请添加填充：20px;性能：

.first-div {
  width: 100px;
  border: 1px solid;
  padding: 20px;
}

虽然此时布局发生了变化：

在添加填充之前，

这个div的宽度和高度是102px，添加填充后，它被做成142px，比前一个大了40px，显然布局容易出现问题。为了不影响之前的布局，我们还需要估算填充大小除以 40px 以与之前的大小保持一致：

.box {  
  width: 60px; /* 通过计算，减去 40 像素 */
  padding: 20px;  
  border: 1px solid;
}

好案例

如果我们使用长度分离css高度自适应，事情会容易得多：

/* 在first-div外嵌套一层 */
.first-div-father {
  width: 102px;
}

.first-div {
  border: 1px solid;
}

嵌套标签层，父元素设置为宽度，

子元素将像水流一样手动填充父容器，因为宽度使用默认值 auto。因此，子元素的内容框宽度为 100px，这与之前将宽度直接设置为 100px 相同。

3.5 更改宽度/高度详细信息的框大小

箱子尺寸属性可更改袋子的宽度。“内袋”的4袋是内容盒，填充盒，边框盒和边距盒。默认情况下，宽度用于内容框，而盒子尺寸的作用是将宽度作用于的袋子变成其他几个，所以理论上，盒子尺寸可以有以下写法：

.box1 {box-ssize： content-box; } → 默认值

.box2 {box-ssize： padding-box; } → Firefox 用于支持

.box3 {box-ssize： border-box; } → 全部支持

.box4 {box-ssize： margin-box; } → 从不支持

为什么框大小调整不支持边距框

如果我们设置

规格使用宽度或高度，那么请询问，我们此时设置边距值，其偏移量是否会发生变化。显然不是，一个本身不改变元素规格的袋子对于盒子尺寸支持没有意义。

发明盒式尺寸的初衷

框大小调整的最大想法是解决替换元素（如文本区域和输入）的自适应间距问题。4

.高度4.1 相对简单简单 高度：自动

高度：自动是

比宽度更简单、更简单：auto，因为 CSS 的默认流是水平的，宽度是稀缺的，高度是无限的。 高度：自动性能也基本是：有几个元素包，每个包有多高，然后一个加号，这是最终的高度值。

4.2 高度：100%

对于高度

属性，如果父元素高度为 auto，则只要子元素在文档流中，就会完全忽略其百分比值。通过一些练习，我们将意识到，要使正常文档流中的元素正常工作，父元素必须具有有效的高度值。

4.3 为什么当父母没有特定的身高值时，身高：100%无效？

错误陈述：无休止的循环

例如，一个

有一个高度为 100px 的子元素，此时，这个

面组子元素的高度为 100px支撑

后，假设此时插入了第二个子元素，并且高度设置为高度：100%，则第二个子元素的高度为 100px。但

子元素的高度已设为 200px

，第二个子元素的高度将变为 200px。这反复创建了一个逻辑循环，但这些说法是错误的。

正确解释：浏览器呈现的顺序

首先，浏览器渲染的基本原理：先渲染父元素，后渲染子元素，这是顺序的。

如果高度的

包含块没有明确指定（即高度由内容决定），并且元素不是绝对定位的，估计是自动的，因此高度估计为“自动”* 100 / 100 = NaN。

那么如何让元素支撑身高：100%功效呢？设置明确的高度值，

例如高度：600px，或可以生效的百分比值;

使用绝对定位。使用绝对定位时，请务必注意，绝对定位的纵横比估计值是相对于填充框的，

即估计填充大小值，但非绝对定位元素是相对于内容框计算的。

5. 总结

在本文中，我们主要总结了流量与宽度和高度如何相互影响，并探讨了一些箱体模型的问题。我希望它能在你平时发展的时候给你带来一些启发。

紧跟技术前沿，深挖专业领域

DIVCSS5 向您介绍了两种情况下的自适应高度模式设置和分辨率。

第一种：内容加到一定高度时的自适应高度，内容较少时DIV有一定的最小高度;

第二：没有最低身高，DIV完全自适应身高。

以下是两种方案和解决方案

一、一定的最小身高，自适应身高时

添加内容，当内容较少时，DIV 具有一定的最小高度 - TOP

有一个DIV包，默认高度是

200pxcss自适应高度，当 DIV 中的内容冗余且超过限制高度时，DIV 自适应高度，需要使用纯 CSS+DIV，不需要 JS，兼容 Firefox

1.回答并解释：

_height：200px;/*css 注意：只有 IE6 设置此属性，假设最小高度为 200px，设置高度为 200px，IE6 会在内容超过 */ 后手动提高设置高度 */

最小高度：200px;/*css 注意：CSS 最小高度为 200px 支持除 IE6 之外的所有浏览器*/

此设置css自适应高度，IE6，7，8，9，10，火狐等兼容

2.具体设置代码：

迪夫{

_height：200像素;

最小高度：200px

/*css 注意：这两个位置没有特定的顺序，与所有浏览器兼容*/

3.CSS最小身高和自适应身高并存我们设置了2个DIV袋，最小高度为200px，

当内容较少时，DIV袋的最小高度为200px，

当内容超过可以加载的高度时，DIV包自适应高度，为了便于观察和参考分析，我们统一将长度设置为100px，红色1px CSS边框。

div{_hei