14、讲解CSS布局的基本概念，包括浮动、定位、display属性等

第14课：讲解CSS布局的基本概念，包括浮动、定位、display属性等

CSS的布局是指如何把多个页面元素的位置和大小安排好，以呈现出我们想要的网页效果。CSS布局有很多种实现方式，其中比较常用的有浮动、定位、display属性等。

浮动是一种相对简单的布局方法，它可以将某个元素沿着页面环绕着另一个元素的边缘靠左或者靠右放置。我们可以将某个元素设置为float:left或者float:right即可实现浮动布局。

下面是一个简单的例子：

<div>
    <img src="image.jpg" alt="图片" style="float:left;width:50%;"/>
    <p style="float:left;width:50%;">这是一段文字，用于测试浮动布局。</p>
</div>

在这个例子中，我们使用了一个div元素包裹了一张图片和一个段落（p）元素。我们将图片设置为左浮动，将段落设置为右浮动，这样就可以让图片和段落分别占据一行，同时实现了页面环绕效果。

定位是另一种比较常用的布局方式。它可以让我们将某个元素精确定位于页面中的某一个位置。我们可以使用position属性来定义一个元素的定位方式，有三种取值：static（默认值）、relative、absolute。

static表示元素的位置将按照文档流的默认排列方式进行布局，而不会受到任何偏移值的影响；relative表示元素的位置将按照文档流的默认排列方式进行布局，但是可以通过top、right、bottom和left属性来设置其相对于文档流初始位置的偏移值；absolute表示元素的位置是相对于最近的已定位元素（即position属性值不为static的元素）进行定位的，或者相对于文档的body元素进行定位的。我们可以使用top、right、bottom和left属性来设置相对于定位父元素的偏移值。

下面是一个简单的例子：

<div style="position:relative;width:200px;height:200px;background-color:#ccc;">
    <div style="position:absolute;top:50px;left:50px;width:100px;height:100px;background-color:#f00;"></div>
</div>

在这个例子中，我们创建了一个div元素，使用了position:relative属性使其成为了一个已定位元素。我们还在这个div元素中创建了另一个div元素，使用了position:absolute属性和top、left属性分别将其定位在了父元素的中央位置。

display属性是一种比较灵活的布局方式，它可以让我们将某个元素按照不同的形式进行显示。常用的取值有block、inline、inline-block、flex等。其中，block表示将元素作为块级元素进行显示，即它将占据一整行；inline表示将元素作为行内元素进行显示，即它将只占据所需的宽度；inline-block则表示将元素作为行内块级元素进行显示，即它将占据所需的宽度同时也具有块级元素的一些特性；flex则表示使用弹性盒子布局，可以通过定义方向（水平或垂直）、对齐方式、元素排列方式等实现更加复杂的布局效果。

下面是一个简单的例子：

<div style="display:flex;justify-content:center;align-items:center;width:200px;height:200px;background-color:#ccc;">
    <div style="width:100px;height:100px;background-color:#f00;"></div>
</div>

在这个例子中，我们使用了display:flex属性将一个div元素设置为了弹性盒子布局。我们在这个盒子中再创建了另一个div元素，使用了一个固定的大小，作为弹性盒子中的子元素。我们还使用了justify-content:center和align-items:center属性将弹性盒子中的子元素居中显示。