介绍完问题式学习法，进入今天的正题。接下来，我将介绍CSS的一些底层知识和奇怪的现象，让大家对css有更深的了解。一、CSSsize1.Preferredminimumwidth——实现复杂的图形效果在CSS中，图片和文字的权重远大于layout，所以当width:0时，显示的宽度就是“preferredminimumwidth”。中文的最小宽度是每个汉字的宽度，西文的字符是靠连续的英文字符单元。因此，我们可以根据这个特点，实现一些复杂的图形，如下：当鼠标经过时，变成如下：代码如下：.minW{display:inline-block;width:0}.minW::before{content:"爱你爱";颜色：透明；outline:2pxsolid#cd0000;}.minW:hover::before{内容：“你爱我”；颜色：透明；轮廓：2px实心#cd0000；我们会发现，当容器宽度设置为0时，由于首选宽度的影响，会出现一个基于文本空间的形状。2、子元素宽度设置为100%时出现奇怪现象的原理探究父元素宽度=图片宽度+文字内容宽度。浏览器渲染原理：先下载文档内容，加载header样式资源，然后按照从上到下，从外到内的顺序渲染dom内容。本例出现现象的原因是：渲染到父元素时，子元素的width:100%没有渲染，宽度为图片加上文字内容的宽度；当渲染到文本的子元素时，父元素的宽度已经固定。这时候width:100%就是父元素的固定宽度。如果宽度不够，就只能溢出。.box{显示：内联块；空白：nowrap；}.text{显示：内联块；width:100%;}理论上父元素的宽度应该是子元素宽度的总和，但是出现图现象的原因在于浏览器渲染的顺序：从外到内，这是非常重要的。3、如何让元素支持height:100%的效果知识点：绝对定位的宽高百分比是根据padding-box，非绝对定位的宽高百分比是根据content-盒子。方法如下：*1.设置显示值的高度*2.使用绝对定位4.任意高度（max-height/min-height）元素的展开和折叠动画1.min-的初始尺寸height/min-width为auto，max-height/max-width的初始大小为none2.min-height/min-width的优先级高于max-width/max-height。要实现如上图所示的展开和折叠动画，可以使用max-height/min-height:.nav>.sub-nav{max-height:0;溢出：隐藏；transition:max-height.6scubic-bezier(.17,.67,.76,1.41)}.nav:hover>.sub-nav{max-height:400px;}2.深入探索内联元素Common行内元素包括：display设置为inline、inline-block、inline-table的元素行内框模型：内容区：可以理解为文本选择（强调）的背景色区域。行内框：行内标签或纯文本。linebox：一行inlineboxes，每一行都是一个linebox。ContainingBox：由linebox盒子组成的盒子。幽灵空白节点：在HTML5文档声明中，内联元素被解析和呈现，就像每个行框前面都有一个空白节点一样。如下例所示：3.深入理解content1。web中很多替换元素的默认尺寸（不包括边框）为300*150，没有明确的尺寸设置，比如video、iframe、canvas等，少数为0，比如img，form的替换尺寸元素与浏览器本身有关。2、对于img元素，如果有csssize，最终的大小由csssize决定（csssize>htmlsize>intrinsicsize）。3、默认图片的src属性时，不会请求图片，是最高效的实现方式。使用该方法的图片占位代码如下所示（对于firefox浏览器，src默认的img是一个普通的内联元素，宽高设置无效）：img{visibility:hidden;}img[src]{可见性：可见；}内容内容生成技术。1、实现换行::after{content:'\A';空白：pre;}2。实现加载animation.dot{display:inline-block;宽度：8em；高度：1em；行高：1；文本对齐：左；垂直对齐：-.25em；溢出：隐藏；}.dot::after{显示：块；左边距：5.2em；内容：'...\A..\A.';空白：预包装；animation:dot3sinfinitestep-startboth;}@keyframesdot{33%{transform:translateY(-3em);}66%{transform:translateY(-2em);}99%{transform:translateY(-1em);}}3.属性值内容生成
