HTML5+CSS3常见布局方式 - 成就云开发者社区

本文最后更新于 128 天前，其中的信息可能已经有所发展或是发生改变。

1、等高布局

1.1 代码

等高布局是指子元素在父元素中高度相等的布局方式

代码语言：javascript

复制

<div class="father">
    <div class="f1">
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
    </div>
    <div class="f2">
        这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变 这是世界上付首付款不包括不可变
    </div>
</div>
<style>
    .father {
        width: 600px;
        overflow: hidden;
        margin: 20px auto;
    }
.f1 {
    background-color: #888;
}

.f2 {
    background-color: bisque;
}

.f1,
.f2 {
    float: left;
    width: 300px;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

</style>

1.2 等高布局总结：

父元素设置宽度，设置overflow:hidden;
子元素设置左浮动，宽度，padding-bottom:9999px；margin-bottom:-9999px

2、圣杯布局

2.1 代码

圣杯布局是一种三列结构，左右两边定宽，中间自适应，能根据屏幕大小做响应的布局方式。

代码语言：javascript

复制

<div class="father">

<div class="center">center</div>

<div class="left">left</div>

<div class="right">right</div>

</div>

<style>

.father{

padding: 0 300px 0 200px;

min-width: 200px;

height: 300px;

}

.center, .left, .right{

float: left;

position: relative;

height: 100%

}

.left{

width: 200px;

left: -200px;

margin-left: -100%;

background-color: blue;

}

.right{

width: 300px;

margin-right: -300px;

background-color: burlywood;

}

.center{

width: 100%;

background: blanchedalmond;

}

</style>

2.2 圣杯布局总结

父元素设置padding:0 右div宽 0 左div宽；设置min-width:左div宽度；height:200px
设置子div左浮动,相对定位
设置中间div宽度100%
设置左div的left:-左div宽度，margin-left:-100%
设置右div的margin-right:-右div宽度

3、双飞翼布局

3.1 代码

双飞翼布局与圣杯布局大体上一样，但是不需要使用position；relative。

代码语言：javascript

复制

<div class="father">
    <div class="center">
        <div class="con">
            哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星哈时间冻结三星
        </div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<style>
    .father{
        height: 300px;
        min-width: 700px;
    }
    .father div{
        height: 100%;
        float: left;
    }
    .center{
        width: 100%;
        background: #ccc;
    }
    .left{
        width: 200px;
        background: #999;
        margin-left: -100%;
    }
    .right{
        width: 300px;
        background: #666;
        margin-left: -300px;
    }
    .con{
        padding-left: 200px;
        padding-right: 300px;
    }
</style>

3.2 双飞翼布局总结：

先写center盒子
center,left,right盒子浮动,center的盒子width:100%;
给left盒子设置margin-left:-100%;
给right盒子设置margin-left:-自己的宽度
在center的盒子中放一个放内容的盒子，然后设置padding-left:left盒子的宽；padding-right:right盒子的宽
给父元素设置有效宽min-width:left盒子的宽+right盒子的宽+center预留的宽

4、rem布局

rem是一种相对单位，类似em，指的是相对父元素字体大小。

代码语言：javascript

复制

<div class="wrap">
    <div class="box">这是一个盒子</div>
</div>
<style>
   .wrap{
       font-size:20px;
   }
    .box{
        font-size:2rem;
    }
</style>

5、弹性盒布局

5.1 原理

弹性盒是一种新的布局手段,用于代替浮动来布局页面；而弹性盒分为弹性容器和弹性元素。若要使用弹性盒布局，需要先设置div的display:flex;即将div这个对象作为弹性伸缩盒显示(容器)。弹性容器默认在第一行显示，即它的弹性属性是：flex-direction:row。常见的弹性属性如下：

5.2 常见属性

弹性属性	描述	属性值
flex-direction	决定主轴(x抽)的方向	row（默认值）主轴为水平方向，起点在左端；row-reverse：主轴为水平方向，起点在右端；column：主轴为垂直方向，起点在上沿；column-reverse：主轴为垂直方向，起点在下沿
justify-content	定义了项目在主轴上的对齐方式	flex-start（默认值）左对齐；flex-end：右对齐；center：居中；space-between：两端对齐，项目之间的间隔都相等,弹性盒子元素会平均地分布在行里，两端靠边；space-around：每个项目两侧的间隔相等
align-items	定义项目在侧轴(纵轴)方向上的对齐方式	flex-start：侧轴轴的起点对齐；flex-end：侧轴轴的终点对齐； center：侧轴轴的中点对齐；baseline: 项目的第一行文字的基线对齐；stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
flex-wrap	如果一条轴线排不下，如何换行	nowrap（默认）：不换行；wrap：换行，第一行在上方；wrap-reverse：换行，第一行在下方
order	定义项目的排列顺序	默认是0不做排序；值越大越靠后；若排序的值相同，按照你的先后顺序进行排序
flex-grow	定义项目的放大比例	默认是0；若你的子元素的宽度不够，也不做放大比例
flex-shrink	定义项目的缩小比例	默认是0；子元素空间不足，也不会进行缩小比例

6、普通的响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局

6.1 原理

使用媒体查询方式进行不同尺寸下的css更改。

6.2 媒体查询

代码语言：javascript

复制

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}
// 上面这段代码里面有个screen，是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。可以直接省去，如：
@media (max-width: 960px){

body{

background: #000;

}

}

