CSS布局相关——常见布局

流体特性与BFC特性

流体特性

什么是流体特性
块状水平元素（如div），在默认情况下（非浮动、绝对定位等），水平方向会自动填满的外部容器；如果有margin、padding、border等属性，则实际内容区域会响应变窄

以下例子说明了div元素的流动特性：
html：

    <body>
        <div>
            <img src="gana.jpg">
        </div>
    </body>

CSS：

           * {
              box-sizing: border-box;
            }

            html {
              background-color: #fff;
            }

            body {
              margin: 100px auto;
              width: 600px;
              border: #ff0000 solid 2px;
              background-color: #f0f3f9;
            }

            div {
              border: #0047cc solid 2px;
              background-color: #00cf11;
            }

            img {
              width: 100%;
              height: 200px;
              vertical-align: bottom;
            }

图像显示结果如下：

image.png

现在div规则里添加以下内容：

              margin: 0 100px;
              padding: 0 100px;

可以看到随着增加外内边距，图像部分会响应压缩：

image.png

图片宽度一直设置为width：100%，随着margin、padding以及border的出现，其可用宽度变小，形成了自适应效果。就像放在容器中的水流一样，内容区域（content）会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性

现更改代码，div距离容器左侧margin：150px，里面的图片同样以100%的宽度自适应内容区域
html：

        <div class="flow-box">
            <div class="flow-content"><img src="gana.jpg" width="100%" height="200px"></div>
        </div>

CSS:

            body {
              margin: 200px 0 0 200px;
            }

            .flow-box {
              width: 500px;
              overflow: auto;
              resize: horizontal;
              border: #0047cc solid 2px;
              background-color: #00cf11;
            }

            .flow-content {
              margin-left: 150px;
            }

image.png

通过拖动图片右下角的斜杠，实现图片自适应，同时左边保留有150px的固定空间
因此只要利用好左边的留白间距，即可实现两栏自适应效果

为了不影响原来的流体特性，可使用浮动或绝对定位来向左侧空白处添加内容：
调整html：

        <div class="flow-box">
            <img src="gana.jpg" width="128" style="float: left;">
            <div class="flow-content"><img src="gana.jpg" width="100%" height="200px"></div>
        </div>

或

        <div class="flow-box">
            <img src="gana.jpg" width="128" style="position: absolute;">
            <div class="flow-content"><img src="gana.jpg" width="100%" height="200px"></div>
        </div>

image.png

结果都是一样的，通过拖动右下角图标，右侧图像会随着框大小进行自适应拉伸，左侧图像则固定不变

这种自适应布局方式的缺点是：需要提前知晓浮动或者绝对定位内容的尺寸，然后才能通过margin、padding以及border对流体内容进行位置修正。这在建立网站的时候无法整站通用，因为不同自适应场景的留白距离是不一样的

此时需利用块状元素的BFC特地实现更强大更智能的多栏自适应布局

BFC特性

首先明确BFC元素表现特性：
内部子元素无论怎样排列布局都不会影响外部元素

重温一下触发条件：

float的值不为none
overflow的值为auto、scroll或者hidden
display的值为table-cell、table-caption、inline-block中的任何一个
position的值不为relative和static

举例：BFC元素与float元素做相邻兄弟时候的表现
html：

        <div class="flow-content"><img src="gana.jpg" width="150px" height="150px"></div>
        <div class="text">如你所见，这是个文本，因为图片浮动的原因，它被叠在了图片的下面，并且文字对其进行环绕。
                            如你所见，这是个文本，因为图片浮动的原因，它被叠在了图片的下面，并且文字对其进行环绕。
                            如你所见，这是个文本，因为图片浮动的原因，它被叠在了图片的下面，并且文字对其进行环绕。
        </div>

CSS：

            body {
              margin: 200px 0 0 200px;
              width: 400px;
            }

            .flow-content {
              float: left;
            }

            .text {
              background-color: rgb(255, 194, 194);
              letter-spacing: 5px;
            }

image.png

现在我们使文本元素BFC化，在.text规则中添加以下内容：

              overflow: hidden;

image.png

可以看到普通元素变为BFC之后不会与浮动元素产生任何交集，顺着浮动元素边缘形成自己的封闭区间，同时最为重要的流体特性被保留了下来，反映在布局上就是自动填满除去浮动内容以外的剩余空间，即自适应布局。

承接上述例子，现在我们为其添加间距

            .text {
              background-color: rgb(255, 194, 194);
              letter-spacing: 5px;
              overflow: hidden;
              margin-left: 50px;
            }

然而这是无效的，其原因在于，图片处于flow状态已经脱离了普通文本流，无论text元素的左外边距有多大，都会优先去填充图片所占据的宽度。表现出来的效果就是：除非设置更大的值，否则在外边距没有填满图片宽度时，两者之间并不会有肉眼可见的间隔距离出现！

image.png

当margin-left的值超过图片宽度，就可以看到明显的间距了：

              margin-left: 200px;

image.png

