css

css中一些小技巧
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）-----------width:100%;height:0;padding-top:100%;占位（即在图片加载之前给拖图片留好位置）/另一种方法也可以用css3，但是css3要注意兼容问题
https://blog.csdn.net/zgpeterliu/article/details/81018230

问题解决：实例,用的是清除灵活清除浮动，撑开父元素。也是添加为元素。https://blog.csdn.net/Inuyasha1121/article/details/44815779

• 父级元素高度说明：说没有设置父级高度，则由内容撑开，若子元素的所有高度大于父元素，则子元素会溢出，溢出的会遮盖掉下面的块元素，但被遮住的块元素的内容会浮在表面
• 标签的合理嵌套：标题，段落类的块元素（h1-h6，p）不能包含块元素。ins和del这两种行元素可以包含块元素。
• 内容的overflow:直接裁剪盒省略号
  1.单行省略号
  overflow:hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  2.多行省略号
  var con=document.getElementById(“con”);
  var context=con.innerHTML;
  con.innerHTML=context.substring(0,49)+’…’;

模块布局

• img标签的选用：数据图和背景图；alt必备属性（图片加载失败时，seo对图片的判断也是需要alt），title：鼠标放上时的描述，更详细；如果不为父元素设置高度仅由图片撑开，则需要displayblock清除图片下多余的4px；
• 网页控制高度的隐藏：设置高度，会保持盒模型不变，要么会留白，要么会溢出，溢出的可以裁剪，但只有设置的固定的高度才可以隐藏
• 透明属性opacity:父级元素设置后，后代元素会跟着透明。transparent：全透明，可以为背景颜色，边框颜色，或文字颜色设置

style
（1）
#m-pp-listing { width:98%; margin:0 auto; }
.m-pp-figure-list { margin: 0; padding: 0; }
.m-pp-figure-list :after { content: “”; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden;} /注意这个使子元素清除浮动是设置在父元素上，注意清除浮动/
.m-pp-figure-list li { list-style: none; float: left; width:32%; margin: 0 1% 1% 0; }
.m-pp-figure-list figure { position:relative;width: 100%; height: 0; overflow: hidden; margin: 0; padding-bottom: 100%;} /这个相当于添加的为元素？对，和为元素一样都是li内的元素/
.m-pp-figure-list figure img{ display: block; z-index:99; position: absolute; width: 100%; top: 0; bottom: 0; } （把图片设置为block有啥用？）
（2）
#m-pp-listing { width:98%; margin:0 auto; }
.m-pp-figure-list { margin: 0; padding: 0; }
.m-pp-figure-list :after { content: “”; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden;} ，注意清除浮动*/
.m-pp-figure-list li { list-style: none; float: left; width:32%; margin: 0 1% 1% 0; }
.m-pp-figure-list figure { position:relative;width: 100%; height: 0; overflow: hidden; margin: 0; padding-bottom: 100%;} /这个相当于添加的为元素？对，和为元素一样都是li内的元素/
.m-pp-figure-list figure img{ display: block; z-index:99; position: absolute; width: 100%; top: 0; bottom: 0; }

• 
  
• 
  

  
  
  
  

  
  
• 
  
• 
  

  
  
  
  

  
  
• 
  
• 
  

  
  
  
  

  
  
• 
  
• 
  

  
  
  
  

  
  
• 
  
• 
  

  
  
  
  

  
  
• 
  
• 
  

  
  
  
  

  
  
• 
  

运行结果如下图!
在li中插入了一个为元素此时li作为父容器，而没有为伪元素设置padding-top/margin-top：100%是因为此时为元素还有一个兄弟元素figure，如果设置为元素100%，不将兄弟元素的定位设置为绝对定位（脱离文档流），则会产生如下情况,还要注意为元素的display：block；注意绝对定位是相对于上一个有定位的祖先元素，所以figure的relative不能省，图片不正常，每一行图片下面都有padding-top：100%的空白
( https://img-blog.csdnimg.cn/20190414142117451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlaWxhbWl1bHVjZQ==,size_16,color_FFFFFF,t_70)

• css模块练习2吸顶灯
  .header{margin:0;padding:0;background-color:#c92d31;height:120px;width:100%;position:fixed;top:0;box-sizing: border-box;z-index:100;padding:0 100px;display: flex;align-items: center}
  .logo{float: left;align-items: center}
  .logo img{width:200px;}
  .menu{align-items:center;float:left;padding-left: 20px;margin-left: 100px}
  .menu li{float:left;line-height: 120px;height:120px;padding-left:20px;}
  .on a{border-bottom:3px solid #fff;padding:5px 0}
  .menu li a{font-size: 18px;color:#fff;}