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

学习方法推荐

创新互联专注于企业全网整合营销推广、网站重做改版、秀屿网站定制设计、自适应品牌网站建设、H5建站、商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为秀屿等各大城市提供网站开发制作服务。

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

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

一.css尺寸

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

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

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

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

代码如下：

 
 
 
 
  
  
  
  .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%时的奇怪现象原理探究

父元素的宽度 = 图片宽度 + 文字内容宽度
浏览器渲染原理：先下载文档内容，加载头部样式资源，然后按从上到下、自外而内的顺序渲染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的元素内联盒模型:

内容区域：可以理解为文本选中的背景色区域(重点)
内联盒子：内联标签或者纯文本
行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子
包含盒子：由行框盒子组成的盒子幽灵空白节点：在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实现技术器效果

 
 
 
 
  
  
  
  .box1{
  
  
  
      counter-reset: count1;
  
  
  
  }
  
  
  
  .xigua:checked::before{
  
  
  
      content: counter(count1);
  
  
  
      counter-increment: count1;
  
  
  
      position: absolute;
  
  
  
      color: transparent;
  
  
  
  }
  
  
  
  .box1::after{
  
  
  
      content: counter(count1);
  
  
  
  }
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
          西瓜
  
  
  
          香蕉
  
  
  
          萝卜

/* 父元素设置 */
.pd-2-1{
overflow: auto;
}
.pd-2-1 > span{
padding-top: 1em;
padding-bottom: 1em;
}

.pd-3{
padding: 10% 50%;
position: relative;
}
.pd-3 img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/* 菜单 */
.icon-menu{
display: inline-block;
width: 120px;
height: 10px;
padding: 35px 0;
border-bottom: 10px solid;
border-top: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
/* 双层圆点 */
.icon-dot{
display: inline-block;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 50%;
border: 10px solid;
background-clip: content-box;
background-color: currentColor;
}

* 解决方案：父级设置为块级格式化上下文元素
父元素设置border-top/bottom值
父元素设置padding-top/bottom值
父元素设置高度

.father{
position: relative;
}
.child-2{
position: absolute;
left: 0; bottom: 0; right: 0; top: 0;
width: 40px;
height: 20px;
margin: auto;
}

html{
/* ie8 */
overflow-y: scroll;
}
:root{
overflow-y: auto;
overflow-x: hidden;
}
:root body{
position: absolute;
}
body{
width: 100vw;
overflow: hidden;
}

1.flex
2.opacity不为1
3.transform不为none
4.mix-blend-mode不为normal
5.filter不为none
6.isolation是isolate
7.will-change为上面2-6的任意一个
8.元素-webkit-overflow-scrolling设为touch