然而实际设置间距时，我们并没有必要这样做，因为又回到了流体布局，并且每个布局都要写一个不同的margin值，完全没有重用价值

另一个设置间距的方法：我们可以直接在浮动元素设置margin或padding！

            .flow-content {
              float: left;
              margin-right: 50px;
            }

image.png

这和浮动元素的宽度没有任何关系，而且更加直观

与流体特性相比，采用BFC布局的优势：

自适应内容由于封闭，更健壮，容错性强。比方说，内部clear:both不会与兄弟float产生矛盾。而纯流体布局，clear:both会让后面内容无法和float元素在一个水平上，产生布局问题
自适应内容自动填满浮动以为区域，无需关心浮动元素宽度，可以整站大规模应用。而纯流体布局，需要大小不确定的margin/padding等值撑开合适间距，无法CSS组件化

参考：
https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/?shrink=1

三栏网页宽度自适应布局方法

绝对定位法

左右两栏采用绝对定位，分别位于页面的左右两侧，中间栏的主体用左右margin撑开距离，以此来实现三栏自适应布局：
html:

<body>

    <div class="left">
        <h2>The Left Header</h2>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>

    <div class="right">
        <h2>The Right Header</h2>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>

    <div class="middle">
        <h1>The Main Context</h1>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>

</body>

CSS:

        body{
            position: relative;
        }

        .left{
            position: absolute;
            left: 0;
            width: 200px;
        }

        .right{
            position: absolute;
            right: 0;
            width: 200px;
        }

        .middle{
            height: 700px;
            margin-left: 220px;
            margin-right: 220px;
        }

image.png

这里的左中右三个div的顺序是可以任意调整的，这与剩下的其它方法就不一样了，需要注意一下

margin负值法

俗称“双飞翼”，优先渲染中间栏（也就是主要内容），且中间主体使用双层标签。外层div设置width：100%，并且使其浮动（此例设置为左浮动），内层div为真正的主体内容，包含左右的margin值。
左栏右栏都采用margin负值定位法，且同时向左浮动；
左栏设置margin-left：-100%，正好使得其定位到页面左侧；
右栏设置margin-left也为负值，其大小正好为右栏本身的宽度，使得其出现在页面右侧；
html：

    <body>
      <div id="main">
        <div id="body"></div>
      </div>
      <div id="left"></div>
      <div id="right"></div>
    </body>

CSS：

            html {
              margin: 0;
              height: 100%;
            }

            body {
              margin: 0 auto;
              width: 90%;
              height: 100%;
            }

            #main {
              width: 100%;
              height: 100%;
              float: left;
            }

            #body {
              background-color: darkkhaki;
              margin: 0 220px;
              height: 100%;
            }
            
            #left {
              background-color: cyan;
              width: 200px;
              height: 100%;
              float: left;
              margin-left: -100%
            }

            #right {
              background-color: cadetblue;
              width: 200px;
              height: 100%;
              float: left;
              margin-left: -200px;
            }

image.png

需要注意几个div的顺序，无论是左浮动还是右浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓

自身浮动法

左栏左浮动，右栏右浮动，主体直接放后面自适应：
html：

<div class="left">
        <h2>The Left Header</h2>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>

    <div class="right">
        <h2>The Right Header</h2>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>

    <div class="middle">
        <h1>The Main Context</h1>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>

CSS：

        .left{
            float: left;
            width: 200px;
        }

        .right{
            float: right;
            width: 200px;
        }

        .middle{
            margin-left: 220px;
            margin-right: 220px;
            height: 700px;
        }

image.png

与上个例子类似的，需要注意主体div放到最后面，左右两栏div顺序随意

弹性盒子flex

设置父容器display：flex之后，对左右两栏进行宽度限制
html：

<body>

    <div class="left">
        <h2>The Left Header</h2>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>


    <div class="middle">
        <h1>The Main Context</h1>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>


    <div class="right">
        <h2>The Right Header</h2>
        <p>This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
            This is the paragraph.This is the context.This is the paragraph.This is the context.This is the paragraph.This is the context.
        </p>
    </div>


</body>

CSS：

        body{
            display: flex;
        }

        .left{
            width: 250px;
        }

        .right{
            width: 250px;
        }

        .middle{
            margin: 0 20px;
        }

image.png

对齐方式

水平居中

1.行内元素的水平居中
若被设置元素为文本、图片等行内元素时，可在父元素中设置text-align：center实现行内元素水平居中。通过将子元素的display值设置为inline-block，使得子元素变成行内元素
注意：text-align属性定义行内内容如何与它的块级父元素对齐。text-align并不控制块元素自己的对齐，而作用于其行内元素
实例，html：

    <body>
      <div class="container">
        <div class="text">TEXT</div>
      </div>
    </body>

CSS：

          .container {
            border: red solid 2px;
            background-color: rgb(255, 162, 162);
            text-align: center;
          }

          .text {
            display: inline;
            background-color: rgb(255, 255, 163);
          }

image.png

