块级元素基本概念块级元素：水平流上只能单独显示一个元素，多个块级元素显示在一个新行中。块级元素”和“显示为块的元素”不是同一个概念。每个元素都有两个盒子，外盒和内盒。外盒负责元素是否可以显示在一行或只能换行显示；内框负责宽度、高度、内容展示等，display属性值为inline-block元素，可以与图文显示在一行，可以直接设置宽/高，因为有两个盒子，外盒是inlinelevel，内盒是blocklevel，盒上的width/height作用于内盒，widthwidth默认值为auto，看似简单的默认值至少包括以下4种不同的宽度表达。（1）充分利用可用空间。（2）收缩和包裹。（3）收缩到最小。（4）超出容器限制的尺寸也是分为“内部维度”和“外部维度”上”。其中，“内部维度”由内部要素决定；还有一类叫做“外形尺寸”，宽度是由外部元素决定的。外部尺寸受宽度影响1，正常流宽度。一旦“外部尺寸”的块级元素设置了宽度，就失去了流动性{display:block;宽度：100%；}为a标签设置成块后，自然会填充父元素。width:100%不仅多余，还会导致元素失去流动性。所谓的流动性并不是表观宽度100%那么简单，而是一种在margin/border/padding和content内容区域之间自动分配水平空间的机制eg。将块级元素的宽度设置为100%后，虽然看起来和width:auto一样，都是100%占据父元素，但是当改变元素设置了border和margin时，它的实际大小会超出父元素，导致出现滚动条。当父元素不限制宽度时，当父元素超出滚动条时自动分配内容区域。设置外部尺寸后，会影响元素的宽度2.格式宽度格式宽度只出现在“绝对定位模型”中，即position属性值为absolute或fixed（position的默认值是静态的）。当left/top或top/bottom的属性值同时存在时，元素的宽度表示为“格式化宽度”，其宽度是相对于最近的具有定位特性的祖先元素（position属性valueisnotstatic)和上面的正常流程一样，“格式宽度”是完全流动的，即margin、border、padding和content内容区域也会自动分配水平（和垂直）空间。受宽度影响的内部尺寸：如果该元素中没有内容，则宽度为0，即应用程序的“内部尺寸”。内部维度的三种表现形式：1.封装对于一个元素，如果它的display属性值为inline或者inline-block，不管内容再多，只要是普通文本，宽度都不会超过容器。例如。封装的做法：当文字较小时显示在中间，当文字超过一行时显示在左侧。框{文本对齐：居中；}.content{显示：内联块；文本对齐：左；}2.PreferredMinimumwidth所谓“preferredminimumwidth”是指元素最适合的最小宽度。在CSS世界里，图片和文字比布局更重要。有图文时，不允许width:auto为0(3)最大宽度“maximumwidth”其实相当于“wrapping”元素设置white-space:nowrap声明后的宽度。实际上，我认为它有点像flex布局，用于可变宽度的元素的水平布局。宽度分离原则所谓“宽度分离原则”是指CSS中的width属性不与影响宽度的padding/border（有时包括margin）属性共存，即不能出现如下组合：.box{宽度：100px；边框：1px实心；}或.box{width:100px;填充：20px；}分离，width独立占据一层label，padding、border、margin在内部使用fluidity自适应渲染。缺点：多了一层标签，HTML的成本也是成本。嵌套太深会增加页面渲染和维护的成本。但一般来说，只需要在控制宽度的标签的最外层再增加一层即可，与后期维护相比，成本可以忽略不计。改变宽/高效果细节的box-sizing其实是为了宽高分离。在确定宽度的div上设置box-sizing可以省去外面一层标签。效果是一样的。高度高度：100%。对于width属性，即使父元素的宽度为auto，也支持其百分比值；但是，对于height属性，如果父元素的高度是auto，那么只要子元素在文档流中，它的百分比值就完全被忽略了。如果未明确指定包含块的高度（即高度由内容决定），并且元素不是绝对定位，则计算值为auto。'auto'*100/100=NaN因此将孩子的身高设置为100%是无效的。如何让元素支持height:100%效果(1)设置一个显式的高度值。(2)使用绝对定位。div{border:1px纯蓝色;高度：100%；位置：绝对；}这时候height:100%就会有一个计算值，即使祖先元素的高度计算为auto。需要注意的是，绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的。不同的是，绝对定位的宽高百分比计算是相对于paddingbox的，也就是说paddingsize值会在中计算，而非绝对定位的元素是相对于contentbox计算的。父元素子元素CSSmin-width/max-width和min-height/max-height两三件事min-width/max-width出现的场景肯定是自适应布局或者流体布局。.container{最小宽度：1200px；max-width:1400px;}为了防止图片在移动端过大影响体验，往往会有如下的max-width限制：img{max-width:100%;height:auto!important;}height:auto是必须的，否则如果原图有设置高度，max-width生效，图片会横向压缩。max-width会覆盖width，而且这种覆盖不是普通的覆盖，它会超越！任意高度元素的重要展开和折叠动画技术的效果.element{max-height:0;溢出：隐藏；过渡：最大高度.25s；}.element.active{最大高度：666px；/*足够大*/的最大高度值}其中，展开后的max-height值，我们只需要将其设置为保证大于展开内容高度的值即可，因为当max-height值大于height的计算值，元素的高度为height属性的计算高度，在本次交互中，为height:auto时的高度值。从而实现任意高度不定元素的展开动画效果。但是如果max-height值过大，折叠时可能会出现“效果延迟”的问题。
