CSS——复习强化、标准流、浮动、Flex 布局

原创已于 2024-11-14 20:48:58 修改 · 851 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2024-11-06 09:40:17 首次发布

Web前端专栏收录该内容

8 篇文章

订阅专栏

复习强化

练习一小米登录

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .mi {
      width: 339px;
      height: 356px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    /* h1是logo 一般情况下都是背景 */
    .mi h1 {
      width: 49px;
      height: 49px;
      margin: 0 auto;
      background: #ff4c00 url(./images/mi-logo.png) no-repeat;
      /* background-color: red; */
    }

    .mi h2 {
      text-align: center;
      font-weight: 400;
      font-size: 28px;
      margin: 32px 0 44px;
    }

    .mi input {
      width: 339px;
      height: 50px;
      border: 1px solid #ccc;
      padding-left: 12px;
      margin-bottom: 12px;
    }

    .mi button {
      width: 339px;
      height: 50px;
      background-color: #ff4c00;
      border: 0;
      font-size: 14px;
      color: #fff;
    }

    .mi button:hover {
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="mi">
    <h1></h1>
    <h2>小米账号登录</h2>
    <input type="text" placeholder="邮箱/手机/小miID">
    <input type="password" placeholder="密码">
    <button>登录</button>
  </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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .dog {
      width: 262px;
      height: 342px;
      /* background-color: pink; */
      margin: 100px auto;
      border: 1px solid #090;
      background: url(./images/bg.gif);
      padding: 9px 9px 0;
    }

    .dog h2 {
      height: 25px;
      line-height: 25px;
      border-left: 5px solid #c9e143;
      font-size: 18px;
      color: #fff;
      padding-left: 10px;
    }

    .dog ul {
      /* 背景给ul好一些 */
      background-color: #fff;
      /* 给ul padding 这样可以把li 挤到中间 */
      padding: 0 9px;
      margin-top: 5px;
    }

    .dog ul li {
      line-height: 31px;
      height: 31px;
      /* 大师的 */
      border-bottom: 1px dashed #000;
      background: url(./images/tb.gif) no-repeat left center;
      padding-left: 14px;
    }

    .dog ul li a {
      font-size: 12px;
      text-decoration: none;
    }
  </style>
</head>

<body>
  <div class="dog">
    <h2>爱宠知识</h2>
    <ul>
      <li><a href="#">养狗比养猫对健康更有利</a></li>
      <li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
      <li><a href="#">狗狗歌曲《新年旺旺》</a></li>
      <li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
      <li><a href="#">【爆笑】这狗狗太不给力了</a></li>
      <li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
      <li><a href="#">狗狗各个阶段健康大事件</a></li>
      <li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
      <li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
    </ul>
  </div>
  <!-- 爱宠知识
 -->
</body>

</html>

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

浮动

作用：让块元素水平排列。

属性名：float

属性值

left：左对齐
right：右对齐

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

<!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>
    .left,
    .right {
      /* width: 200px; */
      height: 200px;
      background-color: pink;
    }

    .left {
      /* 左浮动 */
      float: left;
      margin-left: 20px;
    }

    .right {
      /* 右侧浮动 */
      float: left;
      height: 300px;
      background-color: purple;
    }

    .bottom {
      height: 50px;
      background-color: black;
    }
  </style>
</head>

<body>
  <div class="left">左侧123</div>
  <div class="right">右侧123</div>
  <div class="bottom"></div>
</body>

</html>

浮动 – 产品区域布局

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

方法一：额外标签法

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

<!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>Document</title>
  <style>
    .box {
      width: 500px;
      background-color: pink;
    }

    .dason {
      float: left;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    .erson {
      float: left;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

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

    .clear {
      /* 清除浮动 */
      clear: both;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="dason">大儿子</div>
    <div class="erson">二儿子</div>
    <div class="clear"></div>
  </div>
  <div class="bottom">底部盒子</div>
</body>

</html>

方法二：单伪元素法

方法三：双伪元素法（推荐）

方法四：overflow

父元素添加 CSS 属性 overflow: hidden

<!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>Document</title>
  <style>
    .box {
      overflow: hidden;
      width: 500px;
      background-color: pink;
    }

    .dason {
      float: left;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    .erson {
      float: left;
      width: 200px;
      height: 200px;
      background-color: purple;
    }

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

    /* 2. 单伪元素 */
    /* .box::after {
      content: "";
      display: block;
      clear: both;
    } */

    /* 3. 双伪元素 */
    /* .box::before,
    .box::after {
      content: "";
      display: table;
    }

    .box::after {
      clear: both;
    } */
    /* .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
    }

    .clearfix::after {
      clear: both;
    } */
  </style>
</head>

<body>
  <div class="box ">
    <div class="dason">大儿子</div>
    <div class="erson">二儿子</div>

  </div>
  <div class="bottom">底部盒子</div>

  <div class="box clearfix">
    <div class="dason">大儿子</div>
    <div class="erson">二儿子</div>

  </div>
</body>

</html>

浮动 – 总结

浮动属性 float，left 表示左浮动，right 表示右浮动

特点

1.浮动后的盒子顶对齐

2.浮动后的盒子具备行内块特点

3.父级宽度不够，浮动的子级会换行

4.浮动后的盒子脱标

清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果

1.双伪元素法

拓展：浮动本质作用是实现图文混排效果

<!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>Document</title>
  <style>
    img {
      float: left;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <img src="./images/product.png" alt="">
  很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字很多很多的文字
</body>

</html>

Flex 布局

Flex – 认识

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

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

Flex – 组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向

<!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>Document</title>
  <style>
    .box {
      display: flex;
      justify-content: space-evenly;
      width: 1500px;
      height: 200px;
      background-color: pink;
    }

    .box>div {
      width: 300px;
      /* height: 200px; */
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

</html>

Flex 布局

描述	属性
创建 flex 容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
弹性盒子换行	flex-wrap
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
行对齐方式	align-content

主轴对齐方式

属性名：justify-content

center
space-between
space-around
space-evenly

<!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>Document</title>
  <style>
    .box {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* 两侧没缝隙 */
      /* justify-content: space-between; */
      /* 两倍缝隙 */
      /* justify-content: space-around; */
      justify-content: space-evenly;
      width: 900px;
      height: 200px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

侧轴对齐方式

属性名

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）

align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

<!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>Document</title>
  <style>
    .box {
      /* 给父亲添加 flex */
      display: flex;
      /* 主轴的排列方式 */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */
      /* 让子盒子居中对齐 */
      /* justify-content: center; */
      /* between  */
      /* 两侧没缝隙 */
      /* justify-content: space-between; */
      /* 两倍缝隙 */
      /* justify-content: space-around; */
      justify-content: space-evenly;

      /* 侧轴的对齐方式 */
      /* 顶部对齐 */
      /* align-items: flex-start; */
      /* 底部对齐 */
      /* align-items: flex-end; */
      /* 居中对齐 */
      /* align-items: center; */
      /* 默认的 拉伸和父亲一样 */
      align-items: stretch;
      width: 900px;
      height: 500px;
      background-color: pink;
    }

    .box div {
      width: 249px;
      /* height: 200px; */
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

wrap：换行
nowrap：不换行（默认）

思考：如何让父盒子里面的一个子盒子水平垂直居中？

<!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>Document</title>
  <style>
    .father {
      /* 利用flex实现 */
      display: flex;
      /* 主轴水平居中 */
      justify-content: center;
      /* 侧轴水平居中 */
      align-items: center;
      width: 300px;
      height: 300px;
      background-color: pink;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    .box {
      width: 1240px;
      height: 540px;
      /* background-color: pink; */
      margin: 100px auto;
    }

    .box-hd {
      /* 给父亲添加 flex 里面的孩子  h2 和 a 可以一样显示 */
      display: flex;
      /* 两侧没缝隙 主轴对齐 */
      justify-content: space-between;
      /* 侧轴底对齐 */
      align-items: flex-end;
      padding: 40px 0;
    }

    .box-hd h2 {
      font-size: 32px;
      font-weight: 400;
    }

    .box-hd h2 span {
      font-size: 16px;
      color: #999;
    }

    .box-hd a {
      font-size: 16px;
      color: #999;
    }

    .box-bd ul {
      /* 一定是li的亲爸爸 */
      display: flex;
      justify-content: space-between;
    }

    .box-bd li {
      width: 306px;
      height: 406px;
      background-color: skyblue;
      text-align: center;
    }

    .box-bd li img {
      width: 100%;
    }

    .box-bd li h4 {
      font-size: 22px;
      font-weight: 400;
      margin: 12px 0 20px;
    }

    .box-bd li p {
      font-size: 18px;
      color: orangered;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 头部部分 -->
    <div class="box-hd">
      <h2>新鲜好物
        <span>新鲜出炉 品质靠谱</span>
      </h2>
      <a href="#">查看更多> </a>
    </div>

    <!-- 主体部分 -->
    <div class="box-bd">
      <ul>
        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>
      </ul>
    </div>
  </div>

  <div class="box">
    <!-- 头部部分 -->
    <div class="box-hd">
      <h2>新鲜好物
        <span>新鲜出炉 品质靠谱</span>
      </h2>
      <a href="#">查看更多> </a>
    </div>

    <!-- 主体部分 -->
    <div class="box-bd">
      <ul>
        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>
      </ul>
    </div>
  </div>


  <div class="box">
    <!-- 头部部分 -->
    <div class="box-hd">
      <h2>新鲜好物
        <span>新鲜出炉 品质靠谱</span>
      </h2>
      <a href="#">查看更多> </a>
    </div>

    <!-- 主体部分 -->
    <div class="box-bd">
      <ul>
        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>

        <li>
          <img src="./images/1.jpg" alt="">
          <h4>全防水HABU旋钮</h4>
          <p>¥444.00</p>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>