css基础-布局模型

元素display下可用block（块，占用全宽度）、inline-block（块的一个边框，允许其它元素同一行）、inline（同一行，需要宽足够）、none（元素和内容均消失）

margin：元素周围的空间，可为auto，另margin-top:    margin-right:    margin-bottom:    margin-left:

或一次性设定

margin: 1px 2px 3px 4px; （top/right/bottom/left)

border：元素的边缘

padding同margin使用，为内容和边框的间隙

1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

2、在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。内联元素标签a、span、em、strong都是内联元素。

3、浮动模型用float定义

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}

<div id="div1"></div>

一左一右显示

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

4、层模型有三种形式：

绝对定位(position: absolute)

相对定位(position: relative)

固定定位(position: fixed)

下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

如下代码实现相对于以前位置向下移动50px，向右移动100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化

相对于底部对齐使用bottom。

参考代码如下,box4内容在box3里面下方：

#box3{
    width:200px;
    height:200px;
    position:relative;           
}
#box4{
    width:99%;
    position:absolute;    
    bottom:0;
    left:0; /*这条css样式可以省略*/        
}