CSS布局与兼容性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37454089/article/details/61197210

本文详细介绍了HTML中的DIV和SPAN元素及其在CSS布局中的作用，对比了它们作为块级和内联元素的区别，并深入探讨了包括margin、padding、border等在内的盒模型属性。此外，还介绍了position、display和float等布局相关的属性，以及如何解决不同浏览器间的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div和span

DIV和SPAN在整个HTML标签中没有任何意义，他们的存在就是为了应用CSS样式


DIV和SPAN的区别在于SPAN是内联元素，DIV是块级元素

盒模型

margin 盒子外边距

padding 盒子内边距

border 盒子边框宽度

width 盒子宽度

height 盒子高度

布局相关的属性

position定位方式

    正常定位 relative

    根据父元素进行定位  absolute

    根据浏览器窗口进行定位  fixed

    没有定位  static

    继承  inherit


定位

    left、right、top、bottom 理页面顶点的距离


z-index曾覆盖先后顺序(优先级)


display显示属性

    none 层不显示

    block 块状显示，在元素后面换行，显示下一个块元素

    inline 内联显示，多个块可以显示在一行内

float浮动属性

    left  左浮动

    right 右浮动

clear清除浮动

    clear:both

overflow溢出处理

    hidde  隐藏超出层大小的内容

    scroll  无论内容是否超出层大小都添加滚动条

    auto  超出时自动添加滚动条

兼容问题

兼容测试工具

    IE Tester

    Multibrowse


常用的浏览器

    Firefox

    opera

    Google chrome


高效开发工具

    Notepad++

    sbulime Text

    记事本

    WebStorm

    Dreamweaver


网页设计工具

    fireworks

    photoshop


判断IE的方法

    条件判断格式  <!--[if 条件 版本]>那么显示<![endif]-->

    不等于   [if !IE 8]  除了IE8都可以显示

    小于   [if lt IE 5]   如果浏览器版本小于5显示

    大于   [if gt IE 5]   如果浏览器版本大于5显示

    大于或等于  [if gte IE 6] 

    小于或等于   [if lte IE 6]

    大于和小于之间  [（if gt IE 5）&（lt IE 7）]

    或   [if (IE6)|(IE7)]

    仅   <!--[if IE 8]>

DIV+CSS布局相关