CSS学习笔记 - 布局-CSDN博客

布局

CSS3布局中有几个重要的属性可以设置，分别为：

position：改变元素在容器块中的定位方式
top、bottom、left和right：设置定位元素相对于容器边界的偏移量
z-index：设置定位元素的层叠顺序
弹性布局
表格布局
复制代码

元素定位—— position， top，bottom，left，right

通过定位可以控制元素的布局方式，其中position属性设置了元素的定位方式，其取值可以是 static，relative，absolute和fixed，含义分别为：

static：元素为普通布局，默认情况下都是这种布局方式
relative：元素相对于普通位置（static）定位
absolute：元素相对于position值不为static的第一个祖先元素来定位
fixed：元素相对于浏览器的窗口进行定位
复制代码

设置了元素的position后，可以使用top，bottom，left和right属性设置元素的偏移量，这些偏移量指的是相对于position属性指定的元素的偏移量。通过示例进行分析

<style>
    .div_1{
        background-color: #ff2421;
        width:50px;
        height: 50px;
    }
    .div_2{
        background-color: #abcdef;
        width:50px;
        height: 50px;
    }
</style>
</head>

<body>
    <div class='div_1'>
        
    </div>
    <div class='div_2'>
        
    </div>
</body>
复制代码

默认情况下，div1和div2元素的position值都是static，此时效果如下

设置div2的position值为relative，同时设置其top和left属性如下

<style>
    .div_2{
        background-color: #abcdef;
        width:50px;
        height: 50px;
        position:relative;
        top:5px;
        left:50px;
    }
</style>
复制代码

此时div2的位置如下所示，可见设置position属性为relative后，元素可以通过设置top，bottom，left和right属性来设置元素相对于其static位置的位置。

如果设置position为absolute，此时会得到如下效果。此时元素的位置是相对于body元素的位置向右偏移50px，向下偏移5px。

因为当position属性为absoulte时，其含义时当前元素的位置相对于最近的position不是static的元素的祖先元素的位置来进行定位，当这个元素不存在时，会根据body标签的位置进行定位。如果此时新建一个div2的父元素div3，同时设置div3的position值为relative，则此时得到效果如下。此时div2的top和left属性所设值是相对于div3而言的。

<style>
.div_2 {
        background-color: #abcdef;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 5px;
        left: 50px;
    }

    .div_3 {
        background-color: #ccaadd;
        width: 100px;
        height: 100px;
        position: relative;
    }
</style>
<div class="div_3">
    <div class='div_2'>
    </div>
</div>
复制代码

position为absolute的元素还有一个性质，就是其位置并不是固定在浏览器窗口上的，当我们滚动浏览器页面时对应的元素会跟随其余内容一起移动（也就是它不是固定在浏览器窗口的某一个位置）。如果我们想保持标签一直在窗口上的某个位置显示而不会因为滚动窗口而消失，此时可以将标签的position属性设置为fixed，此时标签的定位时相对于浏览器窗口定位的，而不是相对于某个标签进行定位的。

层叠属性设置——z-index

层叠属性其实就是元素所在的层次（联系PS中图层的概念，该属性仅在两个元素有重叠时有效，注意不是父子关系的标签），z-index的值为数值，数值越小，在层叠顺序中越靠后（也就是越被置于底层）

<style>
.div_2 {
        background-color: #abcdef;
        width: 50px;
        height: 50px;
        position: fixed;
        top: 5px;
        left: 70px;
        z-index:1;
    }
    .div_3 {
        background-color: #ccaadd;
        width: 100px;
        height: 100px;
        position: fixed;
        z-index:2;
    }
</style>
<div class="div_3"></div>
<div class='div_2'></div>
复制代码

因为div3的z-index属性为2比div2的z-index属性值大，因此div3的位置在div2之上

弹性盒布局

如下例所示，我们希望将三行文本都显示在同一个水平行，此时可以用float实现


<style>
    .div_1 {
        background-color: #ff2421;
        float:left;
        width:150px;
    }

    .div_2 {
        background-color: #abcdef;
        float:left;
        width:150px;
    }

    .div_3 {
        background-color: #ccaadd;
        float:left;
        width:150px;
    }
</style>
<div class="div_1">
《三国演义》是中国古典四大名著之一，是中国第一部长篇章回体历史演义小说，全名为《三国志通俗演义》（又称《三国志演义》），作者是元末明初的著名小说家罗贯中。《三国志通俗演义》成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文。
《三国演义》描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。
全书可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分。在广阔的历史舞台上，上演了一幕幕气势磅礴的战争场面。作者罗贯中将兵法三十六计融于字里行间，既有情节，也有兵法韬略。
《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说。 </div>
<div class='div_2'>
《水浒传》，中国四大名著之一，是一部以北宋末年宋江起义为主要故事背景、类型上属于英雄传奇的章回体长篇小说。作者或编者一般被认为是施耐庵，现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有。
全书通过描写梁山好汉反抗欺压、水泊梁山壮大和投降朝廷以及投降朝廷后镇压田虎，王庆，方腊等各路反抗宋朝政府的政治势力，最终走向悲惨失败的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因。
《水浒传》问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</div>
<div class="div_3">
《聊斋志异》（简称《聊斋》，俗名《鬼狐传》）是中国清朝小说家蒲松龄创作的文言短篇小说集。
全书共有短篇小说491篇（张友鹤《聊斋志异会校会注会评本》）（朱其铠《全本新注聊斋志异》为494篇）。
它们或者揭露封建统治的黑暗，或者抨击科举制度的腐朽，或者反抗封建礼教的束缚，具有丰富深刻的思想内容。描写爱情主题的作品，在全书中数量最多，它们表现了强烈的反封建礼教的精神。其中一些作品，通过花妖狐魅和人的恋爱，表现了作者理想的爱情。
</div>

