HTML 布局篇

amos_tl

浏览: 342422 次
性别:
来自: 长沙

最近访客更多访客>>

495127903

huanggua12353719

gaojingsong

我想与我思

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

布局篇
-----------------------------------------------------------
网页第一行请加上 <!DOCTYPE html> 决定浏览器为标准渲染模式.
-----------------------------------------------------------
static
float
relative
absolute
fixed

1)
静态布局不受浮动/相对/绝对布局的影响.

2)
浮动布局受静态布局元素(块)影响. 要使它不受静态布局的影响,可将静态布局的块行改变为内联块 display: inline-block;
水平排列时,先将浮动块进行相对定位; 还没完, 还要将静态布局的块进行左移: margin-left: -xxpx;
或者浮动块改为内联静态块, display: inline-block; vertical-align: top;

3)
浮动块相对前面的浮动块定位时,只使用原来浮动块没有相对定位时的的默认位置来定位.
浮动定位的元素不保留原来所占据的空间.
浮动定位是相对它前面的兄弟(非绝对定位)块来定位, 没有则相对容器定位.

4)
相对定位的元素保留原来所占据的空间.
相对定位是相对元素自身原来的位置来定位.
相对定位的元素不会把容器撑开.
相对定位可以用父容器的 overflow:hidden, overflow:scroll, overflow:auto; 来控制元素溢出时的行为.

5)
绝对定位的元素不保留原来所占据的空间.
绝对定位是相对元素最近祖先的相对或绝对元素来定位. 注意不是兄弟啊.
绝对定位的元素不会把容器撑开.
绝对定位可以用相对元素最近祖先的相对或绝对元素的 overflow:hidden, overflow:scroll, overflow:auto; 来控制元素溢出时的行为.
绝对定位脱离文档流, 修改绝对定位元素不会造成回流.

6)
浮动与相对结合定位时:
先浮动,后相对定位,元素不保留原来所占据的空间.

7)
浮动与绝对结合定位时:
浮动定位无效.

8)
固定定位是相对屏幕来定位.

9) 示例
带文字的按钮
<!DOCTYPE HTML>
<html>
    <head>
    <title>布局测试</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <style type="text/css">
            html, body {
                margin: 0px;
                padding: 0px;
                text-align: center;
                font-size: 12px;
                color: white;
                background-color: #FFF;
            }

            .viewport {
                position: relative;
                width: 980px;
                height: auto;
                margin: 0 auto;
                padding: 0px;
                text-align: left;
            }

            .button {
                display: inline-block;
                color: orange;
                overflow: hidden;
                text-align: center;
                border: 1px solid orange;
                border-radius: 3px;
                cursor: pointer;
                background-color: white;
            }

            .button:hover {
                background-color: yellow;
            }

            .button .icon_l {
                width: 18px;
                height: 18px;
                line-height: 18px;
                display: inline-block;
                background-image: url('resources/icon/icon_search.png');
                background-position: left center;
            }

            .button .icon_r {
                width: 18px;
                height: 18px;
                line-height: 18px;
                display: inline-block;
                background-image: url('resources/icon/icon_search.png');
                background-position: right center;
            }

            .button .text {
                margin: 2px 5px;
                line-height: 18px;
            }

        </style>

    </head>
    <body>
        <div class="viewport">
            <div class="button">
                <div class="icon_l"> </div>
                <span class="text">搜索(S)</span>
            </div>

    </div>
</body>
</html>

分享到：