css中的盒子、width和height

一、内联与块级中的盒子

一个元素都有两个盒子，外在盒子和内在盒子。外盒子负责一行显示或换行显示（内联和块级），内盒子（容器盒子）负责宽高、内容呈现。如display的属性值不同，为block的元素实际由外盒子“块级盒子”和内在为“块级容器盒子”。为inline-block的元素实际由外盒子“内联盒子”和内在为“块级容器盒子”。为inline的元素内外都为“内联盒子”。

二、width

1.width：auto。包含四种不同的宽度表现

(1). 充分利用可用空间：如div、p元素的宽度默认是100%父级元素，叫做fill-available。

(2). 收缩与包裹(shrink-to-fit)：典型代表浮动、绝对定位、inline-block、table。书中称为“包裹性”。CSS3中的fit-content指的就是这种宽度。

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

    

 (4).  除非width明确指出，否则以上3种尺寸都不会超出父级容器的宽度，但是存在一些特殊情况。

.father{
	width: 150px;
	height: 30px;
	background: red;
	white-space: nowrap;
}
.chlid{
	display: inline-block;
	background: skyblue;
}

2.外部尺寸与流体特性

(1).正常流宽度:如div或display:block会自动充满父元素,width:100%就没有任何出现的必要了.

(2).格式化宽度:格式化宽度仅出现在“绝对定位模型”中，也就是出现在 position属性值为 absolute 或 fixed 的元素中。在默认情况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定。

3.内部尺寸与流体特性

(1).包裹性：顾名思义，“包裹性”，除了“包裹”，还有“自适应性”。所谓“自适应性”，指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。应用：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示

三、height

对于 width 属性，就算父元素 width 为 auto，其百分比值也是支持的；但是，对于 height 属性，如果父元素height    为 auto，只要子元素在文档流中，其百分比值完全就被忽略了。

为何 height:100%无效：

要明白其中的原因要先了解浏览器渲染的基本原理。首先，先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染 DOM 内容。套用本例就是，先渲染父元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度；等渲染到文字这个子元素的时候，父元素宽度已经固定，此时的 width:100%就是已经固定好的父元素的宽度。宽度不够怎么办？溢出就好了，overflow 属性就是为此而生的。

如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算不了的：'auto' * 100/100 = NaN

如何让元素支持 height:100%效果：

（1）设定显式的高度值。

（2）使用绝对定位。

此时的 height:100%就会有计算值，即使祖先元素的 height 计算为 auto 也是如此。需要注意的是，绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，