CSS布局简单整理

编程小白第一篇博客啦，冲冲冲

CSS布局简单整理

一、单列布局

1、一栏布局

简单的单列布局包含 header 和中间主体部分content 以及页脚footer3个部分，通过设置margin：auto 和添加一个最大宽度max-width 使元素居中

<div class = "header "></div>
<div class = "content "></div>
<div class = "footer"></div>

        .header{
            margin: 10px auto;
            max-width: 800px;
            height: 50px;
            border-style: solid;

        }
        .content{
            margin: 10px auto;
            max-width: 800px;
            height: 400px;
            border-style: solid;
        }
        .footer{
            margin: 10px auto;
            max-width: 800px;
            height: 50px;
            border-style: solid;
        }

效果如图：

2、通栏布局

改变header以及footer的width属性为auto,使它们横向填满整个界面

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

       .header{
            margin: 0 auto;
            width: auto;
            height: 50px;
            border-style: solid;
        }
        .content{
            margin:10px auto;
            max-width: 800px;
            height: 400px;
            border-style: solid;
        }
        .footer{
            margin: 0 auto;
            width: auto;
            height: 50px;
            border-style: solid;
        }

效果如图：