Blogger Information
Blog 77
fans 0
comment 0
visits 55166
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS布局原理与实现_0904
Jet的博客
Original
653 people have browsed it

一、实例演示如何消除子元素浮动造成父元素高度折叠的影响

父子级嵌套常见常用,若子元素是浮动元素,水平方向脱离了文档流,父元素无法包含子元素;

可通过几个方法解决:

1 给父级增加height属性

       .box1 {

           height: 300px;

       }*/

但是只要子元素修改height,父级也需要跟着修改,麻烦。

2 给父级元素增加浮动属性

       .box1 {

           float: left;

       } */

如果只有一个父级可以,但是如果上级还有几个父级元素,所有都需要增加,麻烦。

3 可增加清楚浮动

       .clear {

           clear: both;

       } */

可能增加代码累赘

4 给父元素增加overflower属性,专门清楚浮动,推荐此方法。

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 400px;
            border: 5px solid red;
        }
        
        .box2 {
            width: inherit;
            height: 300px;
            background-color: aqua;
            float: left;
        }
        .box1 {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2">
            子块
        </div>
    </div>
</body>

</html>

运行实例 »

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


二、实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)

1 绝对定位实现

相对定位是参照它在文档流中原来的位置

绝对定位,脱离文档流,必须要有参照物,默认body,如果定位父级就参考定位父级

定位属性:position,绝对定位值:absolute

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 1080px;
            margin: 0 auto;
        }
        
        .header,
        .footer {
            height: 60px;
            background-color: burlywood;
        }
        
        .main {
            background-color: lightgreen;
            margin: 5px auto;
        }
        
        .left {
            width: 200px;
            min-height: 800px;
            background-color: lightyellow;
        }
        
        .content {
            min-height: 800px;
            background-color: brown;
        }
        
        .right {
            width: 200px;
            min-height: 800px;
            background-color: lightyellow;
        }
        /*绝对定位*/
        
        .main {
            /*给定位父级设置定位属性,对象不可层叠*/
            position: relative;
        }
        
        .left {
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .content {
            margin-left: 200px;
        }
        
        .right {
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header"></div>
        <div class="main">
            <div class="left">左右左</div>
            <div class="content">我霸屏</div>
            <div class="right">我靠右</div>
        </div>
        <div class="footer"></div>
    </div>
</body>

</html>

运行实例 »

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


2 浮动定位实现

浮动,可用clear:both,清楚浮动;

但是使用overflow:hidden;可以清除浮动、解决外边距塌陷、溢出隐藏等

可以在父级增加此属性 overflow:hidden;

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 1080px;
            margin: 0 auto;
        }
        
        .header,
        .footer {
            height: 60px;
            background-color: burlywood;
        }
        
        .main {
            background-color: lightgreen;
            margin: 5px auto;
            overflow: hidden;
        }
        
        .left {
            width: 200px;
            min-height: 800px;
            background-color: lightyellow;
        }
        
        .content {
            min-height: 800px;
            background-color: brown;
        }
        
        .right {
            width: 200px;
            min-height: 800px;
            background-color: lightyellow;
        }
        /*浮动*/
        
        .left {
            float: left;
        }
        
        .content {
            float: left;
            width: 680px;
        }
        
        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header"></div>
        <div class="main">
            <div class="left">左右左</div>
            <div class="content">我霸屏</div>
            <div class="right">我靠右</div>
        </div>
        <div class="footer"></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