重学css

css的三大特性：继承性（inherit）、覆盖性、优先级 

css的权重比较：！important （infinty）> style（1000） >id(100)>class|属性选择器|伪类(10)>标签|伪元素(1)>通配符*(0)

css的权重计算：直接相加就可以 , #id p === 100+1 , .item.li === 10+10

行级元素：feature：1.内容决定所占的位置，2.不可以改变宽高, 比如 span、em、strong、img、a

块级元素：feature:   1.独占一行，2.可以改变宽高,比如：div、p、h1-h6、img、header、main、footer、section、artcile、ul、ol、form

行级块元素：featrue：1.内容决定大小，2.可以改变大小 display:inline-block

盒模型计算：realwidth:width+padding+border; realheight:height+padding+border;解决盒子与盒子之间的间隔问题；

层级盒模型:absolute:脱离原来位置进行定位，相对于最近有定位的父级进行定位，如果没有相对文档进行定位，relative:保留原来位置进行定位，相对于原来位置定位，fixed：固定定位

浮动模型：float:left|right,浮动元素会产生浮动流（并不是分层）块级元素看不到他们，只有触发bfc的元素和文本属性的元素（inline）和文本可以看到;结合伪元素和clear:both属性来清除浮动

  .box::after{
   content:"",
   display:block;
   clear:both;
  }

bfc:block format content（块级格式上下文）,仅仅改变一点点盒子渲染的规则，如何触发一个盒子的bfc：posotion:absoute,display:inline-block,overflow:hidden,float:lefe|right，bfc解决margin塌陷问题；

重要知识点：设置了position:absolute，float：left|right的元素内部会将元素设置成inline-block(内容决定大小) ；

项目实战和相关面试题

题目1：如何让元素垂直居中的方案

  method 1:
  .box{
   position：absolute;
   left:50%;
   top:50%;
   margin-left:-50%;
   margin-top:-50%;
  }
  method 2:
  .box{
   position：absolute;
   left:50%;
   top:50%;
   transform:translate(-50%,-50%)
  }
  method 3:
  .box{
   display:fixe;
   jusitify-content:center;
   align-item:center;
  }

题目2 ：文字过多打点展示

  一行文字情况：
  .box{
  overflow:hidden;
  white-space:nowarp;
  text-overflow:ellipsis
  }
  //多行文字情况
  .box{
   overflow:hidden;
   test-overflow:ellipsis;
   display:-webkit-box;
   -webkit-line-clamp:2;
   -webkit-box-orient:vertical
  }