当前位置：主页 > 查看内容

前端进阶:Css必知的几个底层知识和技巧

发布时间：2021-09-17 00:00| 有 位朋友查看

简介：学习方法推荐 问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它……

 学习方法推荐

问题学习法：带着问题去学习，有利于集中注意力，目的明确，这既是有意学习的要求，也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的，必要时需经过意志努力，主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息，使学习有了明确的指向性，从而提高学习效率。

在介绍完问题学习法之后，进入我们今天的主题，接下来我会介绍css的一些底层的知识和比较诡异的现象，借此来让大家对css有更深入的理解。

一.css尺寸

1.首选最小宽度–实现复杂图形效果

  • 在css中，图片和文字的权重远大于布局，因此当width:0时表现出来的宽度就是“首选最小宽度”。中文的最小宽度为每个汉字的宽度，西方文字取决于连续的英文字符单元。

因此，我们可以根据这个它特性，去实现一些复杂的图形，如下：

 

当鼠标经过时，变成了下面的样子：

代码如下：

  1. .minW{ 
  2.     display: inline-block; 
  3.     width: 0 
  4. } 
  5.  
  6. .minW::before { 
  7.     content: "love 你 love"; 
  8.     color: transparent; 
  9.     outline: 2px solid #cd0000; 
  10. } 
  11.  
  12. .minW:hover::before{ 
  13.     content: "你 love 我"; 
  14.     color: transparent; 
  15.     outline: 2px solid #cd0000; 
  16. } 

我们会发现，当容器宽度设置为0后，由于首选宽度的影响，出现了基于文字空间的形状。

2.2.子元素宽度设为100%时的奇怪现象原理探究

  • 父元素的宽度 = 图片宽度 + 文字内容宽度
  • 浏览器渲染原理：先下载文档内容，加载头部样式资源，然后按从上到下、自外而内的顺序渲染dom内容。本例的现象产生的原因就是：当渲染到父元素时，子元素的width:100%并没有渲染，宽度就是图片加文字内容的宽度;等渲染到文字这个子元素的时候，父元素的宽度已经固定，此时的width:100%就是以固定好的父元素的宽度，宽度不够只能溢出。

 

  1. .box{ 
  2.     display: inline-block; 
  3.     white-space: nowrap; 
  4. } 
  5.     .text{ 
  6.     display: inline-block; 
  7.     width: 100%; 
  8. } 

理论上父元素宽度应该是子元素宽度之和，但是却出现了上图的现象，原因归根就在于浏览器渲染的顺序：自外而内，这点十分重要。

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：

  1. .nav > .sub-nav{ 
  2.     max-height: 0; 
  3.     overflow: hidden; 
  4.     transition: max-height .6s cubic-bezier(.17,.67,.76,1.41) 
  5. } 
  6. .nav:hover > .sub-nav{ 
  7.     max-height: 400px; 
  8. } 

二.内联元素深入探究

常见的内联元素有：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是一个普通的内联元素，宽高设置无效)：

  1. img { visibility: hidden; } 
  2. img[src] { visibility: visible; } 
  • content内容生成技术

1.实现换行

  1. ::after{ 
  2.    content: '\A'; 
  3.    white-space: pre; 
  4. } 

2.实现正在加载动画


  1. .dot{ 
  2.    display: inline-block; 
  3.    width: 8em; 
  4.    height: 1em; 
  5.    line-height: 1; 
  6.    text-align: left; 
  7.    vertical-align: -.25em; 
  8.    overflow: hidden; 
  9. } 
  10. .dot::after{ 
  11.    display: block; 
  12.    margin-left: 5.2em; 
  13.    content: '...\A..\A.'; 
  14.    white-space: pre-wrap; 
  15.    animation: dot 3s infinite step-start both; 
  16. } 
  17. @keyframes dot{ 
  18.    33% { transform: translateY(-3em);} 
  19.    66% { transform: translateY(-2em);} 
  20.    99% { transform: translateY(-1em);} 
  21. } 

3.属性值内容生成


  1. <div class="icon" data-tip="江小白"></div> 
  2. /* 可以使用原生属性和自定义属性 */ 
  3. .icon::after{ 
  4.     content: attr(data-tip); 
  5. } 

4.计数器属性---纯css实现技术器效果

  1. .box1{ 
  2.     counter-reset: count1; 
  3. } 
  4. .xigua:checked::before{ 
  5.     content: counter(count1); 
  6.     counter-increment: count1; 
  7.     position: absolute; 
  8.     color: transparent; 
  9. } 
  10. .box1::after{ 
  11.     content: counter(count1); 
  12. } 
  13. </style> 
  14. <div class="counter"> 
  15.     <div class="box1"> 
  16.         <div>西瓜<input class="xigua" type="checkbox" /></div> 
  17.         <div>香蕉<input class="xigua" type="checkbox" /></div> 
  18.         <div>萝卜<input class="xigua" type="checkbox" /></div> 
  19.     </div> 
  20. </div> 
四.padding深入研究
本文转载自网络，原文链接：https://mp.weixin.qq.com/s/2od1UGfDb3N391Tr2lwBlw
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：求你别再用Swagger了，给你推荐几个在线文档生成神器 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