CSS基本尺寸：宽高之差

元素的宽度默认为父容器的100%。这种充分利用可用空间的行为还有一个专有的名称，叫做fill-available，只要你知道就行。(2)收缩和包裹。典型代表有浮动、绝对定位、行内块元素或表格元素。英文叫做shrink-to-fit，直译为“收缩到合身”。对于“包装”。CSS3中的fit-content就是指这个width表达式。(3)缩小到最低限度。这最有可能出现在表格布局为自动的表格中。想必有经验的人一定见过如图3-4这样的盛况！眼见为实。有兴趣的读者可以手动输入http://demo.cssworld.cn/3/2-1...或扫描下方二维码。最好的办法是：无宽度，无浮动，无图片。为什么没有宽度，一旦设置了宽度，css元素的流动性就没有了。示例：外形尺寸与流体特性的比较NormalWidth：充分利用容器空间，自适应，就像水流一样。格式宽度：格式宽度是相对于最近的具有定位属性的祖先元素计算的，但也有相对于祖先元素的流动线。内部尺寸和流体属性元素的大小取决于内部尺寸，而不是外部容器。你怎么知道确定的是内部尺寸而不是外部尺寸？如果这个容器里面没有内容，那么宽度就是0，也就是内部尺寸。internalsize的三个特性：Wrapping：一个元素是display:inline-block，即使里面的内容再多，也不会超过宽度。除非第一个宽度大于容器。为什么换行：换行是因为换行。文字换行。当一个模块的文本较少时，会显示在一行中，如果文本超过一行，则会显示在左侧。重量比布局重要得多。示例：最小宽度表示规则。最小宽度实际上利用了这种效果。凹凸样式效果：.ao{display:inline-block;width:0}.ao:before{content:"loveyoulove";outline:2pxsolid#cd000;color:"#fff"}最大宽度最大宽度最大宽度是元素可以具有的最大宽度。我自己的理解是，“最大宽度”其实相当于设置了white-space:nowrap声明后的“wrapping”元素的宽度。如果里面没有块级元素或者块级元素没有设置宽度值，那么“max-width”实际上就是最大的连续行内框的宽度。什么是连续行内框？“inlinebox”的内容将在3.4节深入讲解。这里简单理解为inline、inlineblock、inline-table等显示元素。所有“连续内联框”都是一个或一堆内联级别的元素，中间没有任何换行标签或其他块级元素，36ed7ca76b91d182287d3eeb929396b1.jpgwidth应用于内框，css2中也有一段.1那是很明确的描述，内容框围绕着宽度和高度给定的矩形。如果使用widthadaptive，容错性更强，设置样式不灵活。宽度分离原则：所谓“宽度分离原则”是指CSS中的width属性不与影响宽度的padding/border（有时包括margin）属性共存，即不能出现如下组合：.box(width:100px;border:1pxsolid;}or.box{width:100px;padding:20px;}有人会问：不然怎么写？很简单，分开，width独立占据一层标签，而padding,border,margin内部使用流动性渲染。.father{width:180px;}.son{margin:020px;padding:20px;border:1pxsolid}为什么需要宽度分隔？在前端领域，说到分离，有一定的作用，就是容易维护。比如样式和行为的分离，前后调整。或者说这里的“宽度分离”的原理，其实很简单.当一个事物的发展可以受到多种因素的影响时，这个事物的最终结果变数会很大，不可预测。这里的宽度相似。由于boxsize中的4个box会影响宽度，自然页面元素的最终宽度很容易发生变化，导致布局出现意外。例如下面的SimpleCSS：.box(width:100px;bordereipxsolid:}此时宽度为102像素。那么，设计者希望元素的边框有20像素的外边距。此时，我们会增加padding设置：.box{width:100px;padding:20px;border:1pxsolid;}结果这时候宽度变成了142像素，大了40像素，和原来的明显不同原来的宽度。显然，布局容易出问题。为了不影响之前的布局，我们还需要通过计算减去40pxpaddingsize:.box{width:60px;//通过计算，减去40pxpadding:20pxiborder:1pxsolidi}但是，如果我们使用宽度分隔，事情会简单很多子元素的宽度使用默认值auto，因此它会像流水容器一样自动填充父级。所以子元素内容框的宽度为100像素，和上面直接设置宽度为100像素是一样的。然后，在同一个故事中，设计师希望元素边框内有20像素的边距。这时候我们会增加padding设置：.father{width:102px;}.son{border:lpxsolid;padding:20px;}当然Width分离是有成本的，多一层标签会增加成本的HTML。HTML的成本也是一种成本，太深的嵌套会增加页面渲染和维护的成本。不过，我想在这里抛出一句话。事实上，如果不考虑更换元素，世界上绝大多数网页只需要一个宽度设置。没错，只需要一个宽度，就是最外层的宽度，限制了网页主要内容的宽度，没有理由让里面的所有元素都设置宽度。“宽度分隔”虽然多了一层标签，但说到底也只是多了一层标签而已。与收益相比，成本只是毛毛雨。不需要计算，不需要额外嵌套标签的实现呢？没错，就是可以改变width函数细节的box-sizing属性（boxsize）。默认是来自content-box，也可以设置为padding-box，border-box。为什么没有margin-box:margin只有当width为auto时才能改变元素大小。但是此时已经是流状态了，没必要再设置，而且margin不会像padding那样改变元素的大小。如果在background-origin之后有一些属性，我们从这里去哪里。有人说content-box是反人类的。设置*{box-sizing:border-box}会造成不必要的消耗，不能解决所有问题。box-sizing发明的初衷：textarea是一个替换元素，替换元素的一个特点是大小由内部元素决定。替换元素的宽度不受显示级别的影响。这个时候就可以用所以，毕竟box-sizing:border-box才是根本的解决办法！textarea{width:100%;-ms-box-sizing:border-box;/*forIE8*/box-sizing:border-box;}在我看来，发明box-sizing最大的初衷应该是为了解决替换元素的自适应宽度问题。如果真的像我说的那样，*{box-sizing:border-box}就没用了吗？像下面这样重置CSS是否更合理？input,textarea,img,video,object{box-sizing:border-box;}高度：自动高度：100%