2.ダブルウイングレイアウト

フロントエンドインタビューまとめ

このnoteは筆者がフロントエンドCSS部分をレビューした際にまとめたものです. 間違いや関連する提案がありましたら, 私に連絡してください.

このメモは、インターネット上の多くの記事を利用しています. 類似点や類似点がある場合は、移動することは間違いありません. あなたがいくつかの記事の著者である場合,

この行動が不適切だと思われる場合は、私に連絡してください。メッセージを受け取った後、できるだけ早く対処します

電子メール: [email protected]

QQ: 1879154660

QQニックネーム：あなただけのカオス復生

視聴者の皆様、ご声援ありがとうございます、面接に直面されている皆様の参考になれば幸いです、

1. z-index の機能と使い方

z-index プロパティは、配置された要素とその子孫またはフレックスアイテムの z オーダーを設定します。要素が重なっている場合、z-index が大きい要素が小さい要素を覆い、一番上に表示されます。

z-index は、auto の前に正の値未満の 0 にすることができます

z-index は auto より下の負の値にすることができます

2. 聖杯レイアウトと双翼レイアウト

聖杯のレイアウトと双翼の翼のレイアウトはどちらも 3 列のレイアウトです。両側の高さは固定され、中央の列は適応的で、中央の列が最初にレンダリングされます。

テール：クリアフロート

コンテナ: bfc

3 列: フロート: 左; 正: 相対; 高さ:500px

左右の列: 幅 + 背景色

左側を前の行の前に移動: margin-left: -100%

右前方に移動: 右: -150px

コンテナの場合: pandding-left: 200px; padding-right: 150px

実装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            min-width: 550px;
            font-weight: bold;
            font-size: 20px;
        }

        .header,.footer{
            background-color: rgba(29,27,27,0.726);;
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

        .footer{
            /*清除浮动*/
            clear: both;
        }

        .middle,.left,.right{
            height: 100px;
        }
        .content{
            padding-left: 200px; /*空出left的位置*/
            padding-right: 150px; /*空出right的位置*/
            overflow: hidden;
        }

        .content div{
            position: relative;
            float: left;
            text-align: center;
            height: 300px;
            line-height: 300px;
        }

        .middle {
            width: 100%;
            background-color: orange;
        }
        .left {
            width: 200px;           /* leftContent width */
            right: 200px;           /* leftContent width */
            margin-left: -100%;
            background-color: green;
        }
        .right {
            width: 150px;           /* rightContent width */
            margin-left: -150px;   /* rightContent width */
            right: -150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="header">header</div>
<div class="content wrapper">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

結果を示す

中段にインナーを入れる

コンテナ: bfc

3 列: float:left; height: 500px

左右の列: 幅 + 背景色

中央の列: 100% + 背景色

左右栏：宽度+背景颜色

左侧挪到上一行前面： margin-left：-100%；

右侧挪到上一行后面： margin-left： -150px；

inner里面margin： 0 200px 0 150px；

具体实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        body {
            min-width: 550px;
            font-weight: bold;
            font-size: 20px;
        }
        #header, #footer {
            background: darkgoldenrod;
            text-align: center;
            height: 60px;
            line-height: 60px;
        }
        #container {
            /*这里预留位置用再预留*/
            /*该元素大小有center撑开*/
            overflow: hidden;
        }
        .column {
            text-align: center;
            height: 300px;
            line-height: 300px;
        }
        #left, #right, #center {
            float: left;
        }
        #center {
            width: 100%;
            background: gray;
        }
        #left {
            width: 200px;
            /*移动到上一行首首*/
            margin-left: -100%;
            background: skyblue;
        }
        #right {
            width: 150px;
            /*移动到上一行行尾*/
            margin-left: -150px;
            background: orange;
        }
        .content {
            /*内容区显示的位置*/
            margin: 0 150px 0 200px;
        }
    </style>

</head>
<body>
    <div id="header"># header</div>

    <div id="container">
        <div id="center" class="column">
            <div class="content"># center</div>
        </div>

        <div id="left" class="column">#left</div>
        <div id="right" class="column">#right</div>
    </div>

    <div id="footer">#footer</div>
</body>
</html>

效果展示

3.什么是BFC,IFC

块级格式化上下文使页面上的一块渲染区域, 这块区域由符合条件的容器产生.

容器内的子元素会由块盒子和浮动元素按如下规则排列:

纵向一个挨着一个排列

两个贺子的纵向间距由margin属性决定, 两个相邻的盒子在垂直方向上的margin

会有种"重叠合并"的效果,此时纵向间距距离取较大的那个margin值

