zoukankan      html  css  js  c++  java
  • 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    一、文档流

    1、什么是文档流

    将窗体自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素

    2、本质

    文档流本质是 nomal flow (普通流、常规流)

    3、BFC(Block Formatting Contxt)

    块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干

    4、BFC的规则

    •  内部的Box会在垂直方向,一个接一个地放置;
    •  Box自身垂直方向的位置由margin-top决定,属于同一个BFC的两个相邻Box的margin会发生重叠(取最大值);
    •  Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位),属于同一个BFC的两个相邻Box的margin会发生叠加。

    二、浮动布局

    float: left | right

    1、目的

    float的目的是让block同行显示(在父级规定的宽度内、不完全脱离文档流)

    2、文档流、完全脱离文档流、不完全脱离文档流

    1、文档流:子标签在父级标签没有设置高度时,会自动撑开父级
    
    2、完全脱离文档流:子标签不再为父级撑开高度,子标签高于文档流,不占用盒子模型的空间,有一个z-index
    
    3、不完全脱离文档流:这是浮动后的结果,不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度

    3、清浮动

    (1)原因

    在子级中使用浮动布局,若是父级有兄弟标签,会出现布局问题

    (2)解决方法

    原理:在浮动布局情况下,让父级获得合适的高度

    /*方法1. 浮动的父级设置高度*/
    super {
        height: npx;
    }
    
    /*方法2. 浮动的父级设置overflow*/
    super {
        overflow: hidden;
    }
    
    /*方法3. 浮动的父级兄弟设置clear,一般利用both同时清左右两边的浮动*/
    brother {
        clear: left | right | both;
    }
    
    /*方法4. 浮动的父级伪类清浮动,一般利用both同时清左右两边的浮动*/
    super:after {
        content: "";
        display: block;
        clear: left | right | both;
    }

    三、流式布局

    1、目的

    让布局脱离固定值限制,可以根据页面情况改变相应发生改变

    <style type="text/css">
        .wrap {
            max-width: 1200px;
            min-width: 800px;
            width: 90%;
            height: 600px;
            margin: 0 auto;
            background-color: orange;
        }
    </style>
    <div class="wrap"></div>

    2、常用操作

    •  百分比设置 %    参考最近父级
    •  窗口比设置 vw | vh
    •  字体控制 em | rem  ,em最近设置字体大小的父级规定的字体大小,rem为html字体大小
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>流式布局</title>
        <style type="text/css">
            html, body {
                width: 100%;
                margin: 0;
            }
            .box {
                /*百分比流式*/
                /*参考最近父级*/
                width: 90%;
                /*max- 1000px;*/
                /*min- 600px;*/
    
                /*窗口比*/
                /* 90vw;*/
                /*max- 1000px;*/
                /*min- 600px;*/
    
                height: 300px;
                background-color: orange;
                margin: 0 auto;
            }
            .b {
                width: 100px;
                height: 100px;
                background-color: red;
                border-radius: 50%;
                float: left;
            }
            
            
            body {
                font-size: 30px;
            }
            /*.sup {
                font-size: 20px;
            }*/
            .txt {
                /*1em = 16px*/
                /*font-size: 16px;*/
                /*font-size: 0.4em;*/
                /*总结:em为最近设置字体大小的父级规定的字体大小*/
                font-size: 1rem;
                /*总结:rem为html字体大小*/
            }
            html {
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <!-- 流式布局: -->
        <!-- 目的:让布局脱离固定值限制,可以根据页面情况改变相应发生改变 -->
        <div class="box">
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
             <div class="b"></div>
         </div> 
    
         <div class="sup">
             <div class="txt">文本</div>
         </div>
    </body>
    </html>
    流式布局案例

    四、定位布局

    1、目的

    让目标(要被布局的)标签在指定参考系下任意布局

    2、语法

    <!-- 基本语法: -->
    <!-- 1.通过position设置定位是否开启 -->
    <!-- static:静态,未定位(默认值) -->
    <!-- relative: 相对定位, 未脱离文档流 -->
    <!-- absolute: 绝对定位, 完全脱离文档流 -->
    <!-- fixed: 固定定位, 完全脱离文档流 -->
    <!-- 2.定位开启后,四个定位方位便会开启,且四个方位均参与布局 -->
    <!-- 如果发生冲突,左右取左,上下取上 -->
    
    position: static | relative | absolute | fixed
    布局方位:left | right | top | bottom

    3、相对定位(relative)

    未脱离文档流,相对布局方位只改变盒子显示区域,不改变盒子原有位置,

    简单的说相当于灵魂出窍,在原有位置仍然占一块区域,margin-top改变会影响兄弟盒子

    相对定位主要用于给父级定位,从而辅助子级的绝对定位

    (1)开启定位

    position relative;

    (2)方位布局,方位改变上盒子不会影响下盒子(灵魂出窍),四个方位如果发生冲突,左右取左,上下取上

    left:30px;
    top:30px;

    (3)参考系

    相对定位参考系为自身原有位置

    (4)案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .b2 {
                background-color: orange;
            }
    
            /*不做定位操作*/
            /*b1,b2均在文档流中,b1的布局会影响到b2*/
            /*.b1 {
                margin-top: 30px;
                margin-bottom: 30px;
            }*/
    
            /*固定定位后*/
            .b1 {
                /*1.未脱离文档流*/
                /*BFC规则下margin布局,上盒子依旧会影响下盒子*/
                /*margin-top: 30px;
                margin-bottom: 30px;*/
    
                /*开启定位*/
                position: relative;
                /*具有定位方位*/
                /*2.方位布局下,上盒子不会影响下盒子*/
                left: 30px;
                top: 30px;
                /*总结:方位布局只改变盒子显示区域,不改变盒子原有位置*/
    
                /*margin-top: 30px;*/
                /*3.参考系:相对定位参考系为自身原有位置*/
                /*right: 30px;*/
    
                /*总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔*/
    
                /*4.left=-right top=-bottom,同时存在,左右取左,上下取上*/
                /*left: -30px;
                right: -100px;*/
            }
        </style>
    </head>
    <body>
        <div class="b1"></div>
        <div class="b2"></div>
    </body>
    </html>
    相对布局案例

    4、绝对定位(absolute)

    完全脱离文档流,有一个z-index可以控制两个绝对定位的优先级,不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层

    margin依旧可以影响自身布局,但不会影响兄弟布局,margin改变兄弟标签布局不会改变

    (1)开启定位

    position:absolute;

    (2)定位布局

    left:30px;
    top:30px;

    (3)参考系

    最近的已定位的父级,sup(未定位) -> body(未定位) -> html(文档窗口)

    (4)案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .b2 {
                background-color: orange;
            }
            .b1 {
                /*1.完全脱离文档流*/
                position: absolute;
                /*总结:不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层*/
                /*打开定位方位*/
                /*margin-left: 100px;
                margin-top: 100px;*/
                /*总结:margin依旧可以影响自身布局,但不会影响父级即兄弟布局*/
    
                /*2.参考系:?*/
                left: 100px;
                right: -100px;
    
                /*3.同时存在,左右取左,上下取上*/
            }
    
    
        </style>
        <style type="text/css">
            .sup {
                width: 500px;
                height: 500px;
                background-color: orange;
            }
            .sub {
                width: 200px;
                height: 200px;
                background-color: red;
            }
    
            .sup {
                /*采用了盒模型布局*/
                margin: 0 auto;
                /*需求:sub应该参考sup,sup需要定位:相对|绝对|固定*/
                /*相对定位好处:父级不会脱离文档流,满足所有的盒模型布局*/
                /*position: relative;*/
                /*绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位*/
                position: absolute;
                margin: 100px 100px;
                /*注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/
                /*注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值*/
            }
            .sub {
                /*2.参考坐标系为最近的定位父级*/
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                /*父级: sup(未定位) -> body(未定位) -> html(文档窗口)*/
    
                /*3.同时存在,左右取左,上下取上*/
            }
        </style>
    </head>
    <body>
        <!-- <div class="b1"></div>
        <div class="b2"></div> -->
        <div class="sup">
            <div class="sub"></div>
        </div>
    </body>
    </html>
    绝对定位案例

    5、固定定位(fixed)

    完全脱离文档流,有一个z-index可以控制两个绝对定位的优先级不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层

    margin依旧可以影响自身布局,但不会影响兄弟布局,margin改变兄弟标签布局不会改变

    (1)开启定位

    position:fixed;

    (2)定位布局

    left:30px;
    top:30px;

    (3)参考系

    页面窗口

    (4)案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style type="text/css">
            .sup {
                width: 500px;
                height: 500px;
                background-color: orange;
                margin: 0 auto;
            }
            .sub {
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .sup {
                position: relative;
                position: absolute;
            }
            .sub {
                position: fixed;
                left: 0;
                /*top: 0;*/
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <!-- 固定定位 -->
        <!-- 1.完全脱离文档流 -->
        <!-- 2.参考系为文档窗口 -->
        <!-- 3.左右取左,上下取上 -->
        <div class="sup">
            <div class="sub"></div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    
    </body>
    </html>
    固定定位案例

    五、flex布局

    1、目的

    Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

    flex可以很好的解决垂直居中问题

    2、名词概念

    • 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

    • 水平为轴(main axis),主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end。

    • 垂直为交叉轴(cross axis),交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    3、容器属性

    1. flex-direction 属性 决定主轴的方向(即项目的排列方向)
    flex-direction: row | row-reverse | column | column-reverse;
         row(默认值):主轴为水平方向,起点在左端。
         row-reverse:主轴为水平方向,起点在右端。
         column:主轴为垂直方向,起点在上沿。
         column-reverse:主轴为垂直方向,起点在下沿。
    
    2. flex-wrap 属性 定义,如果一条轴线排不下,如何换行。
    flex-wrap: nowrap | wrap | wrap-reverse;
         nowrap(默认):不换行。
         wrap:换行,第一行在上方。
         wrap-reverse:换行,第一行在下方。
    
    3. flex-flow 属性 是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
    flex-flow: <flex-direction> <flex-wrap>;
    
    4. justify-content 属性 定义了项目在主轴上的对齐方式。
    justify-content: flex-start | flex-end | center | space-between | space-around;
    
    5. align-items 属性 定义项目在交叉轴上如何对齐。
    align-items: flex-start | flex-end | center | baseline | stretch;
    
    6. align-content 属性 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    4、项目属性

    1. order 属性 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
    order: <integer>;
    
    2. flex-grow 属性 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    flex-grow: <number>; /* default 0 */
    
    3. flex-shrink 属性 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    flex-shrink: <number>; /* default 1 */
    
    4. flex-basis 属性 定义了在分配多余空间之前,项目占据的主轴空间(main size)。
    flex-basis: <length> | auto; /* default auto */
    
    5. flex 属性 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
    flex: <flex-grow> <flex-shrink> <flex-basis>
    
    6. align-self 属性 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
    align-self: auto | flex-start | flex-end | center | baseline | stretch;

    5、主要了解

    1.将父级display属性设置为flex,则父级成为container,子级成为item
    2.container设置item的排列方向flex-direction
    3.item对于container的空间占比flex-grow

    6、案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>flex布局</title>
        <style type="text/css">
            .container {
                width: 600px;
                height: 600px;
                border: 1px solid black;
                margin: 0 auto;
            }
            .item {
                /* 200px;*/
                /*height: 200px;*/
                /*border-radius: 50%;*/
                background-color: orange;
                font-size: 80px;
            }
            /*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/
            .container {
                display: flex;
            }
            .item {
                /*默认只能一行排列,所有item总宽不允许超出container宽度*/
                /* 300px;*/
                /*默认情况下item可以不规定高度,高度会自适应父级*/
                /*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/
            }
            /*.it1, .it3 {
                flex-grow: 1;
            }
            .it2 {
                flex-grow: 3;
                background-color: pink
            }*/
            /*container属性*/
            .container {
                /*flex-direction: row | row-reverse | column | column-reverse; 方向*/
                /*flex-direction: column-reverse;*/
    
                /*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/
                /*flex-wrap: wrap;*/
    
                /*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/
                /*item为沾满父级区域*/
                justify-content: space-around;
            }
            /*item属性*/
            .item {
                /* 300px;
                height: 200px;*/
            }
    
            .item {
                width: 100px;
            }
        </style>
        <!-- 总结 -->
        <!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->
        <!-- 2.container设置item的排列方向flex-direction -->
        <!-- 3.item对于container的空间占比flex-grow -->
    </head>
    <body>
        <div class="container">
            <div class="item it1">1</div>
            <div class="item it2">2</div>
            <div class="item it3">3</div>
        </div>
    </body>
    </html>
    flex布局案例

    六、响应式布局

    当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则

    1、目的

    设置在不同页面宽度下的布局,满足当前屏幕尺寸时,该样式块起作用,不满足时,则样式块失效

    2、语法

    /*当页面尺寸小于<integer>宽度时的样式*/
    @media only screen and (max- <integer>) {
        selector {
            
        }
    }
    
    
    /*当页面尺寸大于<integer1>宽度,小于<integer2>宽度时的样式*/
    @media only screen and (min- <integer1>) and (max- <integer2>) {
        selector {
            
        }
    }
    
    
    /*当页面尺寸大于于<integer3>宽度时的样式*/
    @media only screen and (min- <integer>) {
        selector {
            
        }
    }

    3、原则

    (1)采用响应式布局的页面,基本样式块只做共性样式设置,需要根据页面尺寸进行适应变化的样式均有响应式布局处理
    (2)要进行响应式布局的页面要处理所有屏幕尺寸下的样式块

    4、案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>响应式布局</title>
        <style type="text/css">
            /*基本样式块*/
            /*.box {
                max- 1200px;
                 95%;
                margin: 0 auto;
                background-color: red!important;
            }
            .it {
                 300px;
                height: 300px;
                font: 900 50px/300px 'STSong';
                text-align: center;
                float: left;
                border-radius: 50%;
                background-color: orange;
            }
            .box:after {
                content: "";
                display: block;
                clear: both;
            }*/
            
            html, body {
                margin: 0;
            }
            .it {
                height: 300px;
                background-color: orange;
                font: 900 50px/300px 'STSong';
                text-align: center;
                border-radius: 50%;
                float: left;
            }
            .box:after {
                content: "";
                display: block;
                clear: both;
            }
            /*屏幕宽度超出1200px*/
            @media only screen and (min- 1200px) {
                
                .box {
                    background-color: pink;
                }
                .it {
                    width: 25%;
                }
    
                
            }
            /*屏幕宽度间于600至1200px*/
            @media only screen and (min- 600px) and (max- 1200px) {
                .box {
                    background-color: brown;
                }
                .it {
                    width: 30%;
                    margin: 0 calc(10% / 6);
                }
    
            }
            /*屏幕宽度小于600px*/
            @media only screen and (max- 600px) {
                .box {
                    background-color: cyan;
                }
                .it {
                    width: 80%;
                    margin-left: 10%;
                    min-width: 300px;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="it">1</div>
            <div class="it">2</div>
            <div class="it">3</div>
            <div class="it">4</div>
            <div class="it">5</div>
            <div class="it">6</div>
            <div class="it">7</div>
            <div class="it">8</div>
            <div class="it">9</div>
            <div class="it">10</div>
            <div class="it">11</div>
            <div class="it">12</div>
        </div>
    </body>
    </html>
    响应式布局案例
  • 相关阅读:
    拜师鸟哥之linux学习体会(1)——计算器概论
    LeetCode刷题1
    jupyter notebook直接打开.md格式的文件
    [图论]最短网络:prim
    [图论]最短网络:kruskal
    [图论]最优布线问题:kruskal
    A+B Problem
    [图论]最优布线问题:prim
    [图论]求连通分量
    [图论]连通图:深搜(邻接矩阵)
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9706518.html
Copyright © 2011-2022 走看看