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-contentalign-itemsflex-directionflex-wrapalign-contentflex等,实现灵活、响应式的布局。