当前位置：首页 > article >正文

前端【3】--CSS布局，CSS实现横向布局，盒子模型

article 2025/1/17 11:35:07

盒子分类

1、块级盒子

2、内联级盒子

3、内联块级盒子

4、弹性盒子

5、盒子内部分区

方法一：使用 float 普通盒子实现横向布局

方法二：使用 display: inline-block 内联块级元素实现横向布局

方法三：使用弹性盒子 flexbox（推荐）

1、父级属性：

2、子级属性：

示例：

往期文章：

前端【2】html添加样式、CSS选择器-CSDN博客

盒子分类

1、块级盒子

块级元素布局：块级元素的特性，独占一行，竖向排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            margin: 10px 0; /* 上下间距 */
        }
    </style>
</head>
<body>
 <!-- 块级元素：独占一行,竖着布局对宽度高度支持 display:block -->
    <div>块级元素 1</div>
    <div>块级元素 2</div>
    <p>段落文本</p>
    <h1>标题</h1>
</body>
</html>

2、内联级盒子

内联元素的特性：不独占一行，对宽高不支持，行内元素连续排列。

<body>
<!-- 内联级元素 不独占一行 对宽度高度不支持 display: inline -->
    <span>内联元素 1</span>
    <span>内联元素 2</span>
    <a href="#">超链接</a>
</body>

3、内联块级盒子

内联块级元素的特性：不独占一行，但支持宽高设置，连续排列。

 <!-- 内联块级级元素 不独占一行 对宽度高度支持 display:inline-block -->
     <img src="material/蒲公英.png" alt="">
     <img src="material/蒲公英.png" alt="">
     <img src="material/蒲公英.png" alt="">

4、弹性盒子

弹性盒子（Flexbox）的特性：子元素默认横向排列，可灵活控制布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <style>
        .container {
            display: flex; /* 弹性盒子 */
            width: 600px;
            height: 200px;
            background-color: yellow;
            justify-content: space-between; /* 子元素之间平均分布 */
            align-items: center; /* 垂直方向居中 */
        }
        .container div {
            width: 150px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>子元素 1</div>
        <div>子元素 2</div>
        <div>子元素 3</div>
    </div>
</body>
</html>

5、盒子内部分区

CSS页面布局（超详解）_css布局-CSDN博客----推荐博客~~

每个元素的盒子由以下四个部分组成：

1. 内容区 (Content)

元素的实际内容（如文字、图片等）所在的区域。
它的大小由 width 和 height 属性决定。

2. 内边距 (Padding)

内容与边框之间的距离。
使用 padding 属性设置，可以单独设置上下左右的内边距。

3. 边框 (Border)

环绕内容区和内边距的边界。
使用 border 属性设置，定义边框的宽度、样式和颜色。

4. 外边距 (Margin)

元素与其他元素之间的距离。
使用 margin 属性设置，可以单独设置上下左右的外边距。

这里放一张名图：

浏览器默认给外边距和内边距设置一定的初值，可以对margin和padding的值来改变其样式，其代码如下:
*{              /*通用选择器，选择所有元素*/
    margin:0;  /*外边距清0*/
    padding:0; /*内边距清0*/
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型示例</title>
    <style>
        .box {
            width: 200px;                /* 内容区宽度 */
            height: 100px;               /* 内容区高度 */
            background-color: lightblue; /* 内容区背景色 */

            padding: 20px;               /* 内边距 */
            border: 10px solid blue;     /* 边框 */
            margin: 30px auto;           /* 外边距：上下30px，左右居中 */
        }

        body {
            background-color: #f5f5f5;   /* 页面背景色 */
        }
    </style>
</head>
<body>
    <div class="box">内容区</div>
</body>
</html>

在前端布局开发中，我们经常需要对元素进行横向布局。实现横向布局的方法有很多，从传统的 float 到现代的 flexbox，每种方式都有其特点和适用场景。本文将对三种常见方法进行详细介绍，分析它们的优缺点，并推荐最佳实践。

方法一：使用 `float` 普通盒子实现横向布局

通过为子元素设置 float 属性可以实现横向布局：

float: left; 子元素左浮动。
float: right; 子元素右浮动

存在的问题：父级元素高度坍塌：使用 float 后，父级元素的高度不会被子元素撑开，可能导致后续元素向上移动。

解决方法

设置父级高度：手动为父级元素设置固定高度，如 height: 150px;。但固定高度难以灵活适配内容。
清除浮动：
- 给父级元素添加 overflow: hidden;，使父级高度随子级内容变化。

无法解决的问题：

1、子级元素均分父级元素需要计算设置宽度，但不一定能均分

2、子级元素想要在父级元素内均匀分布需要计算设置 margin，但不一定能均匀分布

3、书写比较繁琐，代码冗余

方法二：使用 `display: inline-block` 内联块级元素实现横向布局

将子元素设置为 inline-block，让其表现为块状元素，同时可以像文本一样在一行内排列。

存在的问题：空白间隙--inline-block 布局的子元素之间若存在换行符，会被浏览器解析为空白符，导致子元素之间有多余间隙。