css弹框带滚动条_前端进阶：Css必知的⼏个底层知识和技巧作者：徐⼩⼣ 来源：趣谈前端
学习⽅法推荐
问题学习法：带着问题去学习，有利于集中注意⼒，⽬的明确，这既是有意学习的要求，也是发现学习
的必要条件。⼼理学家把注意分为⽆意注意与有意注意两种。有意注意要求预先有⾃觉的⽬的，必要时需经过意志努⼒，主动地对⼀定的事物发⽣注意。它表明⼈的⼼理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从⽽提⾼学习效率。
在介绍完问题学习法之后，进⼊我们今天的主题，接下来我会介绍css的⼀些底层的知识和⽐较诡异的现象，借此来让⼤家对css有更深⼊的理解。
⼀.css尺⼨
1.⾸选最⼩宽度–实现复杂图形效果
在css中，图⽚和⽂字的权重远⼤于布局，因此当width:0时表现出来的宽度就是“⾸选最⼩宽度”。中⽂的最⼩宽度为每个汉字的宽度，西⽅⽂字取决于连续的英⽂字符单元。css固定定位
因此，我们可以根据这个特性，去实现⼀些复杂的图形，如下：
当⿏标经过时，变成了下⾯的样⼦：
代码如下：
.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.⼦元素宽度设为100%时的奇怪现象原理探究
⽗元素的宽度 = 图⽚宽度 + ⽂字内容宽度
浏览器渲染原理：先下载⽂档内容，加载头部样式资源，然后按从上到下、⾃外⽽内的顺序渲染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的初始尺⼨为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的元素 内联盒模型:
1. 内容区域：可以理解为⽂本选中的背景⾊区域(重点)
2. 内联盒⼦：内联标签或者纯⽂本
3. ⾏框盒⼦：由内联盒⼦组成的⼀⾏，每⼀⾏就是⼀个⾏框盒⼦
4. 包含盒⼦：由⾏框盒⼦组成的盒⼦ 幽灵空⽩节点：在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; }
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: dot 3s infinite step-start both;
}
@keyframes dot{
33% { transform: translateY(-3em);}
66% { transform: translateY(-2em);}
99% { transform: translateY(-1em);}
}
3.属性值内容⽣成
/* 可以使⽤原⽣属性和⾃定义属性 */
.icon::after{
content: attr(data-tip);
}
4.计数器属性---纯css实现计数器效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。