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

六个点
638 阅读5分钟

一. css布局的基本概念

1.1 盒模型

在学习css布局之前，我们需要掌握一些基本概念：

盒模型（Box Model）：每个HTML元素都可以看作是一个矩形的盒子，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。如以下例子，

<style>
    * {
      box-sizing: border-box;  /* 消除内边距和边框对盒子大小的影响 */
    }

    .father {
      margin-left: 300px;
      margin-top: 100px;
      padding-left: 160px;
      padding-top: 150px;
      width: 500px;
      height: 400px;
      background-color: pink;
      border: 8px solid skyblue;
    }
 </style>
 
<body>
  <div class="father">我是盒子里面的内容</div>
</body>

c2c2ee2679df1a3b41e1330193663fc.png

1.2 文档流

文档流就是是HTML页面中元素排列的默认方式（从左到右，从上到下），HTML标签分为块级元素和行内元素。

  1. 块级元素：独占一行，可以设置其宽高，常见的块级元素有<div>，<p>，<h>，<ul>，<ol>，<li>等
  2. 行内元素：占不了一行，不可以设置它的宽高，宽高为其内容的宽高，常见的行内元素包括<span>，<a>，<img>, <strong>, <em> 等。请看以下例子；

image.png

image.png

image.png

image.png

当然也可以通过添加display:block将行内元素改为块级元素，通过display:inline将块级元素改为行内元素，通过display:inline-block改为行内块元素（同时拥有行内和块属性）。例如； image.png image.png

二. 浮动布局

浮动布局是通过CSS的float属性来实现的。当对一个元素应用float属性时，该元素会脱离正常的文档流，并向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。浮动元素会影响其后的元素，但不会影响之前的元素。例如给粉色盒子加了float:left;向左浮动（上下左右都可以设置），使得粉色盒子脱离了正常的文档流，不再占有原文档流位置，所以下面的蓝色盒子会顶上原粉色盒子的位置。 image.png

11a3b27a2b61ce7bf6b17af989aa358.png

常用于文字环绕效果：

image.png

因为浮动的元素会脱离文档流，父盒子失去高度，也就是会发生覆盖现象，这就需要清除浮动（让父盒子有高度）。

  • 给浮动元素添加高度。
  • 在浮动元素最末尾添加子容器，在子容器上添加clear:both用来清除浮动。
  • 添加伪元素清除浮动（如下）。
xxx::after {
    content: "";
    clear: both; 
    display: block; 
    }

三. 定位布局

定位可以将元素从文档流中取出，即不占据原有的文档流位置。凡是加了定位属性（position:）的元素，就会脱离原有的文档流位置 （称为 脱标 ）。包括以下几个定位；

  1. 相对定位：position:relative; 以该容器自身原本的文档流的位置作为参考，将容器移动
  2. 绝对定位：position: absolute; 以拥有position属性的父容器作为参考（ 子绝父相 ）

image.png

以上例子，由于父容器box设置了position:relative;相对定位，所以box就会相对于原来的位置根据设置的left:70px;和top:80px;移动，而子容器child设置了position:position;绝对定位，则会去找父容器中是否有position属性，只要含position属性即以它为参照移动left:60px;和top:50px;,则结果显示如下图所示；

786eeb46a2624a3f23524681bed52a5.png

  1. 固定定位：position:fixed;定义了弹性子项在主轴上的对齐方式n：fixed; 以浏览器的可视窗口为参考定位。固定定位的元素也会脱离文档流，且其位置不会随着页面的滚动而改变。
  2. 粘性定位：position: sticky; 以浏览器的可视窗口为参考（在窗口内是可以滚动的位置的）。滚动到特定位置之前表现为相对定位，滚动到特定位置时则表现为固定定位。

如下，想要在右侧也放上一个如左图一样的优惠券领取。 9a967f55c7e4b8319a121399a44b0df.png

image.png

结构为一个box容器里面装了一张图片以及一个优惠券（ticket盒子），想让优惠券显示在图片的右下角就可以用到定位了，html结构是

<div style="height: 404px;width: 272px;" class="box">
    <img src="./img.png" alt="">
    <div class="ticket">
      <span class="left">￥10</span>
      <span class="right">领取</span>
    </div>
  </div>

所以我们只需要给父容器box设置一个相对定位，给ticket设置一个绝对定位，再设置偏移值即可，如下；

image.png

四. 弹性布局（flex布局）

  1. display:flex;将一个元素定义为弹性盒子 96e5d3a77bb0db5db0f246f294d7217.png
  2. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;定义盒子里面的子项主轴（默认x轴）上的对齐方式，当子项总宽度小于弹性盒子宽度时生效。f035f06bcbd4c6f07aac40969041a90.jpg
  3. align-items: stretch | flex-start | flex-end | center | baseline;定义了弹性子项在交叉轴上的对齐方式

785831b3e52e83ba4bbc42d8369d48c.jpg align-items:baseline 将所有直接子元素沿着它们的基线对齐（如下）。

image.png

  1. flex-direction: x || y;定义主轴的方向（默认为x轴）
  2. flex-wrap: nowrap | wrap | wrap-reverse;定义如果一行放不下所有弹性子项，是否换行（默认为不换行），与 wrap 值相比，wrap-reverse 会使得新行在当前行的上方开始堆叠，而不是下方（反向堆叠）。

f6eded2b2690c73ed848eae7f1628cd.png

image.png 6. align-content: stretch | flex-start | flex-end | center | space-between | space-around;当有 多行 弹性子项时，定义了这些行在交叉轴（默认垂直）上的对齐方式

image.png 7. flex:1 定义弹性子项的放大比例，即如果存在剩余空间，子项应该放大的比例

image.png image.png

五. 总结

  • 盒模型：描述了HTML元素如何在其周围分配空间，包括内容、内边距、边框和外边距。
  • 文档流：指HTML页面中元素默认的排列方式，从左到右，从上到下。块级元素独占一行，行内元素占一行内的一部分。
  • 浮动布局：通过float属性实现，使元素脱离正常文档流，向左或向右移动，不过会影响后续元素。
  • 定位布局：通过position属性将元素从文档流中取出，包括相对定位、绝对定位、固定定位和粘性定位。
  • 弹性布局（Flex布局） ：通过display: flex;属性定义弹性盒子，以及相关属性如justify-content, align-items, flex-direction, flex-wrap, align-content, flex等，实现灵活、响应式的布局。
avatar
文章
阅读
粉丝