1.文档流（标准流）、浮动布局

来源：互联网发布：常见的网络诈骗有编辑：程序博客网时间：2024/06/04 18:23

文档流概念

元素自上而下，自左而右，块元素独占一行，行内元素在一行显示，碰到父元素的边框换行。

浮动布局

（大盒子在同一行显示）
float: left | right

特点：

元素浮动后不占据原来的位置（脱离标准流）
浮动的盒子在一行显示
行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display:inline-block;）

浮动作用

文本绕图
制作导航
网页布局

制作导航

<html><head><title>格式清零</title><style type="text/css">    body,ul,li{        margin:0;        padding:0;    }    li{        list-style:none;    }    .nav{        height:55px;        background:url("head_bg.jpg");        margin-top:30px;        border-top:1px solid #666;    .nav-con{        width:1000px;        margin:0 auto;        }    .nav-con ul li{        float:left;        background:url("li.png") no-repeat right;        height:55px;        padding:0 20px;        }    .nav-con ul li a{        display:inline-block;        height:55px;        font:18px/55px 微软雅黑；        text-decoration:none;        color:#000;        }    .nav-con ul li a:hover{        color:green;        }</style></head><body>    <div class="nav">        <div class="nav-con">            <ul>                <li><a href="#">智能手机</a></li>                <li><a href="#">智能手机</a></li>                <li><a href="#">智能手机</a></li>            </ul>        </div>    </div></body></html>

网页布局

阅读全文

0 0