CSS的一些布局技巧学习 | 青训营

kirin
64 阅读3分钟

青训营学习记录笔记

01 CSS布局基本知识

​ 层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用于定义网页的样式和布局。通过CSS，可以控制网页元素的颜色、大小、字体、边框、背景等等。CSS可以与HTML结合使用，使网页呈现出美观的外观和布局。用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

02 CSS布局技巧

2.1 浮动（Float）

​ 浮动（Float）是CSS中最常用的布局技巧之一。通过设置元素的浮动属性，可以使元素脱离文档流，并使其他元素环绕在其周围。这在创建多列布局、图文混排等场景中非常有用。

​ 可以使用float: left或float: right将元素浮动到左侧或右侧。需要注意的是，浮动元素会影响其父元素的高度计算，需要清除浮动以避免布局混乱。

2.2 定位（Positioning）

​ 定位（Positioning）是一种更精确的布局技巧。通过设置元素的定位属性，可以将元素放置在页面的指定位置。常见的定位属性有position: static、position: relative、position: absolute和position: fixed。其中，position: relative相对于元素原本的位置进行定位，position: absolute相对于最近的具有定位属性的父元素进行定位，position: fixed相对于浏览器窗口进行定位。定位技巧常用于创建悬浮菜单、对话框等效果。

2.3 弹性盒子布局（Flexbox）

​ 弹性盒子布局（Flexbox）是CSS3中引入的新特性，用于创建灵活的布局。通过设置容器元素的display: flex，可以将其内部的子元素排列为一行或一列，并根据需要伸缩和对齐。弹性盒子布局非常适用于响应式设计和移动端布局。实操实践时，可以使用flex-direction、justify-content和align-items等属性来控制子元素的排列和对齐方式。

03 CSS布局实践

接下来，进行CSS布局的实践案例学习，首先创建好HTML结构：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="box float-left">浮动元素1</div>
    <div class="box float-right">浮动元素2</div>
    <div class="box position-relative">相对定位元素</div>
    <div class="box position-absolute">绝对定位元素</div>
    <div class="flex-container">
      <div class="box">弹性盒子1</div>
      <div class="box">弹性盒子2</div>
      <div class="box">弹性盒子3</div>
    </div>
  </div>
</body>
</html>

然后创建style.css进行CSS布局

.container {
  width: 800px;
  margin: 0 auto;
}

.box {
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 200px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
  top: 50px;
  right: 50px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

在本次案例实践代码里，首先创建了一个容器，并在其中放置了浮动元素、定位元素和弹性盒子元素。通过设置元素的class属性和CSS样式，实现了不同的布局效果。

image-20230816102624328.png

浮动元素1和浮动元素2分别使用了float: left和float: right来实现左浮动和右浮动。

相对定位元素使用了position: relative来进行相对定位。

绝对定位元素使用了position: absolute和top、right属性来进行绝对定位。

弹性盒子容器使用了display: flex来创建弹性盒子布局，并使用justify-content: space-between来实现子元素之间的间距。

avatar
文章
阅读
粉丝