Flex布局和Float布局的实现

最新推荐文章于 2024-07-30 11:42:19 发布

Fran_klin__

最新推荐文章于 2024-07-30 11:42:19 发布

阅读量602

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Fran_klin__/article/details/133181423

版权

一、Flex布局：

1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>Flex布局</title>
    <style>
        /* 在这里编写CSS样式 */
    </style>
</head>
<body>
    <!-- 在这里编写Flex布局的HTML结构 -->
</body>
</html>

2.在`<style>`标签内编写CSS样式，定义Flex布局的属性。例如，可以使用以下样式来创建一个简单的水平居中布局：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

```
在这个例子中，`display: flex;`将body元素设置为使用Flex布局，`justify-content: center;`和`align-items: center;`将内容水平和垂直居中，`height: 100vh;`设置body元素的高度为整个视口的高度。

3.在`<body>`标签内编写HTML结构，以实现所需的Flex布局。例如，可以创建一个包含两个子元素的Flex容器：

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
</div>

4.在CSS样式中，为容器和子元素添加类选择器，并定义它们的样式。

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

.item {
    background-color: lightblue;
    padding: 10px;
}

```
在这个例子中，`.container`类应用于容器元素，设置其为Flex布局，并使用`justify-content: space-between;`将子元素在容器内水平排列，并在它们之间留有空白间距。`.item`类应用于子元素，并设置背景色和内边距。

5.保存HTML文件，并使用VS Code的Live Server扩展或直接在浏览器中打开HTML文件以查看Flex布局的效果。

二、Float布局：

1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>Float布局</title>
    <style>
        /* 在这里编写CSS样式 */
    </style>
</head>
<body>
    <!-- 在这里编写Float布局的HTML结构 -->
</body>
</html>

2.在`<style>`标签内编写CSS样式，定义Float布局的属性。例如，可以使用以下样式来创建一个简单的左浮动布局：

body {
    overflow: hidden;
}

.left {
    float: left;
    width: 50%;
}

.right {
    float: right;
    width: 50%;
}

在这个例子中，`body`元素的`overflow: hidden;`属性用于清除浮动，以便正确包含浮动元素。`.left`和`.right`类选择器分别应用于左浮动和右浮动的元素，并使用`width`属性设置宽度为50%。

3.在`<body>`标签内编写HTML结构，以实现所需的Float布局。例如，可以创建一个包含左浮动和右浮动元素的布局：

<div class="left">
    <!-- 左浮动的内容 -->
</div>
<div class="right">
    <!-- 右浮动的内容 -->
</div>

4.保存HTML文件，并使用VS Code的Live Server扩展或直接在浏览器中打开HTML文件以查看Float布局的效果。

Fran_klin__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Flex布局和Float布局的实现

一、Flex布局：

1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：

2.在<style>标签内编写CSS样式，定义Flex布局的属性。例如，可以使用以下样式来创建一个简单的水平居中布局：

3.在<body>标签内编写HTML结构，以实现所需的Flex布局。例如，可以创建一个包含两个子元素的Flex容器：

4.在CSS样式中，为容器和子元素添加类选择器，并定义它们的样式。

5.保存HTML文件，并使用VS Code的Live Server扩展或直接在浏览器中打开HTML文件以查看Flex布局的效果。

二、Float布局：

1.创建一个新的HTML文件。在HTML文件中输入以下基本结构：

2.在<style>标签内编写CSS样式，定义Float布局的属性。例如，可以使用以下样式来创建一个简单的左浮动布局：

3.在<body>标签内编写HTML结构，以实现所需的Float布局。例如，可以创建一个包含左浮动和右浮动元素的布局：

4.保存HTML文件，并使用VS Code的Live Server扩展或直接在浏览器中打开HTML文件以查看Float布局的效果。

2.在`<style>`标签内编写CSS样式，定义Flex布局的属性。例如，可以使用以下样式来创建一个简单的水平居中布局：

3.在`<body>`标签内编写HTML结构，以实现所需的Flex布局。例如，可以创建一个包含两个子元素的Flex容器：

2.在`<style>`标签内编写CSS样式，定义Float布局的属性。例如，可以使用以下样式来创建一个简单的左浮动布局：

3.在`<body>`标签内编写HTML结构，以实现所需的Float布局。例如，可以创建一个包含左浮动和右浮动元素的布局：