HTML上半部分布局及对于文本流认知

一、文本流

document flow => normal flow
本质:普通流/常规流

流:水流河流泥石流 => 自上而下(连续的),连续的
文档:页面主体

文档流:一个连续具有逻辑上下的页面整体
理解:出现在页面中的显示内容,均可以理解为在文档流中(片面的)

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

BFC:Block formatting context

概念:由block-level box参与布局,1.左右位置,根据BFC布局方向,由margin左或右控制位置,值叠加
　　　　　　　　　　　　　　　 2.垂直位置,由margin-top控制位置,相邻block margin发送值重叠(取大值)
3.同一容器(同一层次中)内外互不影响

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档流</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*默认BFC水平布局方向:从左至右*/
            /*margin-left: 50px;*/

            /*更改BFC水平布局方向:从右至左*/
            float: right;
            margin-right: -50px;
        }
        .b1 {
            width: 200px;
            height: 200px;
            background: red;
            margin-left: 10px;
        }
        .bb1, .bb2 {
            width: 50px;
            height: 50px;
            background: cyan;
            float: left;
        }
        .bb1 {
            margin-left: 20px;
            margin-right: 20px;
        }
        .bb2 {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <!-- b1与b2 同在一个区域 | bb1与bb2 同在一个区域 -->
    <div class="b1">
        <div class="bb1"></div>
        <div class="bb2"></div>
    </div>
    <div class="b2">

    </div>

    <div class="box"></div>
</body>
</html>

BFC演示

二、浮动布局

一、浮动布局解决经典案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决经典案例</title>
    <style type="text/css">
    .box {
        width: 300px;
        border: 1px solid black;
    }
    .box img {
        width: 150px;
        float: left;
    }
</style>
</head>
<body>
    <div class="box">
    <img src="bg.gif" alt="">
</div>
</body>
</html>

解决经典案例

二、基本语法

float：left | right

三、浮动布局产生的问题

简述：不做清浮动情况下父级在没有设置高度的是无法被子级撑开。

产生浮动布局问题的原因为：通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度，但是脱离文本流后字标签不会撑开父级的高度，另外不完全脱离文本流是由浮动导致的但如果不清除浮动的话其子级不会撑开父级的高度。

四、清浮动

目的：是为了让父级再次获得合适的高度。

① 浮动的父级设置高度
super {
height: npx;
}

简述：手动给父级重新设置高度。
② 浮动的父级设置overflow
super {
overflow: hidden;
}

简述：在出现浮动问题的前一个标签设置overflow：hidden可以将不必要的内容隐藏下来。
③ 浮动的父级兄弟设置clear
brother {
clear: left | right | both;
}

简述：可以给产生浮动问题的标签的父级标签设置clear是因为可以在问题之后的兄弟标签去处理问题。
④ 浮动的父级伪类清浮动
super:after {
content: "";
display: block;
clear: left | right | both;
}

简述：通过给自身设置清除浮动来解决浮动带来的问题。

三、流式布局

一、流式布局解决的经典案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style type="text/css">
    .wrap {
        max-width: 1200px;
        min-width: 800px;
        width: 90%;
        height: 600px;
        margin: 0 auto;
        background-color: orange;
    }
</style>
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

流式布局经典案例

二、基本属性

① 百分比设置 %
② 窗口比设置 vw | vh
③ 字体控制 em | rem

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style type="text/css">
        html, body {
            width: 100%;
            margin: 0;
        }
        .box {
            /*百分比流式*/
            /*参考最近父级*/
            width: 90%;
            /*max-width: 1000px;*/
            /*min-width: 600px;*/

            /*窗口比*/
            /*width: 90vw;*/
            /*max-width: 1000px;*/
            /*min-width: 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>

流式布局基本属性演示

四、定位布局

一、定位布局的经典案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定位布局应用</title>
    <style type="text/css">
        .box {
            width: 150px;
            height: 300px;
            background-color: orange;
            /*定位了*/
            position: fixed;
            /*打开了布局方位*/
            left: 10px;
            top: calc(50vh - 150px);
        }
    </style>
    <!-- 基本语法: -->
    <!-- 1.通过position设置定位是否开启 -->
    <!-- static：静态，未定位（默认值） -->
    <!-- relative: 相对定位, 未脱离文档流 -->
    <!-- absolute: 绝对定位, 完全脱离文档流 -->
    <!-- fixed: 固定定位, 完全脱离文档流 -->
    <!-- 2.定位开启后,四个定位方位便会开启,且四个方位均参与布局 -->
    <!-- 如果发生冲突,左右取左,上下取上 -->
</head>
<body>
    <!-- 目的(应用):让目标(要被布局的)标签在指定参考系下任意布局 -->
    <div class="box"></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>
    <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>
    <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>
    <br>
</body>
</html>

定位布局经典案例

二、定位布局的几大基本属性：

1、static：为定位布局的默认状态，可以不用去了解。

2、relative：相对定位（不完全脱离文本流，但是其原有的位置不会发生改变只是显示区域会发生改变并且其显示的内容区域是根据其自己的原有位置作为参考系去移动。）

注意：相对定位布局再布局的时候是通过移动与其原有位置上下左右来的移动显示区域当同时取上下时取上，同时取左右时取左。

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

相对定位演示

3、obsolute：绝对定位（完全脱离文本流，会将原有的位置清除掉然后以与其最近的已经定位的父级作为参考系通过上下左右以父级的原始位置来移动位置并且不会影响其它的盒模型的布局）

注意：在移动位置的时候如果同时上下移动是以上为准，同时以左右移动时以左为准。

<!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,导致盒模型布局会受影响*/
            /*注:margin-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>

绝对定位演示

4、fixed：固定定位（完全脱离文本流，以窗口为参考系去移动显示的区域并且在移动窗口的移动条时其位置固定并不会跟着移动.）

<!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;*/
            left:-200PX;
        }
        .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>
    <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>
    <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>
    <br>
</body>
</html>

固定定位演示

原文地址：https://www.cnblogs.com/ageliu/p/9715261.html

时间： 2024-10-01 04:03:48

HTML上半部分布局及对于文本流认知

HTML上半部分布局及对于文本流认知的相关文章

前端（七）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

float和position:absolute脱离文本流的区别

14.5-全栈Java笔记:java.awt这些布局怎么写？|流式|边界|网格

标准文本流

Linux文本流

第33课文本流和数据流

css对于float返回文本流的做法

文本流与二进制流

linux系统知识 - 文本流&管道