css布局（盒子，浮动，定位position，弹性盒子flex)

左牵黄,右擎苍

已于 2024-07-11 03:34:27 修改

阅读量1k

点赞数 18

文章标签： css 前端

于 2023-04-14 18:59:45 首次发布

本文链接：https://blog.csdn.net/m0_74854911/article/details/130158905

版权

本文详细介绍了CSS布局中的盒子模型，包括内容区、边框、内边距和外边距；浮动布局的概念及应用；定位布局的静态、相对和绝对定位；以及弹性盒子模型的常见属性和对齐方式，帮助开发者更好地理解和运用CSS布局。

摘要由CSDN通过智能技术生成

目录

前言

一、盒子布局

相关属性

1，内容区（content）

2，边框（border）

3，内边距（padding）

3，外边距（margin）

二、浮动布局

三，定位布局position

1，position:static静态定位。

2，position:relative相对定位。

3，position:absolute绝对定位。

四，弹性盒子flex

常见的flex属性

在Flex容器中对齐Flex项目

沿主轴对齐Flex项目

沿横轴对齐Flex项目

前言

CSS 定义如何显示HTML 元素，用于控制Web页面的外观。实现页面的内容与表现形式分离，提高效率。

一、盒子布局

元素占空间的矩形元素框，看作是一个盒子。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，内容区（content）、填充(padding)、边框(border)和空白外边距(margin)。

1，内容区（content）

内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

2，边框（border）

边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS有dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

3，内边距（padding）

内容区和边框之间的空间。填充的属性有五种，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。

3，外边距（margin）

位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。对于两个相邻的（水平或垂直方向）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素分类</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* display: inline; */
}
a{
width: 100px;
height: 100px;
border: 1px solid black;
display: block;
}
.one{
/* width: 100px;
height: 100px;
background-color: red;
display: none; */
width: 0;
}
</style>
</head>
<body>
<div class="one"></div>
<div>这二div</div>
<a href="#">1</a>
<a href="#">2/a>
<a href="#">3</a>
</body>
</html>

二、浮动布局

让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">一div</div>
<div class="box2">二div</div>
<div class="box3">三div</div>
</body>
<html>

三，定位布局position

浮动元素因为存在于正常的文档布局流之外，所以他们在父元素中所占的面积的有效高度为0，非浮动元素的外边距不能用于它们和浮动元素之间来创建空间，可以使用一个空白的div，对其使用clear：both进行浮动的清除

1，position:static静态定位。

每个元素获取的默认值，意味着将元素放入它在文档布局流中的正常位置上，不改变原始布局

2，position:relative相对定位。

相对于父元素（上一个元素）为参照物，其他元素不受影响

3，position:absolute绝对定位。

元素脱离了文档流，不占据空间(变成阿飘浮在上面或者藏在下面)，相对于最近的非static祖先元素定位，如果在body下直接设置absolute，元素还是处于当前位置上，不过这个元素之后的其他元素可能会把它给覆盖掉。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
/* position:absolute;
top: 100px;
left: 200px; */
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
position: relative;
left: 200px;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>

四，弹性盒子flex

打开flex布局，只需要设置display:flex

常见的flex属性

每个元素获取的默认值，意味着将元素放入它在文档布局流中的正常位置上，不改变原始布局

flex-direction:row/column/row-reverse/column-reverse/initial/inherit：控制弹性盒子的排列方向

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-direction: column-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>

flex-wrap:nowrap/wrap/wrap-reverse/initial/inherit：控制子元素整体宽/高超出父元素宽/高时需要拆行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-wrap: wrap-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
</div>
</body>
</html>

flex-flow：flex-direction + flex-wrap\n\nflex-grow：填写一个数字，规定弹性子元素相对于其他子元素进行扩展的量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
/* flex-flow: column-reverse wrap; */
flex-direction: column-reverse;
flex-wrap: wrap;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
<div class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
</div>
</body>
</html>

flex-shrink：填写一个数字，定义子元素在超过父元素大小的缩放比例\

flex-basis：规定子元素的初始长度

flex：flex是flex-grow, flex-shrink和flex-basis的结合

flex-basis是每个子元素的原始宽度，根据原始子元素的宽度和跟父元素的宽度进行比较，来计算子元素的真实宽度，最后展现出来的子元素是按照父元素宽度布局的。

flex容器(flex container)和flex子项(flex item)：前者是设置了display:flex的父元素（这个元素的子元素都按照flex布局来排列啦），后者就是这个父元素的子元素们

在Flex容器中对齐Flex项目

有四个属性justify-content，align-content，align-items和align-self指定弹性容器内的弹性项目的对准。其中的前三个适用于flex容器，而最后一个适用于单个flex项目。

沿主轴对齐Flex项目

使用justify-content属性，可以将伸缩项沿伸缩容器的主轴（即在水平方向上）对齐。通常在弹性项目未使用主轴上所有可用空间的情况下使用。

justify-content属性接受以下值：

flex-start-默认值。弹性项目放置在主轴的起点。
flex-end -Flex项目位于主轴的末端。
center - Flex的项目放置在主轴线的与等量的自由空间在两端的中心。如果剩余的自由空间为负，即项目溢出，则弹性项目将在两个方向上均等溢出。
space-between -的Flex项都沿着主轴线，其中第一项放置在主起始沿和最后一个放置在主端均匀地分布。如果项目溢出或只有一项，则此值等于flex-start。
space-around -Flex项在两端均以一半大小的空间均匀分布。如果它们溢出或只有一项，则此值等于center。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex项目沿着主轴对齐示例 -基础教程 (cainiaojc.com)</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
	font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    /* Standard syntax */
    display: flex;
    justify-content: space-around;
}
.flex-container div{
    padding: 10px;
}
.item1 {
    width: 75px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>

沿横轴对齐Flex项目

可以使用align-items或align-self属性沿Flex容器的横轴（即垂直方向）对齐Flex项目。但是，在将align-items应用于flex容器时

flex-start — Flex项目位于交叉轴的起点。
flex-end — Flex项目位于交叉轴的末端。
center —伸缩项放置在横轴的中心，两端具有相等的可用空间。如果剩余的自由空间为负，即项目溢出
baseline —每个弹性项目的文本基准（或内联轴）与最大的弹性项目的基线对齐font-size。
Stretch —伸缩项目将拉伸以填充当前行或列，除非由最小和最大宽度或高度阻止。align-items属性的默认值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex项目沿着十字轴对齐示例- (cainiaojc.com) 基础教程</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
	font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-items: center;
    /* Standard syntax */
    display: flex;
    align-items: center;
}
.flex-container div{
    padding: 10px;
}
.item1 {
    width: 75px;
    height: 100px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    height: 200px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    height: 150px;
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>