这篇文章主要介绍“Css必知的底层知识和技巧有哪些”，在日常操作中，相信很多人在Css必知的底层知识和技巧有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Css必知的底层知识和技巧有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比古田网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式古田网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖古田地区。费用合理售后完善，10多年实体公司更值得信赖。
一.css尺寸
1.首选最小宽度–实现复杂图形效果
因此，我们可以根据这个它特性，去实现一些复杂的图形，如下：
当鼠标经过时，变成了下面的样子：
代码如下：
.minW{ display: inline-block; width: 0 } .minW::before { content: "love 你 love"; color: transparent; outline: 2px solid #cd0000; } .minW:hover::before{ content: "你 love 我"; color: transparent; outline: 2px solid #cd0000; }我们会发现，当容器宽度设置为0后，由于首选宽度的影响，出现了基于文字空间的形状。
2.2.子元素宽度设为100%时的奇怪现象原理探究
.box{ display: inline-block; white-space: nowrap; } .text{ display: inline-block; width: 100%; }理论上父元素宽度应该是子元素宽度之和，但是却出现了上图的现象，原因归根就在于浏览器渲染的顺序：自外而内，这点十分重要。
3.如何让元素支持height:100%效果
方法如下：
4.任意高度元素的展开收起动画(max-height/min-height)
1.min-height/min-width的初始尺寸为auto, max-height/max-width的初始尺寸为none
2.min-height/min-width的优先级高于max-width/max-height
要想实现如上图所示的展开收起动画，就可以使用max-height/min-height：
.nav > .sub-nav{ max-height: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.17,.67,.76,1.41) } .nav:hover > .sub-nav{ max-height: 400px; }二.内联元素深入探究
常见的内联元素有：display设置为inline,inline-block,inline-table的元素 内联盒模型:
内容区域：可以理解为文本选中的背景色区域(重点)
内联盒子：内联标签或者纯文本
行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子
包含盒子：由行框盒子组成的盒子 幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。如下案例所示：
三.深入理解content
1.在web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸(不包含边框)为300*150，如video,iframe,canvas等，少数为0，如img,而表单元素的替换尺寸和浏览器自身有关。
2.对于img元素，如果有css尺寸，则最终尺寸由css尺寸决定(css尺寸 > html尺寸 > 固有尺寸)
3.当图片的src属性缺省时，图片不会有任何请求，是最高效的实现方式，如下展示的是使用此方式的图片占位代码(对于firefox浏览器，src缺省的img是一个普通的内联元素，宽高设置无效)：
img { visibility: hidden; } img[src] { visibility: visible; }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: dot 3s infinite step-start both; } @keyframes dot{ 33% { transform: translateY(-3em);} 66% { transform: translateY(-2em);} 99% { transform: translateY(-1em);} }3.属性值内容生成
