2. Double wing layout

Enterprise 2023-04-09 19:23:37 views: null

Front-end interview summary

This note is summarized by the author in reviewing the front-end CSS part. If there is any mistake or any related suggestion, please contact me.

This note draws on many articles on the Internet. If there are similarities or similarities, there is no doubt that it is moved. If you are the author of some of the articles,

If you think this behavior is inappropriate, please contact me, I will deal with it as soon as possible after receiving the message

Email: [email protected]

QQ: 1879154660

QQ Nickname: Chaos Fusheng just for you

Thank you viewers for your support, I hope it can be helpful to you who are facing interviews,

Table of contents

1. The function and usage of z-index

The z-index property sets the z-order of a positioned element and its descendants or flex items. When elements overlap, elements with a larger z-index will cover smaller elements and display on top.

z-index can be 0, below a positive value, before auto

z-index can be negative, below auto

2. Holy grail layout and double flying wing layout

The holy grail layout and the double-flying wing layout are both three-column layouts: the height of both sides is fixed, the middle column is adaptive, and the middle column is rendered first

tail: clear float

Container: bfc

Three columns: float:left; positive:relative;height:500px

Left and right columns: width + background color

Move the left side to the front of the previous line: margin-left: -100%

Move right forward: right: -150px

For the container: pandding-left: 200px; padding-right: 150px

  • Implementation

<!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>

  • Show results

Put inner in the middle column

Container: bfc

Three columns: float:left; height: 500px

Left and right columns: width + background color

Middle column: 100% + background color

左右栏： 宽度+背景颜色

左侧挪到上一行前面： 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值

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

再布局上不会影响到对方

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

  1. 浮动清除效果. 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的问题

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

<div style="clear:both"></div>

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

  • 优点: 通俗易懂, 方便

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

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

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

  • 优点:代码简洁

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

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

  1. 使用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>

  1. 使用 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>

  • 实现效果:

Guess you like

Origin blog.csdn.net/Angel_Tears_/article/details/129333377
Recommended
TIOBE May list: Fortran “resurrected” into Top 10
GCC 14.1 released
Ranking
B. Little Girl and Game【1300 / 回文字符串 博弈论】
CIKERS Shane 20190613
"Javascript advanced programming" study notes - the constructor and prototype
beeline hiveserver2 start
springboot - Automatically backup mysql data every day
Data Storage Full Solution--Detailed Persistence Technology
Detailed Explanation of Spring Web MVC DispatcherServlet—Official Original
TCP / IP protocol layers structure and function
Command type literal pos: unknown； Fallback type literal pos: unknown] with root cause
Design of multifunctional curtain controller with indoor anti-theft alarm
Daily
More
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)

Code World

© 2018 codetd.com