day3Css布局总结方向三|豆包MarsCode AI刷题

用户111454871836
44 阅读5分钟

一.浮动布局

  1. 清除浮动

    • 当使用浮动布局后，父元素的高度可能会塌陷。可以使用clear: both;来清除浮动。一种常见的方法是在浮动元素的父元素末尾添加一个空的块级元素，并设置clear: both;。
.clearfix::after { 
content: "";
display: block; 
clear: both;
}
  • 然后将需要清除浮动的父元素添加class="clearfix"即可。这种方式被称为 “伪元素清除浮动”，它利用了 CSS 的伪元素::after，在父元素内容的最后添加一个空元素来清除浮动，保持父元素的高度正确。

  1. 浮动元素排列

    • 浮动元素可以实现多列布局。例如，通过设置float: left;或float: right;可以让元素向左或向右浮动，从而实现并列排列。同时，可以通过设置元素的宽度来控制每列的宽度。
.column - left { 
float: left; 
width: 30%;
} 
.column - right { 
float: right; 
width: 70%;
}
  • 这里创建了一个两列布局，左边列占宽度的 30%，右边列占 70%。

实操示例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Float Layout Example</title> 
<style>
/* 清除浮动的样式类 */ 
.clearfix::after { 
content: ""; 
display: block;
clear: both; 
}
/* 整体容器样式 */ 
.float-container {
background-color: #f4f4f4;
padding: 20px;
} 
/* 左侧浮动列样式 
*/ .float-column-left { 
float: left;
width: 30%; 
background-color: #ccc; 
padding: 10px; 
} 
/* 右侧浮动列样式 */ 
.float-column-right { 
float: right; 
width: 60%; 
background-color: #ddd; 
padding: 10px;
} 
</style> 
</head> 
<body> 
<div class="float-container clearfix">
<div class="float-column-left"> 
<h2>左侧栏内容</h2> 
<p>这是左侧栏的一些示例文本内容，这里可以放置一些导航链接或者辅助信息等。</p> </div> 
<div class="float-column-right">
<h2>右侧栏内容</h2> 
<p>这是右侧栏的主要内容部分，比如文章主体、产品介绍等信息会放在这里。</p> 
</div> </div> 
</body> 
</html>

注意在大div内- 需要注意清除浮动，以避免父元素高度塌陷问题。 若不清除浮动则出现以下情况：

image.png 加上清除浮动的效果是这样的：

image.png

二.定位布局（Position）

相对定位（Relative）应用场景：

  • 用于对元素进行微调，在不影响其他元素布局的情况下，稍微改变元素的位置。比如在一个图片展示区域，想要让图片的标题相对于图片本身稍微偏移一点位置，以达到更好的视觉效果。

相对定位实践要点：

  • 相对定位是相对于元素自身的原始位置进行移动，设置position: relative;后，通过top、bottom、left、right属性来指定移动的方向和距离。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Position Example</title>
  <style>
    .relative-container {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: #f4f4f4;
      margin: 20px auto;
    }

    .relative-element {
      /* position: relative; */
      top: 20px;
      left: 30px;
      background-color: #ccc;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="relative-container">
    <div class="relative-element">
      相对定位元素
    </div>
  </div>
</body>

</html>

这是不给第二个盒子设置相对定位时的界面 image.png 这是设置了相对定位的盒子位置 image.png

绝对定位（Absolute）应用场景：

  • 常用于创建弹出式菜单、模态框等需要在特定父元素内精确定位的元素。例如，一个模态框需要在页面中间显示，就可以先将父元素设置为相对定位，然后在父元素内将模态框设置为绝对定位并进行居中操作。

绝对定位实践要点：

  • 绝对定位是相对于最近的非static定位的祖先元素进行定位，如果没有这样的祖先元素，则相对于body元素定位。通常会先给父元素设置position: relative;，再对要绝对定位的子元素进行设置。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Position Example</title>
  <style>
    .absolute-parent {
      position: relative;//参考标准
      width: 400px;
      height: 400px;
      background-color: #f4f4f4;
      margin: 20px auto;
    }

    .absolute-element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #ccc;
      width: 150px;
      height: 150px;
    }
  </style>
</head>

<body>
  <div class="absolute-parent">
    <div class="absolute-element">
      绝对定位元素
    </div>
  </div>
</body>

</html>

没有给.absolute-parent 设置了 position: relative; image.png 给.absolute-parent 设置了 position: relative; image.png 固定定位（Fixed）应用场景：

  • 适合创建固定在浏览器窗口特定位置的元素，如页面顶部的导航栏、底部的版权信息栏等，无论页面如何滚动，这些元素始终保持在固定位置。

固定定位实践要点：

  • 固定定位的元素是相对于浏览器窗口进行定位的，通过设置position: fixed;以及top、bottom、left、right属性来确定其在窗口中的位置。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Position Example</title>
  <style>
   .fixed-nav {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #333;
      color: white;
      padding: 10px 0;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="fixed-nav">
    固定导航栏
  </div>
  <div style="height: 1000px; background-color: #f4f4f4;"></div>
</body>

</html>

image.png

三、弹性盒子布局（Flexbox）

应用场景：

  • 非常适合实现各种复杂的一维布局，比如导航栏菜单的水平或垂直排列、内容区域内多个项目的均匀分布等，能够轻松实现元素的对齐和分布控制。

实践要点：

  • 首先要将容器设置为弹性容器，使用display: flex;。然后根据需求设置主轴和交叉轴的方向、子元素的对齐方式等属性。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout Example</title>
  <style>
   .flex-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #f4f4f4;
      padding: 20px;
    }

   .flex-item {
      background-color: #ccc;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="flex-container">
    <div class="flex-item">
      弹性盒子项目1
    </div>
    <div class="flex-item">
      弹性盒子项目2
    </div>
    <div class="flex-item">
      弹性盒子项目3
    </div>
  </div>
</body>

</html>

不设置弹性布局是这样的：

image.png 设置后是这样的

image.png

这些布局技巧各有特点，可以根据具体的网页设计需求灵活选择和组合使用，以创建出美观、实用的网页布局。

avatar
文章
阅读
粉丝