默认布局与定位布局

1.默认布局

默认布局是浏览器默认的布局方式，也叫做文档流布局或正常布局流，源码的书写顺序决定了元素在html页面中显示的顺序，由此可见元素的排列位置具有可Yu测性，关键语法：position:static

布局元素分为两类：块级元素和内联(行内)元素

类型	特征	关键语法
块级元素	高度：总是占据父级的全部宽度（100%）；宽度：未设置时，由内容的高度来决定；是可以自定义宽高，总是垂直排列	display:block
内联(行内)元素	用来描述块级元素内部的内容/文本，高度和宽度都由内容的宽高来决定，均不能自定义宽高，总是水平排列;内联元素中padding有效,margin只有左右有效	display:inline
内联块	既可以像内联元素一样水平排列，又可以像块级元素一样设置宽高	display:inline-block

2.定位布局

类型	描述	关键语法
相对定位	相对于”自身在文档流中的位置”，以文档左上角为中心，向左（X轴）或向下（Y轴）移动	position:relative
绝对定位	相对于”距离它最近的定位元素的位置”,即常说的”定位父级”,逐级向上直到找到最初包含块(最初的视口)	position:absolute
固定定位	总是相对于”最初包含块”定位，永远保持在视口的某一位置	position:fixed
粘性定位	粘性定位 = 静态定义 + 固定定位	position:sticky

3.案例

HTML代码

   <div class="parent">
      <div class="childBox1">
        <img src="logo.jpg" alt="" />
        <ul class="absoluteList">
          <li class="item">首页</li>
          <li class="item">视频教程</li>
          <li class="item">学习路径</li>
          <li class="item">培训</li>
          <li class="item">资源下载</li>
          <li class="item">技术文章</li>
          <li class="item">社区</li>
          <li class="item">App下载</li>
        </ul>
      </div>
      <div class="childBox2">
        <ul class="fixedList">
          <li class="item">直播课</li>
          <li class="item">限时折扣</li>
          <li class="item">最新课程</li>
          <li class="item">热门推荐</li>
          <li class="item">手册教程</li>
          <li class="item">资源下载</li>
          <li class="item">技术文章</li>
          <li class="item">博客文章</li>
          <li class="item">社区问答</li>
          <li class="item">APP下载</li>
        </ul>
      </div>
    </div>
    <div class="box">
      <img src="app.jpg" alt="">
    </div>
    <div class="con">
      <div>
        <h2 style="background-color: yellow">第一章 小二上酒</h2>
        <p>
          <!-- 这里内容自定义 -->
        </p>
      </div>
      <div>
        <h2 style="background-color: coral">第二章 白狐脸儿</h2>
        <p>
          <!-- 这里内容自定义 -->
        </p>
      </div>
      <div>
        <h2 style="background-color: green">这是第三个标题</h2>
        <p>
         <!-- 这里内容自定义 -->
        </p>
      </div>
      <div>
        <h2 style="background-color: cyan">这是第四个标题</h2>
        <p>
        <!-- 这里内容自定义 -->
        </p>
      </div>
    </div>

CSS代码

html {
  /* 简化布局，方便计算 */
  box-sizing: border-box;
}
img {
  margin-left: 10%;
  margin-top: 12px;
}
.childBox1 {
  width: 100%;
  height: 80px;
}
.childBox1 > .absoluteList {
  width: 60%;
  top: 5px;
  /* 绝对定位 */
  position: absolute;
  display: block;
  left: 20%;
}
.absoluteList > li {
  width: 10%;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  text-align: center;
}
/* 去掉ul的小圆点 */
ul {
  list-style-type: none;
}
.parent > .childBox2 {
  /* 固定定位 */
  position: fixed;
  right: 0;
  top: 25%;
}
.fixedList > li {
  width: 150px;
  height: 30px;
  border-top: 1px solid rgb(255, 253, 254);
  background-color: lightgray;
  text-align: center;
  margin-top: 1px;
  padding-top: 15px;
}
/* 最后一个li字体加粗 */
.fixedList > li:last-of-type {
  font-weight: bold;
}
.box{
  width: 150px;
  height: 150px;
  position: relative;
  top: 20px;
  left: 20px;
  float: left;
}
.con {
  background-color: antiquewhite;
}
.con h2 {
  /* 粘性定位 */
  position: sticky;
  /* 当到了top=0的位置时,就自动悬停住了,就像粘在那里一样 */
  top: 0;
}

效果预览