css控制div为当前页面的一半,如何通过css控制div在页面显示的大小

2018-11-17 回答

css中的position property一共有四种：

1. postion: static

2. postion: relative

3. position: fixed

4. position: absolute

如果设置div为static postion, div的位置将不受top,right,left,button等变量的影响，而是按照正常的页面布局进行排版。例：

div.static {

position: static;

border: 3px solid #8ac007;

}

如果设置div为relative position, 其变量的值将会使div的位置相对其正常(default)位置进行移动。例：

div.relative {

position: relative;

left: 30px;

border: 3px solid #8ac007;

}

如果设置div为fixed position, div将会被固定在窗口的固定位置。也就是说无论你如何上下移动页面, div在屏幕上显示的位置始终不变。

div.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;

border: 3px solid #8ac007;

}

如果设置div为absolute position, div将会相对于其最近的position ancestor定位。absolute position是可以随页面移动而移动在屏幕上的位置的。

div.absolute {

position: absolute;

top: 80px;

right: 0;

width: 200px;

height: 100px;

border: 3px solid #8ac007;

}

以上css你可以放到自己的网页应用里试一下，区别就很明显了。

参考资料：http://www.w3schools.com/css/css_positioning.asp