代码语言：javascript

复制

@media screen and (max-device-width:960px){

body{

background:red;

}

}

// 这里表示当窗口尺寸等于960px时，body的背景颜色是red。
@media screen and (min-width:960px){

body{

background:orange;

}

}

// 这里表示当窗口尺寸大于960px时，body的背景颜色是orange。
@media screen and (min-width:960px) and (max-width:1200px){

body{

background:yellow;

}

}

// 这里表示当窗口尺寸大于960px并小于1200px时，body的背景颜色是yellow。

6.3 与自适应布局的区别

自适应是指在不同大小的设备上呈现相同的网页；响应式布局是指同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小。

6.4 实例

代码语言：javascript

复制

<!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>武汉亿房网</title>
    <style>
        * {
            padding: 0;
            list-style: none;
            margin: 0;
        }
    body,
    html {
        width: 100%;
        height: 100%;
        background: #000;
    }

    .wrap {
        width: 984px;
        margin: 0 auto;
    }

    .title {
        color: #ff9900;
        padding-top: 35px;
    }
    .nav {
        width: 100%;
        height: 50px;
    }
    .nav li{
        background: #666633;
        float: left;
        width: 25%;
        line-height: 50px;
        text-align: center;
        font-size: 12px;
        color: #fff;
    }
    .con{
        overflow: hidden;
        margin-top: 12px;
    }
    .left{
        width: 726px;
        float: left;
        background: #fff;
        border-radius: 20px;
        padding: 0 0px 25px;
    }
    .left p{
        padding: 0 32px
    }
    .right{
        width: 240px;
        float: right;
        border-radius: 20px;
    }
    .left h3{
        padding-top: 12px;
        padding-left: 12px;
    }
    .rigth_con1{
        background: #fff;
        border-radius: 20px;
        height: 220px;
        margin-bottom: 10px;
    }
    .rigth_con1 ul{
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
    }
    .rigth_con1 li{
        width: 33.33%;
        margin-bottom: 10px;
    }
    .rigth_con1 li img{
        width: 100%;
    }
    .footer{
        height: 36px;
        background: #666699;
        line-height: 36px;
        text-align: center;
        color: #fff;
    }
    .bb{
        display: none;
    }

    @media screen and (max-width:960px){
        .bb{
            display: block;
        }
        .aa{
            display: none
        }
        .wrap{
            width: 100%;
        }
        .title{
            text-align: center;
        }
        .nav li{
            width: 20%;
            margin-right: 20px;
            border-radius: 10px;
        }
        .left ,.right{
            width: 100%;
        }
        .left{
            margin-bottom: 20px;
        }
        .footer{
            height: auto;
            margin-top: 20px;
        }
        .footer span{
            display: block;
            background: #666699;
        }
    }
&lt;/style&gt;

</head>

<body>

<div class="wrap">

<h1 class="title aa">往事随风</h1>

<h1 class="title bb">往事随风  三</h1>

<ul class="nav">

<li>亿房首页</li>

<li>

亿房信息</li>

<li>
            在线咨询
        &lt;/li&gt;
        &lt;li&gt;
            亿房论坛&lt;/li&gt;
    &lt;/ul&gt;

    &lt;div class=&#34;con&#34;&gt;
            &lt;div class=&#34;left&#34;&gt;
                &lt;h3&gt;武汉亿房网&lt;/h3&gt;
                &lt;p&gt;前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。&lt;/p&gt;
                &lt;p&gt;html指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML&lt;/p&gt;
                &lt;p&gt;css级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力&lt;/p&gt;
                &lt;p&gt;javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class=&#34;right&#34;&gt;
                &lt;div class=&#34;rigth_con1&#34;&gt;&lt;/div&gt;
                &lt;div class=&#34;rigth_con1&#34;&gt;&lt;/div&gt;
                &lt;div class=&#34;rigth_con1&#34;&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;img src=&#34;img/img/1.jpg&#34; alt=&#34;&#34;&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;img src=&#34;img/img/2.jpg&#34; alt=&#34;&#34;&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;img src=&#34;img/img/3.jpg&#34; alt=&#34;&#34;&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;img src=&#34;img/img/1.jpg&#34; alt=&#34;&#34;&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;img src=&#34;img/img/2.jpg&#34; alt=&#34;&#34;&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;img src=&#34;img/img/3.jpg&#34; alt=&#34;&#34;&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
                &lt;div class=&#34;rigth_con1&#34;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class=&#34;footer&#34;&gt;    
                &lt;span&gt;关于站长之家&lt;/span&gt;
                &lt;span&gt;联系我们(电话)&lt;/span&gt;
                &lt;span&gt;广告服务&lt;/span&gt;
                &lt;span&gt;友情链接&lt;/span&gt;
                &lt;span&gt;网站地图&lt;/span&gt;
                &lt;span&gt;版权声明&lt;/span&gt;
                &lt;span&gt;人才招聘&lt;/span&gt;
        &lt;/div&gt;
&lt;/div&gt;

</body>

</html>