复制代码

此时得到的效果如下图所示，因为我们限定了宽度。加入我们希望留白的区域能够被填满，同时其中某些内容的大小不改变，我们可以通过调整宽度实现（将宽度用百分比表示），当然也可以通过使用弹性布局的方式实现。

当display值为-webkit-box的时候就可以使用弹性布局了(要点：弹性盒容器及其中的元素不能使用float属性)，弹性布局涉及3个属性

-webkit-box-align：指定浏览器处理多余的垂直空间，取值可取 start，end，center，baseline和stretch
-webkit-box-flex：指定元素水平方向的可伸缩性，该属性应用于弹性盒容器中的元素，值为数值
-webkit-box-pack：该值用于设置当可伸缩元素达到最大尺寸时浏览器的处理方式，取值可取 start，end，center，baseline和stretch
复制代码

此时调整上面的代码如下：

<style>
    .container{
        display: -webkit-box;
    }
    .div_1 {
        background-color: #ff2421;
        width: 150px;
    }

    .div_2 {
        background-color: #abcdef;
        -webkit-box-flex: 1;
        width: 150px;
    }

    .div_3 {
        background-color: #ccaadd;
        width: 150px;
    }
</style>

<div class="container">
    <div class="div_1">《三国演义》是中国古典四大名著之一，是中国第一部长篇章回体历史演义小说，全名为《三国志通俗演义》（又称《三国志演义》），作者是元末明初的著名小说家罗贯中。《三国志通俗演义》成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文。
    《三国演义》描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。
    全书可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分。在广阔的历史舞台上，上演了一幕幕气势磅礴的战争场面。作者罗贯中将兵法三十六计融于字里行间，既有情节，也有兵法韬略。
    《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说。 </div>
    <div class='div_2'>《水浒传》，中国四大名著之一，是一部以北宋末年宋江起义为主要故事背景、类型上属于英雄传奇的章回体长篇小说。作者或编者一般被认为是施耐庵，现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有。
    全书通过描写梁山好汉反抗欺压、水泊梁山壮大和投降朝廷以及投降朝廷后镇压田虎，王庆，方腊等各路反抗宋朝政府的政治势力，最终走向悲惨失败的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因。
    《水浒传》问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</div>
    <div class="div_3">
    《聊斋志异》（简称《聊斋》，俗名《鬼狐传》）是中国清朝小说家蒲松龄创作的文言短篇小说集。
    全书共有短篇小说491篇（张友鹤《聊斋志异会校会注会评本》）（朱其铠《全本新注聊斋志异》为494篇）。
    它们或者揭露封建统治的黑暗，或者抨击科举制度的腐朽，或者反抗封建礼教的束缚，具有丰富深刻的思想内容。描写爱情主题的作品，在全书中数量最多，它们表现了强烈的反封建礼教的精神。其中一些作品，通过花妖狐魅和人的恋爱，表现了作者理想的爱情。
    </div>
</div>
复制代码

得到的效果如下图，我们将container设置为弹性盒容器，同时指定了弹性盒容器中的元素div_2为弹性元素，则当弹性盒容器的大小改变时，div_2的尺寸会根据弹性盒的尺寸进行弹性变换。此时设置了-webkit-box-flex属性的div_2填满了container中的空白空间。

当然也可以伸缩多个元素，如下

<style>
    .container{
        display: -webkit-box;
    }
    .div_1 {
        background-color: #ff2421;
        width: 150px;
    }

    .div_2 {
        background-color: #abcdef;
        -webkit-box-flex: 1;
        width: 150px;
    }

    .div_3 {
        background-color: #ccaadd;
        -webkit-box-flex: 3;
        width: 150px;
    }
</style>

