博学谷 > 资讯 > 前端 > CSS流式布局 知识讲解

原创 CSS流式布局 知识讲解

发布时间：2019-08-02 14:12:38 浏览 302 来源：博学谷资讯 作者：照照

    CSS的工作方式是浏览器逐行下载样式表，应用其可识别的属性，忽略其不支持的属性。本文将讲解CSS流式布局，分别从html结构、固定布局样式、将固定布局改为流式布局三个方面来阐述，感兴趣的小伙伴可以继续看下去。

     

    CSS流式布局

     

    1、html结构

     

    <!doctype html>

     

    <html lang="en">

     

    <head>

     

    <meta charset="UTF-8">

     

    <meta name="Generator" content="EditPlus?">

     

    <meta name="Author" content="">

     

    <meta name="Keywords" content="">

     

    <meta name="Description" content="">

     

    <link rel="stylesheet" href="fluied.css">

     

    <title>流式布局</title>

     

    </head>

     

    <body>

     

    <div id="wrapper" class="clearfix">

     

    <!-- 头部和导航 -->

     

    <div id="header">

     

    <div id="navigation">

     

    <ul>

     

    <li>

     

    <a href="#">

     

    首页

     

    </a>

     

    </li>

     

    <li>

     

    <a href="#">

     

    导航一

     

    </a>

     

    </li>

     

    </ul>

     

    </div>

     

    </div>

     

    <!-- 侧边栏 -->

     

    <div id="sidebar">

     

    <p>这里是侧边栏</p>

     

    </div>

     

    <!-- 内容部分 -->

     

    <div id="content">

     

    <p>这里是内容</p>

     

    </div>

     

    <!-- 页脚部分 -->

     

    <div id="footer">

     

    <p>这里是页脚</p>

     

    </div>

     

    </div>

     

    </body>

     

    </html>

     

    2、固定布局样式

     

    @charset "utf-8";

     

    * {

     

    margin: 0;

     

    padding: 0;

     

    }

     

    #wrapper {

     

    margin-right: auto;

     

    margin-left: auto;

     

    width: 960px;

     

    border: 1px solid red;

     

    }

     

    #header {

     

    margin-right: 10px;

     

    margin-left: 10px;

     

    width: 940px;

     

    }

     

    #navgation {

     

    padding-bottom: 25px;

     

    margin-top: 26px;

     

    margin-left: -10px;

     

    padding-right: 10px;

     

    padding-left: 10px;

     

    width: 940px;

     

    }

     

    #navigation ul li {

     

    display: inline-block;

     

    }

     

    #navigation ul li a {

     

    text-decoration: none;

     

    color: black;

     

    }

     

    #content {

     

    margin-top: 58px;

     

    margin-right: 10px;

     

    float: right;

     

    width: 698px;

     

    border-bottom: 1px solid red;

     

    height: 100px;

     

    }

     

    #sidebar {

     

    border-right-color: #e8e8e8;

     

    border-right-style: solid;

     

    border-right-width: 2px;

     

    margin-top: 58px;

     

    padding-right: 10px;

     

    margin-right: 10px;

     

    margin-left: 10px;

     

    float: left;

     

    width: 220px;

     

    border-bottom: 1px solid red;

     

    height: 100px;

     

    }

     

    #footer {

     

    float: left;

     

    margin-top: 20px;

     

    margin-right: 10px;

     

    margin-left: 10px;

     

    clear: both;

     

    width: 940px;

     

    }

     

    .clearfix:before,

     

    .clearfix:after {

     

    content: "";

     

    display: block;

     

    clear: both;

     

    width: 0;

     

    height: 0;

     

    visibility: hidden;

     

    font-size: 0;

     

    }

     

    3、将固定布局改为流式布局

     

    将固定像素宽度转换为对应的百分比宽度公式：

     

    目标元素宽度 ÷ 上下文元素 = 百分比宽度

     

    @charset "utf-8";

     

    * {

     

    margin: 0;

     

    padding: 0;

     

    box-sizing: border-box;

     

    }

     

    :root {

     

    /*

     

    * 初始状态下、1em = 16px;

     

    * 设置了根元素的字体大小为62.5%，

     

    *这时，1em = 10px

     

    */

     

    font-size: 62.5%;

     

    }

     

    #wrapper {

     

    margin-right: auto;

     

    margin-left: auto;

     

    width: 96%;

     

    border: 1px solid red;

     

    }

     

    #header {

     

    margin-right: 1.04166667%;

     

    margin-left: 1.04166667%;

     

    width: 97.9166667%;

     

    border-bottom: 1px solid red;

     

    font-size: 4.8em;

     

    }

     

    #navgation {

     

    padding-bottom: 25px;

     

    margin-top: 26px;

     

    margin-left: -1.04166667%;

     

    padding-right: 1.04166667%;

     

    padding-left: 1.04166667%;

     

    width: 100%;

     

    }

     

    #navigation ul li {

     

    display: inline-block;

     

    }

     

    #navigation ul li a {

     

    text-decoration: none;

     

    color: black;

     

    }

     

    #content {

     

    margin-top: 58px;

     

    margin-right: 1.04166667%;

     

    float: right;

     

    width: 72.7083333%;

     

    border-bottom: 1px solid red;

     

    height: 100px;

     

    font-size: 2em;

     

    }

     

    #sidebar {

     

    border-right-color: #e8e8e8;

     

    border-right-style: solid;

     

    border-right-width: 2px;

     

    margin-top: 58px;

     

    padding-right: 1.04166667%;

     

    margin-right: 1.04166667%;

     

    margin-left: 1.04166667%;

     

    float: left;

     

    width: 22.7083333%;

     

    border-bottom: 1px solid red;

     

    height: 100px;

     

    font-size: 2em;

     

    }

     

    #footer {

     

    float: left;

     

    margin-top: 20px;

     

    margin-right: 1.04166667%;

     

    margin-left: 1.04166667%;

     

    clear: both;

     

    width: 97.9166667%;

     

    height: 100px;

     

    font-size: 1.2em;

     

    }

     

    .clearfix:before,

     

    .clearfix:after {

     

    content: "";

     

    display: block;

     

    clear: both;

     

    width: 0;

     

    height: 0;

     

    visibility: hidden;

     

    font-size: 0;

     

    }

    以上就是CSS流式布局的讲解，大家都弄清楚了吗？

Web前端 常见问题
上一篇：移动web基础知识介绍 学习干货 下一篇：手机HMTL5开发框架推荐

相关推荐 更多

最新文章

扫描二维码，回复"前端"获取90G资料包