HTML+CSS之基础训练从传统布局到Flex布局

›# 从传统布局到Flex布局

本文将结合一个实例（其实是学校留的作业），来分析传统布局和Flex的异同。

一、任务介绍：

(1)新建一个 html 页面，并完成下图所示的布局页面

(2)尝试用 ul

(3)黄色矩形的圆角效果是使用了 css3 中的 border-radius 这个属性进行美化

二、分析布局

老规矩，首先分析一下图片的布局 ，分析各个色块之间的嵌套关系

如图所示：
container里包括header、main、footer三个大部分；
其中header里面包括logo色块 ；
main里面包括sider和content色块；
其中sider中包括头像色块和表格色块；
content中包括content1和content2色块。

HTML代码实现：

根据以上分析，接下来就可以用代码实现啦，依旧采用的是div标签 。
其中侧边栏sider中的黄色矩形list表单使用的是ul、li元素
代码如下：

<div class=" container ">
        <div class="header ">
            <div class=logo>logo
            div>
        div>
        <div class="main ">
            <div class="sider ">
                <div class="photo">div>
                <ul class="list">
                    <li>li>
                    <li>li>
                    <li class="last">li>
                ul>

            div>
            <div class=" content ">
                <div class="content1">div>
                <div class="content2">div>
            div>
        div>
        <div class="footer ">div>

四、CSS布局美化——传统盒子布局

CSS代码如下：

.container {
    height: 1000px;
    width: 600px;
    margin: auto;
}

.header {
    height: 100px;
    background-color: #a6b1e1;
}

.logo {
    height: 50px;
    width: 80px;
    background-color: #dcd6f7;
    margin: 30px;
    position: absolute;
    text-align: center;
    line-height: 50px;
}

.main {
    height: 330px;
}

.sider {
    width: 150px;
    height: 330px;
    background-color: #dcd6f7;
    position: absolute;
}

.photo {
    height: 60px;
    width: 60px;
    background-color: #a6b1e1;
    margin: 30px 30px 20px 40px;
    border-radius: 20px;
}

.list {
    list-style: none;
    border-radius: 5px;
    border: 6px solid #888ebd;
    /* 边框宽度6px 实线 颜色 */
}

li {
    background-color: #a6b1e1;
    border-bottom: 2px solid #dcd6f7;
    /* 边框宽度6px 实线 颜色 */
    border-radius: 2px;
    width: 140px;
    margin: 0 0 0 -40px;
    height: 30px;
}

.last {
    border-bottom: none;
}

.content {
    float: right;
    width: 450px;
    background-color: #f4eeff;
}

.content1 {
    background-color: #dcd6f7;
    height: 125px;
    margin: 20px;
    border-radius: 5px;
    border: 5px solid #888ebd;
}

.content2 {
    background-color: #888ebd;
    height: 125px;
    margin: 20px;
    border-radius: 5px;
    border: 5px solid #dcd6f7;
}

.footer {
    height: 70px;
    background-color: #424874;
    text-align: center;
    line-height: 100px;
}

其中用传统的布局的方式，会到 float，绝对定位和相对定位等布局方式。

五、CSS布局与美化——Flex布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

大部分和传统布局的CSS代码相同，下面将粘贴有所改变的代码：

.container {
            height: 1000px;
            width: 600px;
            margin: auto;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            height: 100px;
            background-color: #a6b1e1;
            display: flex;
        }
        
        .logo {
            height: 50px;
            width: 80px;
            background-color: #dcd6f7;
            margin: 30px;
            text-align: center;
            line-height: 50px;
        }

.main {
            height: 330px;
            display: flex;
            flex-direction: row;
            width: 600px;
        }

.content {
            width: 450px;
            background-color: #f4eeff;
        }
        

六、此页面用到的Flex布局的属性

（1）任何一个容器都可以指定为 Flex 布局。比如指定类名为container的div容器为flex布局

.container {
	flex-direction: column;
}

（2）当容器Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

（3）当使用Flex布局之后，容器里面的盒子元素按照为从左到右的默认方式进行排列
如要修改排序方式：

flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

七、细节优化

1. 侧边栏sider中的黄色矩形list表单使用的是ul、li元素。如果不做任何美化的话就会在前面出现默认的原点，所以为了更美观就要去掉前面的点。
   
   CSS代码：

.list {
            list-style: none;
            border-radius: 5px;
            border: 6px solid #888ebd;
        }

2. 表单每一项下面都需要有下边框（最后一项没有下边框）
   
   CSS代码：

li {
            background-color: #a6b1e1;
            border-bottom: 2px solid #dcd6f7;
            border-radius: 2px;
            width: 140px;
            margin: 0 0 0 -40px;
            height: 30px;
        }

3. 其中last为li元素的最后一个，使用border-bottom取消下边框

.last {
            border-bottom: none;
        }

八、效果展示