这个容器可以看作一个独立的布局环境,容器外的元素与容器内的元素(包括浮动元素)

再布局上不会影响到对方

BFC容器的高度将浮动圆度的高度计算进去

浮动清除效果. BFC会排斥外部浮动元素,让浮动元素和块元素在视觉上不会由重叠的效果:

产生块格式上下文的方式有:

1. 根元素 - <html>

2. 浮动元素 - 非float: none的元素

3. 绝对定位元素 - position为absolute或fixed的元素（和产生粘滞效果sticky的元素？）

4. 行内块元素 - display为inline-block的元素

5. 表格元素

    display: table-cell的元素，如<td>
    display: table-caption的元素，如<th>
    display: table的元素，如<table>
    display: table-row的元素，如<tr>
    display: table-row-group的元素，如<tbody>
    display: table-header-group的元素，如<thead>
    display: table-footer-group的元素，如<tfoot>
    display: inline-table的元素
    
6. overflow不为visible的块元素

7. display: flow-root的元素

8. contain: layout | content | paint的元素

9. 弹性元素 - display: flex | inline-flex的直接子元素

10. 网格元素 - display: grid | inline-grid的直接子元素

11 .多列容器 - column-count或column-width不为auto

12. column-span: all的元素

行内格式化上下文的布局首先要根据水平, 垂直和左右书写模式来说明:

在水平书写模式 writing-mode: hortizontal-td下,盒子会在时评方向上从左到右排列,空间不够时换到下一行继续

在垂直书写模式下 writing-mode: vertical-rl | vertical-lr, 盒子会在垂直方向上从上到下排列, 空间不够时换到下一行继续, 只是这里的下一行有左右之分

writing-mode: vetical-rl时就像古人书写以及日本台湾书籍的格式一样,从右到左排列; writing-mode: vertival-lr则时从左到右排列

每"行"在浏览器中会被作为一个盒子处理, 这个盒子叫行框(line box),他的高度由其包含行内元素的最低位置到最高位置(不包含margin)计算而来; 因为考虑盒子件对齐处理的关系,

这个值可能会被行内最高的元素要搞

当由浮动元素在行内式化上下文时, 在浮动元素的行框可能会因为它而缩短宽度,产生"文字环绕"效果

当行框内的行内元素没有占满整行的空间时, 他们在水平方向的位置会受到text-align属性的影响

而当行内元素太长时, 会被分割为多行, 也就是说这个元素内产生了多个行框排列在一起,此时margin.

border, padding都不会在断裂处生效

满足以下条件时,行框会被当做高度为0的盒子处理:

不包含文字

非white-space: pre | pre-wrap | pre-line

不含margin、padding、border值不为零的元素

不含在常规流中的元素，如图片、表格之类

4.清除浮动方式

清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题

额外标签法(在最后一个浮动标签后,新新加一个标签, 给其设置clear: both;)(不推荐)

我们清除了浮动,父元素自动检测盒子的高度,然后与其同高

优点: 通俗易懂, 方便

缺点: 添加无意义标签, 语义化差

父级添加overflow属性, 变成BFC(块级格式化上下文),就可以解决浮动带来的影响(不推荐)

通过除法BFC方式,实现清除浮动

优点:代码简洁

缺点: 内容增多的时候容易造成不会自动换行,导致内容被隐蔽掉,无法显示要溢出的元素

    .fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

使用before和after伪元素清除浮动(推荐使用):

这种方式也是使用额外标签方式达到效果，只是变相的使用了伪元素after/before，使得页面结构更简介，也是常用的清除浮动的方式

优点: 符合闭合浮动思想,结构语义化正确

缺点: ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: ""; /*元素设置为空*/
    display: block; /*转换为块级元素*/
    height: 0; /*高度为0*/
    clear:both;/*清除浮动*/
    visibility: hidden;/*将元素隐藏*/
}
/*下面为了兼容IE*/
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

具体使用


<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

使用before和after双伪元素清除浮动

优点: 代码更简洁

缺点: 用zoom:1除法hasLayout


.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

具体使用


 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
 </div>
 <div class="footer"></div>

使用 display: flow-root(推荐):

一个新的 display 属性的值，它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。

给 <div> 元素设置 display: flow-root 属性后，<div> 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。

你可以从 flow-root 这个值的名字上看出来，它创建一个新的用于流式布局的上下文，类似于浏览器的根（html）元素。

具体使用

.box[style] {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, .5);
  border:1px solid black;
  padding: 10px;
}

  <div class="box" style="display:flow-root">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>display:flow-root</code> container.</p>
  </div>

实现效果: