记录下css的小知识，不时更新

Panda 发布于2019-08-30 15:44 / 2745人阅读

摘要：后两个属性可选。下的底部有空隙解决图片是行内标签，垂直方向以基线对齐所以给图片设置即可。

1.div下的span标签之间有空白，为什么？怎么处理？


    1
    2
    3

解决：span之间有换行，去掉换行，或span左浮动，然后父标签利用伪类after去除浮动

.qs1:after {
    content: "";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;

}
.qs1 span {
    float: left;
}

2.实现一个三列布局

flex布局

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap；
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.container{
    height: 300px;
    display: flex;;
    flex-flow: row nowrap;
}
.content {
    background: green;
    flex: 1 1 auto;
}

.left {
    background: red;
    flex: 0 0 100px;
}

.right {
    background: blue;
    flex: 0 0 100px;
}

3.div下的img底部有空隙

解决：图片是行内标签，垂直方向以基线对齐 vertical-align: baseline; 所以给图片设置vertical-align: middle即可。或者给图片设置display: block;

GPU云服务器云服务器关于网络安全的小知识用php实现记录更新 cn域名的ns记录下不时之需

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116178.html

如何正确学习JavaScript

摘要：然而，虽然先生对无所不知，被誉为世界的爱因斯坦，但他的语言精粹并不适合初学者学习。即便如此，在后面我还是会建议把当做补充的学习资源。但目前为止，依然是学习编程的好帮手。周正则表达式，对象，事件，阅读权威指南第，，，章。既然你找到这篇文章来，说明你是真心想学好JavaScript的。你没有想错，当今如果要开发现代网站或web应用（包括互联网创业），都要学会JavaScript。而面对泛...

canger 2019-08-21 10:23 评论0 收藏0
一个完整Java Web项目背后的密码

摘要：所以我们还是以的角度去看待一个项目。在中最耀眼的当属了，作为一个贯穿整个项目的框架，为项目开发带来依赖注入，面向切面编程的功能。说到这里，其实一个简单的完整的项目就差不多了。 showImg(https://segmentfault.com/img/remote/1460000016219391); 前言最近自己做了几个Java Web项目，有公司的商业项目，也有个人做着玩的小项目，...

JowayYoung 2019-08-23 11:36 评论0 收藏0
一个完整Java Web项目背后的密码

摘要：所以我们还是以的角度去看待一个项目。在中最耀眼的当属了，作为一个贯穿整个项目的框架，为项目开发带来依赖注入，面向切面编程的功能。说到这里，其实一个简单的完整的项目就差不多了。 showImg(https://segmentfault.com/img/remote/1460000016219391); 前言最近自己做了几个Java Web项目，有公司的商业项目，也有个人做着玩的小项目，...

xuweijian 2019-08-19 11:04 评论0 收藏0
2016百度前端技术学院Task02

摘要：的演示整个项目的地址的地址起初只是想简单开始重新做一遍百度前端技术学院的任务，但是在做的过程中萌生了要记录下自己在过程中遇到的一系列问题的想法。现在我把自己完成的小项目的源码在上分享出来，希望可以帮到广大前端初学者们。 Task02的演示DEMO：https://amnova.github.io/New-... 整个项目的GitHub地址：https://github.com/amn...

venmos 2019-08-30 13:19 评论0 收藏0