Blogger Information
Blog 13
fans 1
comment 0
visits 9033
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
双飞翼布局练习-2019/7/8
降落伞的博客
Original
534 people have browsed it

1、子级浮动以后,如何让父级依然包住子级?

  • 父级高度可以由子级撑开。子级浮动,就会脱离文档流,而父级依然在文档流中,所以就包不住子级。最好的解决方案是给父级加上overflow: hidden属性。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
             width: 400px; /*当存在嵌套关系时,父级的高度由子级撑开*/
             border: 5px dashed blue;
             overflow: hidden;/*当子级浮动,父级包不住子级时,最好的方法是给父级添加此属性*/
        }
        #box2 {
            width: inherit;/*当存在嵌套关系时,子级的高度可以从父级继承*/
            height:200px;
            background-color: rosybrown;
            float: left; /*子级浮动,就会脱离文档流,而父级依然在文档流中,就包不住子级了*/
        }
    </style>
</head>
<body>
    <div id="box1">
         <div id="box2"></div>
    </div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、利用绝对定位实现内容区的三列布局

  • 切记main部分不可直接写内容

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过绝对定位实现内容区的三列布局</title>
    <style>
        #container {
            width: 1000px;
            margin: 0 auto;/*让整个页面内容都随浏览器窗口大小而调整*/
        }
        #header, #footer {
            height: 50px;
            background-color:rosybrown;
        }
        #main {
            margin: 5px auto;
            background-color:blanchedalmond;
        }
        #left {
            width: 150px;
            min-height: 800px; /*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/
            background-color:wheat;
        }
        #middle{
            min-height: 800px; /*只设置了最小高度,宽度自适应*/
            background-color:tan;
        }
        #right {
            width: 150px;
            min-height: 800px;/*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/
            background-color:aquamarine;
        }
        /*方案一:使用绝对定位 让内容部分呈三列布局*/
        #main {
            position: relative; /*绝对定位需要给父级加上一个 相对定位的属性*/
        }
        #left {
            position: absolute;/*绝对定位要加上绝对定位的属性*/
            left: 0;
            top: 0;
        }
        #right {
            position: absolute;
            right: 0;
            top: 0;
        }
        /*利用外边距,让middle部分 在左右之间*/
        #middle{
            margin-left: 160px;
            margin-right: 160px;
        }
    </style>
</head>
<body>
<!--
    1、头部和顶部分别 置顶和置底,内容部分通常分为三列布局。实现了三列,变成两列和一列都会很简单。
    2、
-->
<div id="container">
    <div id="header">头部</div>
    <div id="main"><!--这里不可直接写内容,否则dom结构会渲染出现问题-->
        <div id="left">左侧</div>
        <div id="middle">中间</div>
        <div id="right">右侧</div>
    </div>
    <div id="footer">底部</div>
</div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、利用浮动实现内容区的三列布局

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用浮动实现内容区的三列布局</title>
    <style>
        #container {
            width: 1000px;
            margin: 0 auto;/*让整个页面内容都随浏览器窗口大小而调整*/
        }
        #header, #footer {
            height: 50px;
            background-color:rosybrown;
        }
        #main {
            margin: 5px auto;
            background-color:blanchedalmond;
        }
        #left {
            width: 150px;
            min-height: 800px; /*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/
            background-color:wheat;
        }
        #middle{
            min-height: 800px; /*只设置了最小高度,宽度自适应*/
            background-color:tan;
        }
        #right {
            width: 150px;
            min-height: 800px;/*设置最小高度,可以确保在没有内容的情况下,仍能完整显示*/
            background-color:aquamarine;
        }
        /*方案二:利用浮动实现内容区的三列布局*/
        #left {
            float: left;
        }
        #right {
            float: right;
        }
        #middle{
            float: left;
            width: 680px;
            margin-left: 10px;
        }
        #main {
            overflow: hidden;/*给父级清除浮动*/
        }
    </style>
</head>
<body>
<!--
    1、头部和顶部分别 置顶和置底,内容部分通常分为三列布局。实现了三列,变成两列和一列都会很简单。
    2、
-->
<div id="container">
    <div id="header">头部</div>
    <div id="main"><!--主体-->
        <div id="left">左侧</div>
        <div id="middle">中间</div>
        <div id="right">右侧</div>
    </div>
    <div id="footer">底部</div>
