HTML5前端第六章节

一.标准流,浮动,flex布局

1.标准流

概念:标准流又叫文档流,指的是标签在页面中默认的排布规则,例如块元素独占一行,行内元素可以一行显示多个等等排布规则

2.浮动

(1).作用:

让块元素水平排列

(2).属性名:

float

(3).属性值:

left(左对齐),right(右对齐)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .test_one {
    width: 300px;
    height: 300px;
    background-color: blueviolet;

    float: left;
  }

  .test_two {
    width: 300px;
    height: 300px;
    background-color: blue;

    /* 建议读者自己试试左右对齐不同的效果 */
    float: right;
  }
</style>
</head>
<body>
  <div class="test_one">div标签</div>
  <div class="test_two">div标签</div>
</body>
</html>

(4).特点:

①:顶部对齐

②:具备行内块显示模式的特点

③:浮动的盒子会脱离标准流的控制,具体还是要通过案例来理解这一特点

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 第三个特点 */
  /* 优先显示的是浮动元素 */
  .test_one {
    width: 150px;
    height: 150px;
    background-color: green;

    float: left;
  }
  /* 在这个类选择器中没有设置浮动,也就是说使用这个类的标签仍在标准流的控制中 */
  .test_two {
    width: 300px;
    height: 300px;
    background-color: blue;
  }
</style>
</head>
<body>
  <div class="test_one">div标签</div>
  <div class="test_two">div标签</div>
</body>
</html>

(5).常用的布局模式:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 去除默认样式 */
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  /* 设置盒子 */
  .product {
    margin: 100px auto;

    width: 1226px;
    height: 628px;
    background-color: blueviolet;
  }

  /* 父级盒子中又分出两个子级盒子 */
  .left {
    width: 234px;
    height: 628px;
    background-color: green;

    float: left;
  }

  .right {
    width: 978px;
    height: 628px;
    background-color: blue;

    float: right;
  }

  .right li {
    width: 234px;
    height: 300px;
    background-color: black;

    margin-right: 14px;
    margin-bottom: 14px;

    float: left;
  }

  /* 如果不设置这一复合选择器,第四个和第八个小盒子会因为右margin被挤出盒子,这也是
  浮动有时会出现的问题 */
  .right li:nth-child(4n) {
    margin-right: 0;
  }
</style>
</head>
<body>
  <div class="product">
    <div class="left"></div>
    <div class="right">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </div>
  </div>
</body>
</html>

(6).浮动可能脱离标准流,这时我们就需要清除浮动

具体场景:浮动元素脱标,如果父级没有高度,子级就无法撑开父级高度(导致页面布局错乱)

因此我们需要清除浮动,以消除浮动带来的影响

