首页 > Web开发 > 详细

div+css布局

时间:2016-09-06 12:15:52      阅读:175      评论:0      收藏:0      [点我收藏+]

1.div 和 span(为了应用CSS样式)

  span是内联样式(只占内容存在的那一部分)

  div是块级元素(占一整行)

2.盒模型

  margin:盒子外边距

  padding:盒子内边距

  border:盒子边框宽度

  width:盒子宽度

  height:盒子高度

3.布局的相关属性

  1)position定位方式

    正常定位:relative

    根据父窗口进行定位:absolute

    根据浏览器窗口进行定位:fixed (常用于做浮动窗口,相对于浏览器位置一直保持不变)

    没有定位:static

    继承:inherit

  2)定位

    离页面定点的距离:left、right、top、bottom

  3)层覆盖先后顺序(优先级)

    z-index:用数字表示,默认为0,数字越大越向上

  4)显示属性:display

    none:层不显示

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

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

    (内联元素不能定义宽度,可以用block和inline两个属性实现div和span的相互转换)

  5)浮动属性:float

    left:左浮动

    right:右浮动

  6)清除浮动

    clear:both

  7)溢出处理:overflow

    hidden:隐藏超出层大小的内容

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

    auto:超出时自动添加滚动条

4.使网页定格居中显示:

body{

  margin:0 auto;

}

5.兼容问题

  1)兼容性测试工具

    IE Tester、Multibrowser

  2)常用的浏览器

    Google chrome、Firefox、opera

  3)高效的开发工具

    Notepad++、sbulime Text、记事本

    WebStorm、Dreamweaver

  4)网页设计工具

    fireworks、photoshop

div+css布局

原文:http://www.cnblogs.com/syyy/p/5845144.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!