</div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4、双飞翼布局

  • 关键在于dom结构,头部和顶部的内容区需要被包起来,内容区除了整体需要被包起来,内容区的中间部分还要被单独包起来。

  • 利用浮动设置内容区三列的位置时,关键要理解左右的设置方式。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        .header .content {
            width: 1000px;
            height: 50px;
            background-color: rosybrown;
            margin: 0 auto;
        }
        /* 清空导航的默认样式 */
        .header .content .nav {
            margin-top: 0;
            margin-bottom: 0;
            padding-left: 0;
        }
        /*清空列表的样式:清除前面的点*/
        .header .content .nav .item {
            list-style-type: none;
        }
        /*对列表中的a标签进行设置*/
        .header .content .nav .item a {
            float: left;/*为了实现菜单的点击与高亮,一定要将浮动设置到a标签上面*/
            /* 设置最小宽度与最小高宽,以适应导航文本的变化 */
            min-width: 100px;
            min-height: 50px;
            line-height: 50px;/*行高等于header高度,使文本居中*/
            color: black;
            padding: 0 15px;/*是文本不要挨的太紧*/
            text-decoration: none;/*清除a标签的下划线*/
            text-align: center;/*文本居中*/
        }
        .header .content .nav .item a:hover {
            /* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
            background-color: ghostwhite;
            /* 将导航文本设置为系统根字体大小的1.1倍 */
            font-size: 1.1rem;
        }
        /*对内容区设置*/
        .container {
            width: 1000px;
            /*min-height: 800px;*/
            margin: 5px auto;
            background-color: lightgray;
            /*border: 2px solid red;*/
            overflow: hidden; /*子级浮动以后,这样才能保住子级*/
        }
        /*内容区中间部分的样式,要对其容器进行设置*/
        .wrap {
            width: inherit; /* 继承父级区块container宽度 width:1000px; */
            /* 高度也继承主体区块 */
            min-height: 800px;
            background-color:lightgreen;
        }
        /*对内容区左右样式进行设置*/
        .left {
            width: 200px;
            min-height: 800px;
            background-color: lightcoral;
        }
        .right {
            width: 200px;
            min-height: 800px;
            background-color: lightseagreen
        }
        /*将内容区 三部分 清浮动*/
        .wrap, .left, .right {
            float: left;/* 因中间区块宽度100%,所以左右会被挤压到下面 */
        }
        /*将left和right拉回到他们正确的位置上(重点)*/
        .left {
            margin-left: -100%;/*通过设置区块的负外边距的方式,实现向反方向移动区块*/
            /*margin-left: -1000px;*//* -100%等价于-1000px,将左区块拉回到中间的起点处*/
        }
        .right {
            margin-left: -200px;/* -200px就正好将右区块上移到中间区块右侧显示 */
        }
        /*将内容区中间部分显示出来*/
        .main {
            padding-left: 200px;
            padding-right: 200px;
        }
        /*设置底部样式*/
        .footer .content {
            width: 1000px;
            height: 50px;
            background-color: rosybrown;
            margin: 0 auto;
        }
        .footer .content p {
            text-align: center;
            line-height: 50px;
        }
        .footer .content  a {
            text-decoration: none;
            color: black;
        }
        .footer .content  a:hover {
            color: ghostwhite;
        }

    </style>
</head>
<body>
<!--
    1、头部、内容区、底部都需要被包起来。
    2、头部、底部中的内容也需要被包起来。
    3、为了让内容区的中间部分优先被渲染,还要单独再包起来。
 -->
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="">首页</a></li>
            <li class="item"><a href="">公司新闻</a></li>
            <li class="item"><a href="">最新产品</a></li>
            <li class="item"><a href="">关于我们</a></li>
            <li class="item"><a href="">联系我们</a></li>
        </ul>
    </div>
</div>

<div class="container">    <!-- 创建双飞翼使用的DOM结构 -->
    <div class="wrap">
        <div class="main">主体内容区</div><!--内容区中间部分再被一个标签包裹起来-->
    </div>
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

<div class="footer">
    <div class="content">
        <p>
            <a href="">XXX网版权所有</a>
            <a href="">111111111</a>
            <a href="">川RT22222</a>
        </p>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:写得不错, 命名也规范
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post