css常见布局方式

Crrrrrr9

已于 2023-04-13 14:28:07 修改

阅读量378

点赞数 2

文章标签： css html 前端

于 2023-04-13 14:26:12 首次发布

本文链接：https://blog.csdn.net/Crrrrrr9/article/details/130121364

版权

1.盒子布局

每个HTML元素都相当于一个矩形的“盒子”。

上图为CSS的盒子模型，由里到外由代码分别表示为;

content(内容）

padding（内边距）

border（边框）

margin(外边距)

如要对盒子边框进行编辑可参考以下代码：

边框粗细：border-width

边框样式：border-style

边框颜色：border-color

如要对盒子内（外）边距进行编辑可参考以下代码：

padding-top:设置上边的边距

padding-left:设置左边的边距

padding-right:设置右边的边距

:padding-bottom:设置下边的边距

<!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;
            background-color: aqua;
            border-bottom: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>这是一个6</div>
</body>
</html>

2.浮动布局

利用float属性来使元素进行浮动。

float-left:元素左浮动

float-right:元素右浮动

float-none:元素不浮动

<!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: aqua;
            float: left;
         }
         .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: green;
            float: left;
         }
         .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            float: left;
         }
    </style>
</head>
<body>
    <div class="box1">这是一个div</div>
    <div class="box2">这是二个div</div>
    <div class="box3">这是三个div</div>
</body>
</html>

3.定位布局

利用position设置元素的定位方式：

1.static：没有设置定位（默认位置）

2.absolute：将元素从文档流分离出来，通过:

absolute-left（左边）

absolute-right（右边）

absolute-top（上边）

absolute-bottom（下边）

四个代码来实现元素相较于父级元素的相对位置。注：不存在父级时，body是父级。

3.relative:元素不从文档流中分离出来，通过：

relative-left()

relative-right()

relative-top()

relative-bottom()

四个代码来实现元素相较于自身的相对位置。

<!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>

<!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>
.main{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 200px;
position: relative;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
position:absolute;
top: 100px;
left: 200px;
}
.box2{
width: 100px;
height: 100px;
border: 1px solid black;
background-color: blue;
/* position: relative;
left: 200px; */
}
.box3{
width: 100px;
height: 100px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</div>
</body>
</html>

4.弹性盒子

（1）基本概念：

弹性盒子是由弹性容器(Flexible或Flexbox)或者弹性元素（Flex-item）组成。

通常利用display来设置属性——display：flex

注：一个弹性盒子可以包含多个弹性元素

<!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-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>

（2）常见元素：

1.flex-direction——指的是弹性容器中子元素的排列方式；

用row，row-reverse，column，column-reverse来替换direction可改变排列方式。

<!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>

2.flex-wrap——指的是弹性容器中子元素超出父容器时是否换行；

可用：

nowwrap——默认元素，规定弹性元素不换行；

wrap——弹性元素在需要时会换行；

wrap-reverse——会换行，但是是反方向。

<!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 class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
<div class="flex-item">flex item10</div>
<div class="flex-item">flex item11</div>
</div>
</body>
</html

3.flex-flow:flex-direction和flex-wrap的缩写；

4.align-items:设置弹性容器在侧轴（纵轴）的对齐方式；

5.justify-content：设置弹性容器在主轴（横轴）的对齐方式；

6.align-conten:修改了flex-flow的行为，类似于align-items，是对齐的弹性线。