脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS布局实例 >

一波CSS+Div实用技巧小结

segmentfault   发布时间：2015-07-18 18:23:18   作者：quietin   我要评论
这篇文章主要介绍了一波CSS+Div实用技巧小结,随看随记,欢迎收藏~需要的朋友可以参考下

正如多数人的认知一样，HTML和CSS并不难学难用，从学习曲线上来说确实如此，难度甚至不如使用VIM。但是写不写得好又是另一回事，好的CSS代码能用最少的代码量实现功能，易修改且性能佳。易修改，举个最简单的例子，比如要求修改一个div的高宽且保持其子div自适应高宽，若是写死了子div的高宽，修改工作很麻烦，所以最好是将子div在需求下尽可能写成自适应，这样修改时就只需要修改父div的高宽即可。性能佳，能用CSS实现的绝对不用js实现，不管是网页布局还是动画效果，原生的CSS都是快速又具备高度兼容性的选择。
清除浮动

清除浮动是个常见问题，不少人的解决办法是添加一个空的 div 应用 clear:both。事实上仅需要使用after伪类即可在元素尾部自动清除浮动

CSS Code复制内容到剪贴板
  1. .clear-fix { overflow: hidden; zoom: 1; }   
  2. .clear-fix:after { display: table; content: ""; width: 0; clear: both; }  

DIV同行排列

最容易想到的是将一行div全设置为display:inline-block，但这种做法会使得两个div之间存在“间隔”，这个“间隔”的大小通常由font-size决定。清除间隔可以通过使用注释的方法实现。

CSS Code复制内容到剪贴板
  1. <div class="item"></div><!--   
  2. --><div class="item"></div>  

更好的方式自然还是使用float

CSS Code复制内容到剪贴板
  1. .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 放置在浮动元素所在行的剩余空间内。
2015718182851156.png (516×42)

未垂直对齐

同一行的一组class为item的div使用了display:inline-block或者是float:left时，如果某个div的内部标签中填充一些文字等内容，可能就会出现垂直不对齐的情况。但非常奇怪的是，这时内部元素并没有超出父级div的范围，没有任何溢出或撑开的情况，这点我也不是很理解，知道其发生原因的同学欢迎留言。解决方法倒不难：

CSS Code复制内容到剪贴板
  1. .item { vertical-align: top;}  

display:table-cell的应用

table-cell会被其他一些CSS属性破坏，例如float和 position:absolute，所以display:table-cell与float:left或是position:absolute属性最好不要同用。设置了该属性的元素对宽度高度敏感，响应padding属性，对margin值无反应
垂直居中

CSS Code复制内容到剪贴板
  1. .content {   
  2.     display: table-cell;   
  3.     border: 1px solid #eee;   
  4.     width: 600px;   
  5.     text-align: center;   
  6. }   
  7.   
  8. <div class="content">   
  9.     <p>what a beautiful day</p>   
  10. </div>  

两栏自适应布局

适用于一栏宽度不固定，比如大小不确定的图片，另一栏自动调整占满剩余宽度的场景。

CSS Code复制内容到剪贴板
  1. .box {   
  2.     width: 70%;   
  3. }   
  4. .content {   
  5.     display: table-cell;   
  6.     border: 1px solid #eee;   
  7. }   
  8. .fix {   
  9.     float: left;   
  10.     color: #a8c;   
  11. }   
  12.   
  13. <div class="box">   
  14.     <div class="fix">This is left fixed block</div>   
  15.     <div class="content">   
  16.         风住尘香花已尽，日晚倦梳头。物是人非事事休，欲语泪先流。闻说双溪春尚好，也拟泛轻舟。只恐双溪舴艋舟，载不动许多愁。   
  17.     </div>   
  18. </div>  

相关文章

  • css九宫格布局的五种方法

    本文主要介绍了css九宫格布局的五种方法，内容包括grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性这五种方法的实现，感兴趣的可以了解下
    2023-09-18

  • CSS实现元素水平垂直居中的几种方法

    在Web开发中，经常会遇到需要将元素水平和垂直居中的情况,今天，将为大家分享几种CSS方法，让你的元素轻松居中，让页面更美观吸引人，感兴趣的小伙伴可以自己动手试一试
    2023-09-08

  • css实现元素居中的6种方法

    相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流
    2023-09-07

  • flex布局中使用flex-wrap实现换行的项目实践

    最近需要做个换行的布局，本文主要介绍了flex布局中使用flex-wrap实现换行的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需
    2022-06-16

  • CSS布局之浮动(float)和定位(position)属性的区别

    今天看到有朋友留言问浮动和定位有什么区别，如何使用？今天找了篇文章，讲的比较通俗易懂，供大家参考
    2021-09-23

  • css实现元素居中的N种方法

    这篇文章主要介绍了css实现元素居中的N种方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02

  • div水平布局两边对齐的三种实现方法

    这篇文章主要介绍了div水平布局两边对齐的三种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
    2021-01-21

  • waterfall瀑布流布局+动态渲染的实现

    这篇文章主要介绍了waterfall瀑布流布局+动态渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
    2021-01-19

  • 页面中有间隔的方格布局如何完美实现方法

    这篇文章主要介绍了页面中有间隔的方格布局如何完美实现方法。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来
    2020-11-27

  • css实现六种自适应两栏布局方式

    这篇文章主要介绍了css实现六种自适应两栏布局方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
    2020-10-28

最新评论

关注微信公众号

扫一扫