zoukankan      html  css  js  c++  java
  • DIV+CSS布局要点

    DIV+CSS布局有很多值得学习的地方,这里向大家描述一下DIV+CSS布局注意要点,相信本文介绍一定会让你有所收获。

    DIV+CSS布局注意要点

    1、对DIV设置水平居中的问题。

    只要在这个DIV里面加上一句"margin:auto"即可;
    例如:

    1. <#divid="center"></#div
    2.  

    相应的css为:

    1. #center{  
    2. margin:auto;  
    3. }  

    2、用float属性的div布局问题。

    例如:(其中floatA、floatB的属性已经设置为float:left;)

    1. <#divid="float_a"></#div
    2. <#divid="float_b"></#div
    3. <#divid="not_float_c"></#div
    4.  

    这里的not_float_c并不希望继续平移,而是希望往下排。
    解决方案是在not_float_c的div里面加上clear:both;属性即可。

    相应的css为:

    1. #not_float_c{  
    2. clear:both;  
    3. }  
    4.  

    3、用float属性时margin属性加倍的问题。

    设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
    解决方案是在这个div里面加上display:inline;属性即可;
    例如:

    1. <#divid="add_float"></#div
    2.  

    相应的css为:

    1. #add_float{  
    2. float:left;  
    3. margin:5px;/*IE下理解为10px*/  
    4. display:inline;/*IE下再理解为5px*/  
    5. }  

    4、想要消除ul、li列表的缩进的问题。

    解决方法:

    1. <#divid="div"></#div
    2.  
    3. #div{  
    4. padding:0px;  
    5. margin:0px;  
    6. list-style:none;  
    7. }  
    8.  

    其中padding属性是指div边框向内增加,margin属性是指div边框向外增加。

    5、关于FF与IE的Hack的支持。

    FF:支持!important,IE则忽略,可用!important为FF特别设置样式,值得注意的是,一定要将xxx!important这句放置在另一句之上

    6、关于容器的包涵关系

    很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

    7、关于高度的问题

    如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。

    8、兼容IE和FF的换行CSS推荐样式。

    1. #row{  
    2. word-wrap:break-word;  
    3. overflow:hidden;  
    4. }  
    5.  

    9、兼容IE和FF的限行CSS推荐样式。

    1. #row{  
    2. height:200px;  
    3. overflow:hidden;  
    4. }  
    5.  

    【编辑推荐】

      1. DIV CSS网页布局开发参考规范
      2. IE6.0对padding的解读分析
      3. DIV+CSS网页错位诊断和解决方法
      4. Float构建三栏DIV CSS网页布局
      5. 技术分享 如何使用CSS控制超链接文字样式
  • 相关阅读:
    网络配置
    mysql和mongodb的区别
    HTTP和HTTPS
    网络架构/结构
    SKU和SPU表的设计
    第三方-FastDFS分布式文件系统
    并发和并行
    多任务-线程、进程、协程的一些见解
    多任务-协程
    多任务-协程之生成器
  • 原文地址:https://www.cnblogs.com/mayicom/p/3803016.html
Copyright © 2011-2022 走看看