3月23 格式布局及relative

主要是针对格式布局的一些内容:

1:position:fix

锁定位置（相对于浏览器的位置），例如网上弹出的一些广告

<style type="text/css">
#a
{
    border:2px solid blue;
    height:100px;
    width:100px;
    background-color:#0F6;
    right:60px;
    bottom:70px;
    position:fixed;}

</head>
<body>


<div id="a">今天是个好日子，后面打上n个回车可以明显看出</div>

2.position :absolute

1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，

2.外层有position：absolute（或relative）；那么div相对于外层边框定位，

.b
{
    border:2px solid blue;
    height:100px;
    width:100px;
    background-color:#0F6;
    right:0px;
    bottom:0px;
    position:absolute;}
.c
{
    border:2px solid red;
    width:400px;
    height:200px;}
.d
{
    border:2px solid red;
    width:400px;
    height:200px;
    position:absolute;}    

</style>
</head>
<body>
<div class="b">.b的器相对于整个页面的bc和下面效果相仿</div>
<div class="c">.c的相对于这么多空格结束后的</div>
<div class="c">ccc<div class="b">bbb</div></div>
<div class="d">dddd又来一个</div>
<div class="d">d<div class="b">b</div></div>

3.position: relative

相对位置

相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。

#aaa
{
    border:2px solid yellow;
    background-color:#9F3;
    height:100px;
    width:100px;
    left:30px;
    top:30px;
    position:fixed;}
#bbb
{
    border:2px solid yellow;
    background-color:#9F3;
    height:100px;
    width:100px;
    left:30px;
    top:30px;
    position:relative;}

</style>
</head>
<body>
<div id="aaa">aaaaaa</div>
<div id="bbb">bbbbbb</div>
<div id="aaa">aiyou<div id="bbb">ganha是b相对a</div></div>

两种情况都试了看一下不同

（二）分层（Z-index）

在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。

　　在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa？

只需要把添写上z-index:2就可以了

（三）float：left、right

Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

#cc
{
    border:#0C0 solid 2px;
    height:300px;
    width:100px;
    float:right;}    
#dd
{
    border:#0C0 solid 2px;
    height:300px;
    width:100px;
    float:right;}
#ee
{
    border:#0C0 solid 2px;
    height:300px;
    width:100px;
    float:left;}
#ff
{
    border:#0C0 solid 2px;
    height:300px;
    width:100px;
    float:left;}        
    
</style>
</head>
<body>
<div id="cc">没吃饭 相对游览器</div>
<div id="dd">吃饭了吗</div>
<div id="ee">你好</div>
<div id="ff">我很好</div>
</body>
</html>

　　overflow：hidden； //超出部分隐藏；scroll，显示出滚动条；

　　<div style="clear:both"></div> //截断流

posted @ 2016-03-23 22:44 Durriya 阅读(232) 评论(0) 编辑收藏举报

Durriya

3月23 格式布局及relative

公告