Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 默认布局与自定义布局
Blogger Information
Blog 19
fans 0
comment 0
visits 8307
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
默认布局与自定义布局
Wu.Ang
Original
549 people have browsed it

默认布局与自定义布局

默认布局与元素类型

1.浏览器默认 :

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

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

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

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

3.盒子有两种

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

自定义布局

定位原理与演示

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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>定位</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         div.box{
  15.             width: 600px;
  16.             height: 500px;
  17.             border: 2px solid;
  18.             position: relative;
  19.         }
  20.         /* 相对定位 */
  21.         div.box .relative{
  22.             width: 100px;
  23.             height: 100px;
  24.             text-align: center;
  25.             background-color: lightgreen;
  26.             position: relative;
  27.             top: 200px;
  28.             left: 300px;
  29.         }
  30.         /* 绝对定位 */
  31.         div.box .absolute{
  32.             width: 100px;
  33.             height: 100px;
  34.             text-align: center;
  35.             background-color:lightblue;
  36.             position: absolute;
  37.             bottom: 100px;
  38.             right: 200px;
  39.         }
  40.         /* 固定定位 */
  41.         div.box .fixed{
  42.             width: 100px;
  43.             height: 100px;
  44.             text-align: center;
  45.             background-color:green;
  46.             position: fixed;
  47.             bottom: 100px;
  48.             left: 200px;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div class="box">
  54.         <!-- 相对定位 -->
  55.         <div class="relative">
  56.             <span>相对定位</span>
  57.         </div>
  58.         <!-- 绝对定位 -->
  59.         <div class="absolute">
  60.             <span>绝对定位</span>
  61.         </div>
  62.         <!-- 固定定位 -->
  63.         <div class="fixed">
  64.             <span>固定定位</span>
  65.         </div>
  66.     </div>
  67. </body>
  68. </html>

粘性定位

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>粘性定位</title>
  8.     <style>
  9.         div.box{
  10.             width: 400px;
  11.         }
  12.         div.box .content div{
  13.             border: 1px solid;
  14.         }
  15.         div.box .content div span{
  16.             width: 100%;
  17.             border: 1px solid;
  18.             display: inline-block;
  19.             background-color: aqua;
  20.             position: sticky;
  21.             top: 0;
  22.         }
  23.         div.box .content div p{
  24.             width: 100%;
  25.             height: 300px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="box">
  31.         <div class="content">
  32.             <div>
  33.                 <span>第一段内容</span>
  34.                 <p></p>
  35.             </div>
  36.             <div>
  37.                 <span>第二段内容</span>
  38.                 <p></p>
  39.             </div>
  40.             <div>
  41.                 <span>第三段内容</span>
  42.                 <p></p>
  43.             </div>
  44.             <div>
  45.                 <span>第四段内容</span>
  46.                 <p></p>
  47.             </div>
  48.             <div>
  49.                 <span>第五段内容</span>
  50.                 <p></p>
  51.             </div>
  52.         </div>
  53.     </div>
  54. </body>
  55. </html>

3.定位元素:

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

4.定位参照物:

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

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

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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post