CSS布局技巧 | 豆包MarsCode AI刷题

博丽七七
85 阅读5分钟

CSS 布局技巧汇总

一、浮动（float）布局

  1. 原理
    • 浮动元素会脱离文档流，向左或向右移动，直到碰到它的父元素的边界或者另一个浮动元素。浮动元素旁边的非浮动元素会环绕它排列。
  2. 应用场景
    • 图文混排：例如，在新闻文章页面中，将图片浮动在文字旁边，实现文字环绕图片的效果。这样可以使页面布局更加紧凑和美观。
    • 多列布局（简单情况） ：当需要创建简单的两列或三列布局，并且各列的高度可以不一致时，浮动是一种选择。比如一个博客页面，文章列表和侧边栏可以分别用浮动来布局。
  3. 实操示例
    • 两列布局
      • HTML 代码：
<div class="container">
  <div class="left-column">
    <p>这是左边列的内容。</p>
  </div>
  <div class="right-column">
    <p>这是右边列的内容。</p>
  </div>
</div>
  • CSS 代码：
.container {
   width: 100%;
 }
.left-column {
   float: left;
   width: 70%;
 }
.right-column {
   float: right;
   width: 30%;
 }
  • 图文混排
    • HTML 代码：
<div class="article">
  <img src="your-image-url.jpg" alt="示例图片" class="float-img">
  <p>这是一段很长的文章内容，图片会浮动在文字的左边，文字会环绕在图片周围。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
</div>
  • CSS 代码：
.float - img {
   float: left;
   margin - right: 10px;
 }

二、定位（position）布局

  1. 原理
    • 相对定位（relative） ：元素相对于它在正常文档流中的位置进行定位。它原本所占的空间仍然保留在文档流中。
    • 绝对定位（absolute） ：元素相对于最近的已定位（非 static）祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。它会脱离文档流，不占据文档流中的空间。
    • 固定定位（fixed） ：元素相对于浏览器窗口进行定位。即使页面滚动，元素的位置也不会改变，同样会脱离文档流。
  2. 应用场景
    • 相对定位：用于微调元素在文档流中的位置。比如，将一个图标相对于它所在的按钮稍微偏移一点，以达到更好的视觉效果。
    • 绝对定位：
      • 弹出式菜单：当鼠标悬停在导航栏项目上时，弹出的下拉菜单可以使用绝对定位，使其出现在导航栏项目的下方或者旁边，并且不会影响页面其他元素的布局。
      • 模态框：在页面中间显示的模态对话框，使用绝对定位可以将其准确地放置在页面中心或者其他指定位置，同时遮罩层可以覆盖整个页面背景。
    • 固定定位：
      • 导航栏固定在顶部：在长页面中，将导航栏固定在浏览器窗口的顶部，方便用户在滚动页面时始终能够快速访问导航链接。
      • 返回顶部按钮：在页面底部添加一个固定定位的 “返回顶部” 按钮，无论页面如何滚动，用户都可以轻松点击该按钮回到页面顶部。
  3. 实操示例
    • 相对定位微调元素位置
      • HTML 代码：
<div class="parent">
  <div class="child">原始位置</div>
</div>
  • CSS 代码：
.parent {
   width: 200px;
   height: 200px;
   border: 1px solid black;
 }
.child {
   position: relative;
   top: 10px;
   left: 10px;
 }
  • 绝对定位的弹出式菜单
    • HTML 代码：
<nav>
  <ul>
    <li>
      <a href="#">菜单1</a>
      <ul class="sub - menu">
        <li><a href="#">子菜单1 - 1</a></li>
        <li><a href="#">子菜单1 - 2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单2</a></li>
  </ul>
</nav>
  • CSS 代码：
 nav ul {
   list - style: none;
   margin: 0;
   padding: 0;
 }
 nav li {
   position: relative;
   display: inline - block;
 }
.sub - menu {
   position: absolute;
   top: 100%;
   left: 0;
   display: none;
 }
 nav li:hover.sub - menu {
   display: block;
 }
  • 固定定位的导航栏
    • HTML 代码：
<header class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</header>
<div class="content">
  <p>这是页面的主要内容，很长很长的内容，可以让页面产生滚动条。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
</div>
  • CSS 代码：
.navbar {
   position: fixed;
   top: 0;
   width: 100%;
   background - color: #333;
   color: white;
 }
.content {
   margin - top: 50px; /* 为导航栏留出空间 */
 }

三、弹性盒子布局（Flexbox）

  1. 原理
    • 弹性盒子布局是一种一维的布局模型。通过将容器（父元素）设置为display: flex或display: inline - flex，它的子元素（弹性项目）可以在这个容器中按照一定的规则进行排列，如水平或垂直方向的对齐、分配空间等。主要的属性包括flex - direction（定义主轴方向）、justify - content（在主轴上对齐方式）、align - items（在交叉轴上对齐方式）等。
  2. 应用场景
    • 导航栏布局：可以方便地将导航栏中的链接在水平方向上均匀分布，并且可以很容易地实现垂直居中对齐。
    • 响应式布局组件排列：在制作响应式页面时，弹性盒子可以根据屏幕大小自动调整组件之间的间距和排列方式。例如，在移动设备上，原本水平排列的组件可以很容易地切换为垂直排列。
  3. 实操示例
    • 导航栏布局
      • HTML 代码：
<nav class="navbar - flex">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
  <a href="#">联系我们</a>
</nav>
  • CSS 代码：
.navbar - flex {
   display: flex;
   justify - content: space - around;
   align - items: center;
   background - color: #333;
   color: white;
 }
.navbar - flex a {
   text - decoration: none;
   color: inherit;
 }
  • 响应式组件排列
    • HTML 代码：
<div class="container - flex">
  <div class="box">组件1</div>
  <div class="box">组件2</div>
  <div class="box">组件3</div>
</div>
  • CSS 代码：
.container - flex {
   display: flex;
   flex - wrap: wrap;
   justify - content: space - between;
 }
.box {
   width: 300px;
   height: 200px;
   background - color: #ccc;
   margin - bottom: 20px;
 }
 @media (max - width: 768px) {
  .box {
     width: 100%;
   }
 }
avatar
文章
阅读
粉丝