最新消息:文章中包含代码时,请遵守代码高亮规范!

前端小白的学习小总结(1)【原创】

HTML+CSS Ellen 148浏览 0评论

学习前端有一段时间了,对前端的认识还不算多,就先总结一下在学习html+css过程中遇到的一些小问题以及解决方法吧!

1.清除浮动css样式:

.clearfix{*zoom:1}
.clearfix:before,
.clearfix:after{
display: table;
content:”;
}
.clearfix:after{
clear:both;
}

2.flex-shrink:

让第二个元素收缩到其他元素的三分之一:
div:nth-of-type(2) {flex-shrink: 3;}

flex-shrink属性用于设置或检索弹性盒的收缩比..
注意:如果元素不是弹性盒对象的元素,则flex-shrink属性不起作用。
flex-shrink: number|initial|inherit;

3.鼠标经过效果:外框不动,图片放大:

.thumbnail:hover{
transform: scale(1.1);transition: all 1s ease 0s;
-webkit-transform: scale(1.1);
-webkit-transform: all 1s ease 0s;

}

4.当容器有边框时,hover效果的背景不会覆盖到两边的边框,有hover效果的一栏宽度会比没有hover效果的一栏短一点,如图一。因此,想让宽度等宽需要在hover选择器里添加:margin-left:-1px;  width:292px;

其中,宽度需要设定为每栏宽度+左右边框宽度

     

5.文本溢出,用省略号代替:

.overflow{

-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-height: 20px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;

}

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22497.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Elle的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!