今天小编跟大家讲解下有关一波CSS+Div实用技巧小结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关一波CSS+Div实用技巧小结 的相关资料，希望小伙伴们看了有所帮助。
正如多数人的认知一样 HTML和CSS并不难学难用 从学习曲线上来说确实如此 难度甚至不如使用VIM。但是写不写得好又是另一回事 好的CSS代码能用最少的代码量实现功能 易修改且性能佳。易修改 举个最简单的例子 比如要求修改一个div的高宽且保持其子div自适应高宽 若是写死了子div的高宽 修改工作很麻烦 所以最好是将子div在需求下尽可能写成自适应 这样修改时就只需要修改父div的高宽即可。性能佳 能用CSS实现的绝对不用js实现 不管是网页布局还是动画效果 原生的CSS都是快速又具备高度兼容性的选择。清除浮动
清除浮动是个常见问题 不少人的解决办法是添加一个空的 div 应用 clear:both。事实上仅需要使用after伪类即可在元素尾部自动清除浮动
CSS Code复制内容到剪贴板 .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 Code复制内容到剪贴板 <divclass="item"></div><!-- --><divclass="item"></div>更好的方式自然还是使用float
CSS Code复制内容到剪贴板 .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 Code复制内容到剪贴板 .content{ display:table-cell; border:1pxsolid#eee; width:600px; text-align:center; } <divclass="content"> <p>whatabeautifulday</p> </div>两栏自适应布局
适用于一栏宽度不固定 比如大小不确定的图片 另一栏自动调整占满剩余宽度的场景。
CSS Code复制内容到剪贴板 .box{ width:70%; } .content{ display:table-cell; border:1pxsolid#eee; } .fix{ float:left; color:#a8c; } <divclass="box"> <divclass="fix">Thisisleftfixedblock</div> <divclass="content"> 风住尘香花已尽 日晚倦梳头。物是人非事事休 欲语泪先流。闻说双溪春尚好 也拟泛轻舟。只恐双溪舴艋舟 载不动许多愁。 </div> </div>来源：爱蒂网
