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; }
运行结果如下图!
![图片正常,都是正方形](https://i-blog.csdnimg.cn/blog_migrate/b50197cb45bf7c88bb5e38bc4d2de4a4.png)
在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;}