扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家介绍一波CSS+Div实用技巧小结，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联专业为企业提供通州网站建设、通州做网站、通州网站设计、通州网站制作等企业网站建设、网页设计与制作、通州企业网站模板建站服务，十余年通州做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
正如多数人的认知一样，HTML和CSS并不难学难用，从学习曲线上来说确实如此，难度甚至不如使用VIM。但是写不写得好又是另一回事，好的CSS代码能用最少的代码量实现功能，易修改且性能佳。易修改，举个最简单的例子，比如要求修改一个div的高宽且保持其子div自适应高宽，若是写死了子div的高宽，修改工作很麻烦，所以最好是将子div在需求下尽可能写成自适应，这样修改时就只需要修改父div的高宽即可。性能佳，能用CSS实现的绝对不用js实现，不管是网页布局还是动画效果，原生的CSS都是快速又具备高度兼容性的选择。
清除浮动
清除浮动是个常见问题，不少人的解决办法是添加一个空的 div 应用 clear:both。事实上仅需要使用after伪类即可在元素尾部自动清除浮动
CSS
.clear-fix { overflow: hidden; zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }
DIV同行排列
最容易想到的是将一行div全设置为display:inline-block，但这种做法会使得两个div之间存在“间隔”，这个“间隔”的大小通常由font-size决定。清除间隔可以通过使用注释的方法实现。
CSS
更好的方式自然还是使用float
CSS
.item {float: left}
灵活使用BFC
BFC（Block Formatting Context）直译为“块级格式化范围”。当一个HTML元素满足以下任何一点时，就会产生BFC:
float的值不为none
overflow的值不为visible
display的值为table-cell, table-caption或inline-block
position的值不为relative和static
BFC提供了一个环境，这个环境中的元素不会影响到其它环境中的布局。比如浮动元素形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。BFC就是一个作用范围，可看作是一个独立的容器，并且这个容器的布局，与这个容器外的元素毫不相干。
BFC的元素不能与浮动元素重叠，当容器有足够的剩余空间容纳 BFC 的宽度时，所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。
未垂直对齐
同一行的一组class为item的div使用了display:inline-block或者是float:left时，如果某个div的内部标签中填充一些文字等内容，可能就会出现垂直不对齐的情况。但非常奇怪的是，这时内部元素并没有超出父级div的范围，没有任何溢出或撑开的情况，这点我也不是很理解，知道其发生原因的同学欢迎留言。解决方法倒不难：
CSS Code复制内容到剪贴板
.item { vertical-align: top;}
display:table-cell的应用
table-cell会被其他一些CSS属性破坏，例如float和 position:absolute，所以display:table-cell与float:left或是position:absolute属性最好不要同用。设置了该属性的元素对宽度高度敏感，响应padding属性，对margin值无反应
垂直居中
CSS
.content {
display: table-cell;
border: 1px solid #eee;
width: 600px;
text-align: center;
}
what a beautiful day
两栏自适应布局
适用于一栏宽度不固定，比如大小不确定的图片，另一栏自动调整占满剩余宽度的场景。
CSS
.box {
width: 70%;
}
.content {
display: table-cell;
border: 1px solid #eee;
}
.fix {
float: left;
color: #a8c;
}
风住尘香花已尽，日晚倦梳头。物是人非事事休，欲语泪先流。闻说双溪春尚好，也拟泛轻舟。只恐双溪舴艋舟，载不动许多愁。
关于一波CSS+Div实用技巧小结就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网