前端进阶：Css必备的几个低级知识和技能。心理学家把注意力分为两种：无意的注意和有意的注意。有意识的注意需要事前有意识的目的，必要时需要发自内心的努力，主动注意某些事物。它表现了人们心理活动的主观性和主观性。问题导向学习法强调有意识地关注解决问题的信息，使学习有明确的方向，从而提高学习效率。介绍完问题学习法，就进入我们今天的正题。接下来，我将介绍一些CSS的底层知识和奇怪的现象，让大家对CSS有更深入的了解。一、CSSsize1.Preferredminimumwidth——实现复杂的图形效果在CSS中，图片和文字的权重远大于layout，所以当width:0时，显示的宽度就是“preferredminimumwidth”。中文的最小宽度是每个汉字的宽度，西文的字符是靠连续的英文字符单元。因此，我们可以根据这个特点实现一些复杂的图形，如下：当鼠标经过时，变成如下：代码如下：.minW{display:inline-block;width:0}.minW::before{content:"loveyoulove";color:transparent;outline:2pxsolid#cd0000;}.minW:hover::before{content:"youloveme";color:transparent;outline:2pxsolid#cd0000;}我们会发现当容器宽度设置为0时，由于首选宽度的影响，会出现一个基于文本空间的形状。2.2.子元素宽度设置为100%时出现奇怪现象的原理探索父元素宽度=图片宽度+文字内容宽度浏览器渲染原理：先下载文档内容，加载header样式资源，然后按从上到下，自动DOM内容以从外到内的顺序呈现。本例出现现象的原因是：渲染到父元素时，子元素的width:100%没有渲染，宽度为图片加上文字内容的宽度；当渲染到文本的子元素时，父元素的宽度已经固定。这时候width:100%就是父元素的固定宽度。如果宽度不够，就只能溢出。.box{display:inline-block;white-space:nowrap;}.text{display:inline-block;width:100%;}理论上父元素的宽度应该是子元素宽度的总和元素，但出现上图现象，原因在于浏览器渲染的顺序：从外到内，这个很重要。3、如何让元素支持height:100%效果知识点：绝对定位的宽高百分比是根据padding-box，非绝对定位的宽高百分比是根据content-box。方法如下：*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;overflow:hidden;transition:max-height.6scubic-bezier(.17,.67,.76,1.41)}.nav:hover>.sub-nav{max-height:400px;}2、深入探索内联元素常见的内联元素包括：display设置为inline的元素，inline-block,andinline-table内联盒模型：内容区：可以理解为文本选择的背景色区域（重要）内联盒：内联标签或纯文本内联盒box：由内联盒组成的一行，每行line是一个lineboxIncludebox：由lineboxboxes组成的boxGhostBlanknode：在HTML5文档中声明，内联元素被解析和渲染时，就好像每个linebox前面都有一个空白节点一样。如下例所示：3.深入理解content1。web中很多替换元素的默认尺寸（不包括边框）为300*150，没有明确的尺寸设置，比如video、iframe、canvas等，少数为0，比如img，form的替换尺寸元素与浏览器本身有关。2.对于img元素，如果有css大小，最终大小由css大小决定（css大小>html大小>固有大小）3.当图片的src属性默认时，图片不会有任何请求，这是最高效的实现方式，如下图是使用该方式的图片占位代码（对于firefox浏览器，src默认的img是一个普通的内联元素，宽高设置无效）：img{visibility:hidden;}img[src]{visibility:visible;}content内容生成技术1.实现换行::after{content:'\A';white-space:pre;}2．实现加载动画.dot{display:inline-block;width:8em;height:1em;line-height:1;text-align:left;vertical-align:-.25em;overflow:hidden;}.dot::after{display:block;margin-left:5.2em;content:'...\A..\A.';white-space:pre-wrap;animation:dot3sinfinitestep-startboth;}@keyframesdot{33%{transform:translateY(-3em);}66%{transform:translateY(-2em);}99%{transform:translateY(-1em);}}3.属性值内容生成
