简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > day5:CSS布局原理与实现 20190904
Blogger Information
Blog 30
fans 1
comment 0
visits 24044
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
day5:CSS布局原理与实现 20190904
阿乎乎的学习
Original
577 people have browsed it

day5，简单学习了CSS的布局原理，布局主要是通过浮动和定位来实现的，设置元素浮动后，可以使得元素在水平位置上自由设置，定位包括相对定位relative，绝对定位absolute，和固定定位fixed。

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

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="./css/index2.css">-->
    <style>
        .box2,.box3,.box4,.box5,.box6{
            width: 200px;
            border:dashed mediumvioletred 1px;
        }
        .box1{
            width:inherit;
            height:150px;
            background: #f0c674;
            float:left;
        }

        /*第一种解决方法：直接根据子元素高度修改父元素高度*/
        .box3{height:150px;}
        /*第二种解决方法：让父元素跟随子元素浮动*/
        .box4{float:left;}
        /*第三种解决方法：在子元素后面清除子元素的浮动影响*/
        .clear{clear:both}
        /*第四种解决方法：给父元素设置overflow:hidden属性*/
        .box6{overflow:hidden;}
    </style>
    <title>消除子元素浮动造成父元素高度折叠的影响</title>
</head>
<body>
<!--实例演示如何消除子元素浮动造成父元素高度折叠的影响-->
<div class="box2">
    <div class="box1"></div>
</div>
<hr  class="clear">
<!--第一种解决方法：直接根据子元素高度修改父元素高度，但随着子元素的高度变化而修改父元素高度，在某些不太能实现-->
<div class="box3">
    <div class="box1"></div>
</div>
<hr>
<!--第二种解决方法：让父元素跟随子元素浮动，当元素是多层嵌套的时候，就需要设置所有父元素浮动-->
<div class="box4">
    <div class="box1"></div>
</div>
<hr  class="clear">
<!--第三种解决方法：在子元素后面清除子元素的浮动影响，这种方法会使得文档结构过于复杂-->
<div class="box5">
    <div class="box1"></div>
    <div class="clear"></div>
</div>
<hr>
<!--第四种解决方法：给父元素设置overflow:hidden属性，此方法简单易用，兼容性强-->
<div class="box6">
    <div class="box1"></div>
</div>

</body>
</html>

运行实例 »

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

 

作业二：实例演示三列布局的实现原理

  1. 使用绝对定位来实现三列布局，绝对定位是针对于已经定位



    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index8.css">
    <style>
        .header,.footer{
            width: 1000px;
            height:200px;
            text-align: center;
            line-height: 200px;
            background: #f0c674;
            margin:0 auto;
        }
        .main{
            min-height:500px;
            width: 1000px;
            background-color: #81a2be;
            margin: 10px auto;
            position: relative;
        }
        /*.content{
            position: absolute;
            margin-top: 25px;
        }*/
        /*强行计算三列宽度进行布局*/
        /*.main-left{
            position: absolute;
            width: 200px;
            min-height:500px;
            background-color: #f0c674;
            text-align: center;
            line-height: 500px;
        }
        .main-center{
            position: absolute;
            width: 600px;
            min-height:500px;
            background-color: #008856;
            left: 200px;
            text-align: center;
            line-height: 500px;
        }
        .main-right{
            position: absolute;
            width: 200px;
            min-height:500px;
            background-color: #f0c674;
            left:800px;
            text-align: center;
            line-height: 500px;
        }*/

        /*
        另一种简便方法直接设置左右两侧的样式后，通过margin将中间部分挤压出来*/
        .main-left{
            width: 200px;
            min-height: 500px;
            background-color:rebeccapurple;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            line-height: 500px;
        }
        .main-right{
            width: 200px;
            min-height: 500px;
            background-color:rebeccapurple;
            position: absolute;
            right: 0;
            top: 0;
            text-align: center;
            line-height: 500px;
        }
        .main-center{
            margin:0 200px;
            background-color: #f0c674;
            height: 500px;
            text-align: center;
            line-height: 500px;
        }
    </style>
    <title>绝对定位实现经典三列布局</title>
</head>
<body>
    <header class="header">这里是头部区域</header>
    <main class="main">
        <!--<div class="content">-->
            <div class="main-left">主体部分左侧</div>
            <div class="main-center">主体部分中间</div>
            <div class="main-right">主体部分右侧</div>
        <!--</div>-->
    </main>
    <footer class="footer">这里是底部区域</footer>
</body>
</html>

    运行实例 »

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


   2.浮动定位

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<link rel="stylesheet" href="./css/index9.css">-->
    <style>
        .header,.footer{
            width: 1000px;
            height:200px;
            text-align: center;
            line-height: 200px;
            background: #f0c674;
            margin:0 auto;
        }
        .main{
            min-height:500px;
            width: 1000px;
            background-color: #81a2be;
            margin: 10px auto;
            overflow:hidden;

        }
        .main-left{
            width:200px;
            min-height:500px;
            float:left;
            background-color: mediumslateblue;
        }
        .main-center{
            width: 600px;
            min-height: 500px;
            float: left;
            background-color: fuchsia;
        }
        .main-right{
            width:200px;
            min-height:500px;
            float:left;
            background-color: mediumslateblue;

    </style>
    <title>绝对定位实现经典三列布局</title>
</head>
<body>
<header class="header">这里是头部区域</header>
<main class="main">
    <div class="main-left">主体部分左侧</div>
    <div class="main-center">主体部分中间</div>
    <div class="main-right">主体部分右侧</div>
</main>
<footer class="footer">这里是底部区域</footer>
</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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！