css

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

问题解决：实例,用的是清除灵活清除浮动，撑开父元素。也是添加为元素。https://blog.****.net/Inuyasha1121/article/details/44815779
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.****img.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;}