<div class="container">
    <div class="div_1">《三国演义》是中国古典四大名著之一，是中国第一部长篇章回体历史演义小说，全名为《三国志通俗演义》（又称《三国志演义》），作者是元末明初的著名小说家罗贯中。《三国志通俗演义》成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文。
    《三国演义》描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。
    全书可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分。在广阔的历史舞台上，上演了一幕幕气势磅礴的战争场面。作者罗贯中将兵法三十六计融于字里行间，既有情节，也有兵法韬略。
    《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说。 </div>
    <div class='div_2'>《水浒传》，中国四大名著之一，是一部以北宋末年宋江起义为主要故事背景、类型上属于英雄传奇的章回体长篇小说。作者或编者一般被认为是施耐庵，现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有。
    全书通过描写梁山好汉反抗欺压、水泊梁山壮大和投降朝廷以及投降朝廷后镇压田虎，王庆，方腊等各路反抗宋朝政府的政治势力，最终走向悲惨失败的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因。
    《水浒传》问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</div>
    <div class="div_3">
    《聊斋志异》（简称《聊斋》，俗名《鬼狐传》）是中国清朝小说家蒲松龄创作的文言短篇小说集。
    全书共有短篇小说491篇（张友鹤《聊斋志异会校会注会评本》）（朱其铠《全本新注聊斋志异》为494篇）。
    它们或者揭露封建统治的黑暗，或者抨击科举制度的腐朽，或者反抗封建礼教的束缚，具有丰富深刻的思想内容。描写爱情主题的作品，在全书中数量最多，它们表现了强烈的反封建礼教的精神。其中一些作品，通过花妖狐魅和人的恋爱，表现了作者理想的爱情。
    </div>
</div>
复制代码

此时div_2和div_3都是弹性元素，而且div_3所占的container的可用空间是div_2的3倍（-webkit-box-flex属性决定）

-webkit-box-align属性指定了弹性盒容器中的元素如何处理多余的垂直空间，当取end值时，表示内容元素会沿着容器的底边放置，start会沿着容器的顶边放置，center时会处于容器的中间，而strech值则时元素会填充整个可用空间。可用试一下将上述.container中添加-webkit-box-align=end，此时可见div_2和div_3都是沿着底边排列的。

-webkit-box-pack是另一个弹性布局可用设置的属性，当我们为所有的弹性元素设置了最大尺寸（max-width，max-height等）的时候，此时当这些元素已经达到了最大尺寸，但是弹性盒容器还是有空余空间的时候，-webkit-box-pack属性就开始起作用，此时该属性会根据取值分配剩余的空余空间。该属性的取值可以是

start：元素从左边界开始放置，任何未分配的空间显示在最后一个元素的右边
end：元素从右边界开始放置，任何未分配的空间显示在第一个元素的左边
center：多余空间平均分配到第一个元素的左边和最后一个元素的右边
justify：多余元素均匀分配到各个元素之间
复制代码

下面来看一下示例：

<style>
    .container{
        display: -webkit-box;
        -webkit-box-align: end;
        -webkit-box-pack: center;
    }
    .div_1 {
        background-color: #ff2421;
        max-width: 150px;
    }

    .div_2 {
        background-color: #abcdef;
        -webkit-box-flex: 1;
        max-width: 150px;
    }

    .div_3 {
        background-color: #ccaadd;
        -webkit-box-flex: 3;
        max-width: 150px;
    }
</style>

<div class="container">
    <div class="div_1">《三国演义》是中国古典四大名著之一，是中国第一部长篇章回体历史演义小说，全名为《三国志通俗演义》（又称《三国志演义》），作者是元末明初的著名小说家罗贯中。《三国志通俗演义》成书后有嘉靖壬午本等多个版本传于世，到了明末清初，毛宗岗对《三国演义》整顿回目、修正文辞、改换诗文。
    《三国演义》描写了从东汉末年到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一群叱咤风云的三国英雄人物。
    全书可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分。在广阔的历史舞台上，上演了一幕幕气势磅礴的战争场面。作者罗贯中将兵法三十六计融于字里行间，既有情节，也有兵法韬略。
    《三国演义》是中国文学史上第一部章回小说，是历史演义小说的开山之作，也是第一部文人长篇小说。 </div>
    <div class='div_2'>《水浒传》，中国四大名著之一，是一部以北宋末年宋江起义为主要故事背景、类型上属于英雄传奇的章回体长篇小说。作者或编者一般被认为是施耐庵，现存刊本署名大多有施耐庵、罗贯中两人中的一人，或两人皆有。
    全书通过描写梁山好汉反抗欺压、水泊梁山壮大和投降朝廷以及投降朝廷后镇压田虎，王庆，方腊等各路反抗宋朝政府的政治势力，最终走向悲惨失败的宏大故事，艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因。
    《水浒传》问世后，在社会上产生了巨大的影响，成了后世中国小说创作的典范。《水浒传》是中国历史上最早用白话文写成的章回小说之一，流传极广，脍炙人口；同时也是汉语文学中具备史诗特征的作品之一，对中国乃至东亚的叙事文学都有极其深远的影响。</div>
    <div class="div_3">
    《聊斋志异》（简称《聊斋》，俗名《鬼狐传》）是中国清朝小说家蒲松龄创作的文言短篇小说集。
    全书共有短篇小说491篇（张友鹤《聊斋志异会校会注会评本》）（朱其铠《全本新注聊斋志异》为494篇）。
    它们或者揭露封建统治的黑暗，或者抨击科举制度的腐朽，或者反抗封建礼教的束缚，具有丰富深刻的思想内容。描写爱情主题的作品，在全书中数量最多，它们表现了强烈的反封建礼教的精神。其中一些作品，通过花妖狐魅和人的恋爱，表现了作者理想的爱情。
    </div>
</div>
复制代码