Div+CSS布局相关属性（2）

Div+CSS布局相关属性

1.div和span

div和span在整个HTML标记中没有任何意义，他们存在就是为了应该CSS样式

div和span区别就是在于，span是内联元素，div是块级元素

例子:

<div>    div和span在整个HTML标记中没有任何意义，他们存在就是为了应该CSS样式    div和span区别就是在于，span是内联元素，div是块级元素</div><span>div和span在整个HTML标记中没有任何意义，他们存在就是为了应该CSS样式div和span区别就是在于，span是内联元素，div是块级元素</span></body>

div{    background-color: chartreuse;}span {    background-color: red;}

2.盒模型

margin：盒子外边距

padding：盒子内边距

border：盒子边框宽度

width：盒子宽度

height：盒子高度

3.布局相关的属性

3.1 position定位方式

relative：相对定位

1.使用相对定位的盒子，会相对于它原本的位置，通过偏移制定的距离，到达新的位置。

2.使用相对定位的盒子仍在标准流中，它对父兄盒子没有任何影响。

absolute：根据父元素进行定位

1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

2.绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

注意：

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

static:没有定位

inherit：继承定位

3.2定位

只有定义了相对属性，position：relative或者position：absolute，才可以定位以下属性

与页面定点的距离：

left：10px

right：10px

top：10px

bottom：10px

3.3 z-index层覆盖先后顺序（优先级）

z-index：0  默认

z-index：x       x 数值比0大则覆盖在上面

3.4display显示属性

none：不显示，隐藏

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

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

注意：可以把div块元素通过display显示属性转换为内联元素span， display：inline

         可以把span内联元素通过display显示属性转换为块元素div， display：block

3.5 float浮动属性

left：左浮动

right：右浮动

3.6 clear清除属性

clear：both 

3.7overflow溢出属性

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

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

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

4.兼容性问题

5.DIV+CSS页面布局实战

超链接去除下划线： a  {  text-decoration：none；}

列表去除样式： li {   list-style：none；}

列表左排列  ： li { float : left ;}

(用小条截图重复成背景色)加背景色:background: url(" ../image/   hover.jpg") repeat-x;

快捷键：div.logo+Tab键  即为 <div class="logo">

            h1>a>img+Tab键   即为 <h1><a href="   "><img src="  " alt="  "/></h1>