CSS布局相关——常见布局

作者: OmewSPG | 来源:发表于2021-04-28 17:14 被阅读0次

流体特性与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

CSS布局相关——常见布局

流体特性与BFC特性

流体特性

BFC特性

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

绝对定位法

margin负值法

自身浮动法

弹性盒子flex

对齐方式

水平居中

垂直居中

水平垂直居中

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术