div+css学习 记忆列表

基础

1.css规则没有设置宽度时，每个div均占据一行。

2.设置div的margin-left、margin-right为auto以达到水平居中的目的。

浮动定位

1.float浮动属性：left right none inherit设置对象左右移动，直到其边缘碰到父元素的边框或另一个浮动元素的边缘，浮动框不在文档普通流中(但不像absolute定位对普通流完 全没有影响，浮动框会影响普通流的内容。（不影响普通框，但会遮挡普通框）)。

     

2.当多个div都向同一方向浮动时，其顺序根据代码出现的顺序确定。

<div id="div1">第一块</div>
<div id="div2">第二块</div>

   

3.clear属性：none left right both

      #div3 {
width: 350px;
height: 350px;
background-color: blue;
clear: none;
}

      

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#div3 {
width: 350px;
height: 350px;
background-color: blue;
clear: left;
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#div3 {
width: 350px;
height: 350px;
background-color: blue;
clear: right;
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

#div3 {
width: 350px;
height: 350px;
background-color: blue;
clear: both;
}

position属性：absolute relative static fixed inherit(继承) 默认为static 按照在html中出现的顺序显示。

当取值absolute、relative时边距可用left right top bottom设置。

1.absolute从html标准流中分离出来 ，对标准流毫无影响（不同于浮动框）。z-index控制绝对布局块的层次。

#div3 {
height: 350px;
background-color: blue;
position: absolute;
top: 200px;
left: 200px;
right: 200px;
}

2.relative定位：相对父块偏移定位，脱离标准流浮上来，但其所占位置任然留有空位。后面的无定位元素不会移动上来。因此移动元素会导致覆盖其他框。

#div1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 50px;
left: 50px;
}