这是设置了高度,所以没有出现浮动脱标现象的案例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 此时都设置了高度,就不会出现浮动元素脱标的现象 */
  .top {
    margin: 10px auto;
    width: 1200px;
    height: 300px;
    background-color: red;
  }

  .bottom {
    height: 100px;
    background-color: green;
  }

  .left {
    width: 200px;
    height: 300px;
    background-color: orange;

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

以下是没有设置高度导致元素脱标的案例:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

  .bottom {
    height: 100px;
    background-color: green;
  }

  .left {
    width: 200px;
    height: 300px;
    background-color: orange;

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>
元素脱标后的解决方法:
①:额外标签法:

在父级元素内容的最后添加一个块级元素,设置CSS属性clear:both

缺点:会增加额外的标签,页面结构变得更复杂

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

  .bottom {
    height: 100px;
    background-color: green;
  }

  .left {
    width: 200px;
    height: 300px;
    background-color: orange;

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }

  /* 一般使用额外标签法时都使用clearfix这个类名 */
  .clearfix {
    clear: both;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <!-- 新添的块级标签 -->
    <div class="clear"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>
②:单伪元素法:

在父级元素中添加一个伪元素

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

  .bottom {
    height: 100px;
    background-color: green;
  }

  .left {
    width: 200px;
    height: 300px;
    background-color: orange;

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }

  /* 单伪元素法 */
  .clearfix::after {
    /* 必须存在content属性,否则伪元素不生效 */
    content: "";
    display: block;
    clear: both;
  }
</style>
</head>
<body>
  <!-- 将伪元素添加到顶部元素中 -->
  <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>
③:双伪元素法(最推荐使用的方式)

在父级元素中添加两个伪元素

推荐的原因是:既解决了塌陷问题,又解决了元素脱标的问题

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;
  }

  .bottom {
    height: 100px;
    background-color: green;
  }

  .left {
    width: 200px;
    height: 300px;
    background-color: orange;

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }

  /* 双伪元素法 */
  /* before伪元素是为了解决外边距塌陷问题而存在的 */
  .clearfix::before,
  .clearfix::after {
    /* 必须存在content属性,否则伪元素不生效 */
    content: "";
    display: table;
  }

  /* after伪元素才是为了解决元素脱标问题的 */
  .clearfix::after {
    clear: both;
  }
</style>
</head>
<body>
  <!-- 将伪元素添加到顶部元素中 -->
  <div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>
④:使用overflow

在父元素中添加CSS属性overflow:hidden

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; 消去了设置的高度 */
    background-color: red;

    /* overflow法 */
    overflow: hidden;
  }

  .bottom {
    height: 100px;
    background-color: green;
  }

  .left {
    width: 200px;
    height: 300px;
    background-color: orange;

    float: left;
  }

  .right {
    width: 950px;
    height: 300px;
    background-color: blue;

    float: right;
  }
</style>
</head>
<body>
  <div class="top">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="bottom"></div>
</body>
</html>

(7).浮动总结:

①:浮动属性名为float,我们常用的属性值为left(左浮动),right(右浮动)

②:浮动后的盒子根据顶部对齐

③:浮动后的盒子具备行内块的特点

④:父级宽度如果不够,那么浮动的子级会换行

⑤:浮动后的盒子会脱离标准流的控制

⑥:清除浮动有四种方法,分别为:双伪元素法(最推荐),单伪元素法,额外标签法和overflow法

⑦:浮动最初的作用是实现图文混排的效果

3.flex布局

概念:

lex布局也叫弹性布局,是浏览器中提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力

优点:

flex模型不会产生浮动布局中脱离标准流的现象,布局网页更简单,更灵活

设置方式:

给父元素设置display:flex属性,之后子元素会自动挤压或者拉伸

在父级盒子中装入三个子级盒子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 在父级盒子中装入三个子级盒子 */
  .father {
    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

使用浮动使得这三个盒子排列在同一行:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 使用浮动使得这三个盒子排列在同一行 */
  .father {
    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;

    float: left;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

使用flex实现相同的效果:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    /* 将展示方式改为flex */
    display: flex;
    /* 自动分隔开每个盒子之间的距离,将其排列整齐 */
    justify-content: space-between;
    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

flex相对于浮动的一个很明显的优点,不会脱离标准流的控制:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    /* 将展示方式改为flex */
    display: flex;
    /* 自动分隔开每个盒子之间的距离,将其排列整齐 */
    justify-content: space-between;
    /* 如果是使用浮动,那么一旦取消父级盒子的高度就会出现脱标的现象,但是flex却不同,请读者
    自己试试取消父级盒子高度的效果 */
    /* height: 300px; */
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
(1).flex的各个属性:
①:display:flex:

创建flex容器

②:justify-content:

主轴对齐方式

属性值:flex-start(默认值,弹性盒子从起点开始依次排列),flex-end(弹性盒子从终点开始排列),center(弹性盒子沿主轴居中排列),space-between(弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间),space-around(弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧),space-evenly(弹性盒子沿主轴均匀排列,弹性盒子与容器之间的间距相等)

③:align-items:

侧轴对齐方式

④:align-self:

单独控制某个弹性盒子的侧轴对齐方式(设置在弹性盒子中)

属性值:

stretch(弹性盒子沿着侧轴线被拉伸至铺满容器)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;
    /* 想要使用stretch属性就必须要侧轴方向没有属性,所以得取消子级盒子的高度 */
    align-items: stretch;

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    /* 如果不取消子级盒子的高度那么stretch属性就不会生效 */
    /* height: 100px; */
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div> -->
  </div>
</body>
</html>

center(弹性盒子沿侧轴居中排列),flex-start(弹性盒子从起点开始依次排列),flex-end(弹性盒子从终点开始依次排列)

单独控制某子级盒子的侧轴对齐方式:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 单独控制某子级盒子的侧轴对齐方式 */
  .father {
    display: flex;
    align-items: flex-end;

    height: 300px;
    border: 1px solid #000;
  }

  /* 单独控制第二个子级盒子的侧轴对齐方式为center */
  .father div:nth-child(2) {
    align-self: center;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div> -->
  </div>
</body>
</html>
⑤:flex-direction:修改主轴方向

属性值:row(水平方向,从左向右,默认为row),column(垂直方向,从上到下),row-reverse(水平方向,从右向左),column-reverse(垂直方向,从下向上)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;

    /* 修改主轴方向为垂直方向,此时侧轴方向变为水平方向 */
    flex-direction: column;

    /* 排列方式设置为依照主轴中心排列 */
    justify-content: center;

    /* 依照侧轴中心排列 */
    align-items: center;
    /* 最终的效果为子级元素被置于父级盒子最中央 */

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
⑥:flex:

弹性伸缩比

作用:控制弹性盒子的主轴方向的尺寸(按照比例分配父级盒子剩余空间)

属性值:整数数字,表示占用父级剩余尺寸的份数

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;
    flex-direction: column;

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    height: 100px;
    background-color: blueviolet;
  }

  .father div:nth-child(1) {
    width: 300px;
  }

  .father div:nth-child(2) {
    flex: 1;
  }

  .father div:nth-child(3) {
    flex: 9;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>
⑦:flex-wrap:

弹性盒子换行

作用:因为弹性盒子可以自动挤压或拉伸,所以在默认情况下所有的弹性盒子都在一行显示,因此我们需要使用本属性控制弹性盒子中的子级元素换行

属性值:wrap(换行),nowrap(不换行)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .father {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    height: 300px;
    border: 1px solid #000;
  }

  .father div {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</body>
</html>
⑧:align-content:

行对齐方式(对单行弹性盒子不会生效)

属性值:和主轴对齐方式的属性值的属性名以及效果都是相同的,flex-start,flex-end,center,space-between,space-around,space-evenly

(2).flex的组成结构:

①:弹性容器
②:弹性盒子

弹性容器和弹性盒子的压缩与拉伸现象:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  /* 弹性容器 */
  .father {
    display: flex;
    justify-content: space-between;

    height: 300px;
    border: 1px solid #000;
  }

  /* 弹性盒子,沿着主轴的方向排列 */
  .father div {
    width: 100px;
    /* 如果不设置子级的高度,那么flex就会将子级盒子的高度拉长到与父级的高度相等的长度上
    这就是flex的拉伸效果 */
    /* height: 100px; */
    background-color: blueviolet;
  }
</style>
</head>
<body>
  <div class="father">
    <!-- 如果子级盒子过多,为了在同一行中放下所有的盒子,flex就会压缩子级盒子的宽度,
     这就是flex的压缩效果 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</body>
</html>
③:主轴(默认在水平方向)
④:侧轴(又叫交叉轴,默认在垂直方向)
相关推荐
2501_906801206 分钟前
BY组态-低代码web可视化组件
前端·物联网·低代码·数学建模·前端框架
sma2mmm15 分钟前
微前端实现方案对比Qiankun VS npm组件
前端·前端框架·npm
月起星九18 分钟前
为什么package.json里的npm和npm -v版本不一致?
前端·npm·node.js
孤客网络科技工作室29 分钟前
每天学一个 Linux 命令(7):cd
java·linux·前端
努力的搬砖人.34 分钟前
Vue 2 和 Vue 3 有什么区别
前端·vue.js·经验分享·面试
Json_181790144801 小时前
python采集淘宝拍立淘按图搜索API接口,json数据示例参考
服务器·前端·数据库
珹洺1 小时前
Java-servlet(十)使用过滤器,请求调度程序和Servlet线程(附带图谱表格更好对比理解)
java·开发语言·前端·hive·hadoop·servlet·html
熙曦Sakura2 小时前
【C++】map
前端·c++
黑贝是条狗2 小时前
html 列表循环滚动,动态初始化字段数据
前端·javascript·html
萌萌哒草头将军2 小时前
🔥🔥🔥4 月 1 日尤雨溪突然宣布使用 Go 语言重写 Rolldown 和 Oxc!
前端·javascript·vue.js