2.块状元素的水平居中（定宽）
当被设置元素为定宽块级元素时，text-align：center就不起作用了。此时可以通过设置子元素左右margin值为auto来实现水平居中
html：

    <body>
      <div class="container">
        <div class="text">TEXT</div>
      </div>
    </body>

CSS：

          .container {
            border: red solid 2px;
            background-color: rgb(255, 162, 162);
          }

          .text {
            background-color: rgb(255, 255, 163);
            width: 40px;
            margin: 0 auto;
          }

image.png

3.块状元素的水平居中（不定宽）
实际上，我们要为大多数“不定宽度的块级元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性
可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果
当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block
html：

    <body>
      <div class="container">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </body>

CSS：

          .container {
            border: red solid 2px;
            background-color: rgb(255, 162, 162);
            text-align: center;
          }

          ul {
            list-style: none;
            margin: 0;
            padding: 0;
          }

          li{
            margin: 0 4px;
            display: inline-block;
          }

image.png

垂直居中

首先设定两个条件：即父元素是盒子容器且高度以及确定
1.子元素是行内元素，高度是由其内容撑开的
这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中
html：

    <body>
      <div class="container">
        <span class="text">TEXT</span>
      </div>
    </body>

CSS：

          .container {
            width: 100px;
            height: 300px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);
            line-height: 300px;
          }
          

          .text {
            background-color: wheat;
          }

image.png

2.子元素是块级元素但是子元素高度没有设定
在这种情况下实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整，但是还是存在一些解法
通过给父元素设定display：table-cell；vertical-align：middle来解决
html：

    <body>
      <div class="container">
        <div class="text">TEXT</div>
      </div>
    </body>

CSS：

          .container {
            width: 100px;
            height: 300px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);
            display: table-cell;
            vertical-align: middle;
          }
          

          .text {
            background-color: wheat;
          }

image.png

3.子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom，计算方法为(父元素高度 - 子元素高度) / 2
html：

    <body>
      <div class="container">
        <div class="text">TEXT</div>
      </div>
    </body>

CSS：

          .container {
            width: 100px;
            height: 300px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);
          }
          

          .text {
            width: 100%;
            height: 100px;
            margin-top: calc( calc(300px - 100px) / 2 );
            background-color: wheat;
          }

image.png

水平垂直居中

1.水平对齐+行高
text-align + line-height实现单行文本水平垂直居中
html：

    <body>
      <div class="container">TEXT</div>
    </body>

CSS：

          .container {
            width: 500px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);

            text-align: center;
            line-height: 200px;
          }

image.png

2.水平+垂直对齐
text-align + vertical-align　　
在父元素设置[text-align]和[vertical-align]，并将父元素设置为[table-cell]元素，子元素设置为[inline-block]元素
html：

    <body>
      <div class="container">
        <div class="text">TEXT</div>
      </div>
    </body>

CSS：

          .container {
            width: 500px;
            height: 200px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);

            display: table-cell;
            text-align: center;
            vertical-align: middle;
          }
          
          .text {
            display: inline-block;
            background-color: wheat;
          }

image.png

若子元素为图像，可以不使用table-cell，而是其父元素用行高替代高度，且字体大小设置为0。子元素本身设置vertical-align：middle
html：

    <body>
      <div class="container">
        <img class="text" src="gana.jpg" width="200px" height="200px">
      </div>
    </body>

CSS：

          .container {
            width: 500px;
            height: 400px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);

            line-height: 400px;
            text-align: center;
            font-size: 0;
          }
          
          .text {
            vertical-align: middle;
            background-color: wheat;
          }

image.png

3.绝对定位+相对定位
使用absolute，利用绝对定位元素的盒模型特性，在偏离属性为确定值的基础上，设置margin：auto
html：

    <body>
      <div class="container">
        <img class="text" src="gana.jpg" width="200px" height="200px">
      </div>
    </body>

CSS：

          .container {
            width: 500px;
            height: 400px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);

            position: relative;
          }
          
          .text {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto
          }

image.png

4.flex的居中布局
html:

    <body>
      <div class="container">
        <img class="text" src="gana.jpg" width="200px" height="200px">
      </div>
    </body>

CSS：

          .container {
            width: 500px;
            height: 400px;
            border: red solid 2px;
            background-color: rgb(255, 162, 162);

            display: flex;
            align-items: center;
            justify-content: center;
          }

image.png

参考：
https://www.cnblogs.com/chaixiaozhi/p/8490725.html

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 196,099评论 5赞 462
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,473评论 2赞 373
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 143,229评论 0赞 325
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,570评论 1赞 267
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,427评论 5赞 358
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,335评论 1赞 273
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,737评论 3赞 386
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,392评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,693评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,730评论 2赞 312
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,512评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,349评论 3赞 314
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,750评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,017评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,290评论 1赞 251
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,706评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,904评论 2赞 335

CSS布局相关——常见布局

流体特性与BFC特性

流体特性

BFC特性

三栏网页宽度自适应布局方法

绝对定位法

margin负值法

自身浮动法

弹性盒子flex

对齐方式

水平居中

垂直居中

水平垂直居中

推荐阅读更多精彩内容