默认布局与自定义布局

默认布局与元素类型

1.浏览器默认 :

1.元素显示顺序,就是元素在源码中的书写顺序
2.元素的排列位置,具有"预测性"
3.名称: 文档布局流/正常布局流
4.默认定位:position:static(静态定位)

2.默认情况下,浏览器的布局流程

没有被标签包裹的文本叫”匿名文本”

1.把内容(匿名文本)放到一个独立的矩形的盒子中 : 盒模型
2.将内容放到什么盒子中就决定了这是什么类型的元素
3.为这个盒子添加margin、padding、border

3.盒子有两种

1.块级: display : block/table/table-cell,td/list-item/form/p/h1-h6/...
    宽度:总是占据父级宽度的100%;
    高度:由内容决定(可以自定义)
    排列方式:垂直排列
2.行内(内联) : 描述块级元素中的内容/文本 display : inline
    宽度:内容宽度
    高度:内容高度
    排列方式:水平排列,宽度不够则换行显示
    不能自定义宽高
    padding有效,margin只有左右有效
    想要设置宽高,可以把类型设置为块级元素 display : block
    内联块/行内块 (可视为内联元素的一个特例/子集)
        既想把行内元素转为块级元素,又不想其他元素换行显示 display : inline-block

自定义布局

定位原理与演示

1.定位三个必知术语: 定位元素, 最初包含块(定位上下文), 参照物

  (1). 定位元素: position: relative / absolute / fixed
  (2). 最初包含块: 包含了<html>的不可见的,但可感知的区块,大多场景下与"视口"表现一致,但并不相同
  (3). 参照物: 自身, 祖先定位元素, 最初包含块

2.定位类型: 相对, 绝对, 固定, 默认静态,粘性定位

  (1). 相对定位: position: relative
        参照物:相对元素自身在文档流中的原始位置进行偏移
  (2). 绝对定位: position: absolute
        两点变化1.位置向上移动,并盖住上一个元素2.宽度缩短,正好容纳文本内容
        绝对定位元素,并非相对于自身,而是相对于它的定位元素的祖先元素
        参照物:具有定位属性的包含块->定位父级(只有定位元素才可以充当定位父级,非static)
        绝对定位的元素一直逐级向上查找可定位的元素作为定位参照物/定位上下文,如果找不到就找最初包含块(html的父级)做定位父级
  (3). 固定定位: position: fixed
        就是绝对定位的一个特例,逐级向上找不到定位父级的情况
        参照物:永远相对于视口进行定位
  (4). 静态定位: position: static (浏览器默认,即文档流布局)
  (5). 粘性定位: position: sticky
        静态定位+固定定位

相对定位、绝对定位、固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div.box{
            width: 600px;
            height: 500px;
            border: 2px solid;
            position: relative;
        }
        /* 相对定位 */
        div.box .relative{
            width: 100px;
            height: 100px;
            text-align: center;
            background-color: lightgreen;
            position: relative;
            top: 200px;
            left: 300px;
        }
        /* 绝对定位 */
        div.box .absolute{
            width: 100px;
            height: 100px;
            text-align: center;
            background-color:lightblue;
            position: absolute;
            bottom: 100px;
            right: 200px;
        }
        /* 固定定位 */
        div.box .fixed{
            width: 100px;
            height: 100px;
            text-align: center;
            background-color:green;
            position: fixed;
            bottom: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 相对定位 -->
        <div class="relative">
            <span>相对定位</span>
        </div>
        <!-- 绝对定位 -->
        <div class="absolute">
            <span>绝对定位</span>
        </div>
        <!-- 固定定位 -->
        <div class="fixed">
            <span>固定定位</span>
        </div>
    </div>
</body>
</html>

粘性定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        div.box{
            width: 400px;
        }
        div.box .content div{
            border: 1px solid;
        }
        div.box .content div span{
            width: 100%;
            border: 1px solid;
            display: inline-block;
            background-color: aqua;
            position: sticky;
            top: 0;
        }
        div.box .content div p{
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <div>
                <span>第一段内容</span>
                <p></p>
            </div>
            <div>
                <span>第二段内容</span>
                <p></p>
            </div>
            <div>
                <span>第三段内容</span>
                <p></p>
            </div>
            <div>
                <span>第四段内容</span>
                <p></p>
            </div>
            <div>
                <span>第五段内容</span>
                <p></p>
            </div>
        </div>
    </div>
</body>
</html>

3.定位元素:

  (1): 定义: 也叫"可定位元素",即可以在文档流中自定义元素的排列方向
  (2): 属性: position: relative / absolute / fixed,即 非static即可

4.定位参照物:

  (1): 相对定位: 相对于"自身在文档流中的位置"
  (2). 绝对定位: 相对于"距离它最近的定位元素的位置",即常说的"定位父级",逐级向上直到最初包含块
  (3). 固定定位: 总是相对于"最初包含块"定位

隐藏元素:visiblity: hidden; 并非删除

删除元素:display: none; 源码中有,页面不存在