css布局方式

heibailin

已于 2023-04-15 21:01:39 修改

阅读量416

点赞数

文章标签： css css3

于 2023-04-15 21:01:35 首次发布

本文链接：https://blog.csdn.net/m0_74385608/article/details/130124025

版权

目录

前言

一、布局

1、盒子布局

         1.1 盒子

         1.2方向

         1.3边框

2、元素的分类

3、浮动布局

4、定位布局

5、其他属性

         5.1overflow

        5.2zoom

6、弹性盒子

         6.1弹性盒子常见的属性

                 6.1.1 flex-direction

                6.1.2 flex-wrap

                6.1.3 flex-flow

                6.1.4 align-items

                 6.1.5 justify-content

                 6.1.6 align-content

总结

前言

最近在学css的布局方式，所以就来聊聊布局吧

一、布局

1、盒子布局

1.1盒子

正如他的名字一样盒子布局就是用一个一个的盒子来进行布局，它是通过标签div来实现的，然后在通过css对他的样式进行改变，比如说盒子的宽高，盒子的外边距内边距，盒子的背景等等。因为要聊聊布局所以先来讲与盒子布局有关的几个属性：分别是

内边距--------padding(内容距离边框的距离上右下左)

边框-----------boder

外边距--------margin(边框距离页面的距离)

距离的大小通过下面两种方式实现：

像素的大小如margin 50px表示外边距50个像素，

或者百分比如margin 50%表示外边距距离网页的一半。

代码如下：

<!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>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        .two{
            width: 100px;
            height: 100px;
            margin: 50px;
            border: 1px solid black;
        }
        .there
        {
            width: 100px;
            height: 100px;
            padding: 10%;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="one">我是位置正常的盒子</div>
    <div class="two">我是内边距为50px的盒子</div>
    <div class="there">我是外边距10%的盒子</div> 
</body>
</html>

运行结果如下：

1.2方向

外边距，内边距，边框，都是可以指定某一边来进行修饰的只需要后面加以下代码

-left 表示左边

-right 表示右边

-top 表示顶部

-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>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        .two{
            width: 100px;
            height: 100px;
            margin-top:50px;
            border: 1px solid black;
        }
        .there
        {
            width: 100px;
            height: 100px;
            padding-left: 10%;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="one">我是位置正常的盒子</div>
    <div class="two">我是内边距距顶部为50px的盒子</div>
    <div class="there">我是外边距左边10%的盒子</div> 
</body>
</html>

运行结果如下：

1.3边框

边框 border有以下属性

代码如下：

<!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>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            border:none;
        }
        .two{
            width: 100px;
            height: 100px;
            border:hidden;
        }
        .there
        {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        .four
        {
            width: 100px;
            height: 100px;
            border: 1px dashed black;
        }
        .five
        {
            width: 100px;
            height: 100px;
            border: 1px dotted red;
        }
    </style>
</head>
<body>
    <div class="one">无边框</div>
    <div class="two">无边框</div>
    <div class="there">实线边框</div> 
    <br>
    <div class="four">虚线边框</div>
    <br> 
    <div class="five">点状边框</div> 
</body>
</html>

运行结果如下：

2、元素的分类

块级元素 ------- 独占一行(自动换行) div p hn hr 可以设置宽度和高度

行内元素（内联） ------ 不会自动换行 a span 不可以设置宽度和高度（不起作用）

display可以实现块级元素和行内元素之间互换

属性取值：

none ----- 表示不会被显示，隐藏元素的方式之一

block ----- 将元素变为块级元素，也会自动换行（默认有个换行符）

inline ----- 将元素变为行内元素

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        a{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        .one{
            width: 100px;
            height: 100px;
            display: inline;
        }
        .two{
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
    <div>我是块级标签我会自动换行</div>
    <div>我是块级标签我会自动换行</div>
    <div class="one">我是块级标签我会自动换行但我被变成了内行标签</div>
    <div class="one">我是块级标签我会自动换行但我被变成了内行标签</div>
    <a href="#">我是行内标签我不会自动换行</a>
    <a href="#">我是行内标签我不会自动换行</a>
    <a href="#" class="two">我是行内标签我不会自动换行但我被变成了块级标签</a>
    <a href="#" class="two">我是行内标签我不会自动换行但我被变成了块级标签</a>
</body>
</body>
</html>

运行结果如下：

3、浮动布局

通过float属性去设置浮动布局

取值：

left（靠左浮动）

none(不浮动)

right(靠右浮动)

注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响

如果要消除这种影响（消除浮动）

通过clear属性

none:默认允许两边都可以浮动

left：不允许左边的浮动

right：不允许右边的浮动

both：不允许两侧有浮动

代码如下：

<!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>Document</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: blue;
            clear: both;
        }
        .box4{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: green;
            float:right;
        }
    </style>
</head>
<body>
  <div class="box1">我是靠左浮动 虽然看上没啥变化但我的下一个div受到了我的影响被我覆盖了</div>
  <div class="box2">我被影响了</div>
  <br>
  <div class="box1">我也是靠左浮动 但我下一个没影响</div>
  <div class="box3">通过cler both取消了影响</div>
  <div class="box4">我是靠右浮动</div>
    
</body>
</html>

运行结果如下：

4、定位布局

属性：position ------ 设置对象的定位方式

static ----- 静态定位（没有设置位置）

默认 absolute ------- 绝对定位：将对象从文档流中分离出来，设置left top right bottom这四个方向去设置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body，也就可以理解为外边距

relative ------ 相对定位：对象不从文档流中分离出来，设置left top right 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>Document</title>
    <style>
        .main{
            width: 600px;
            height: 600px;
            border: 1px solid black;
        }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 450px;
        }
        .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="main">
    <div class="box1">我是绝对定位的盒子</div>
  <div class="box2">我是相对定位的盒子</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>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: red;

        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: blue;
        }
        .box3{
            width: 100px;
            height: 100px;
            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>

运行结果如下：

这是文档流中正常的排序，

absolute会从文档流中分离出来，也就是说可以理解为在排序中少掉他一个进行排序，

relative不会从文档中分离出来，所以排序的时候还是会把它算上，但如果给它的top，left等等这些值时它可能不会在排序的位置上，但会留出它的位置

代码如下：

<!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>Document</title>
    <style>
        .main{
            width: 600px;
            height: 600px;
            border: 1px solid black;
        }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 450px;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;
            position: relative;
            left: 200px;
            top: 450px;
        }
        .box3{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="main">
    <div class="box1">我是绝对定位的盒子我从文档中分出来了</div>
  <div class="box2">我是相对定位的盒子</div>
  <div class="box3">我是静态定位的盒子我的上面是给相对定位的盒子留的位置</div> 
</div>
</body>
</html>

运行结果如下：

5、其他属性

5.1overflow

设置对象内容超过指定的高度或者宽度的时候如果管理它的内容

visible----- 默认值不剪切内容也不添加滚动条

auto ----- 在必需时对象才会被裁剪或者添加滚动条

hidden ----- 不显示超过对象尺寸的内容（会被隐藏）

scroll ---- 总会显示滚动条

<!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>Document</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            overflow:scroll;
        }
        .two{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            overflow:hidden;
        }
        .there{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div class="one">
        <img src="..\\images\哆啦A梦.jpg" alt="">
    </div>
    <div class="two">
        <img src="..\\images\哆啦A梦.jpg" alt="">
    </div>
    <div class="there">
        <img src="..\\images\哆啦A梦.jpg" alt="">
    </div>
</body>
</html>

运行结果如下：

5.2zoom

设置或者检索对象的缩放比例

normal : 默认值显示的是对象的实际尺寸

number: 百分比|无符号的浮点数浮点数为1.0相当于100%相当于取值为normal

代码如下：

<!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>Document</title>
<style>
.one{
zoom: 2.0;
}
</style>
</head>
<body>
<img src="..\\images\哆啦A梦.jpg" alt="">
<img class="one" src="..\\images\哆啦A梦.jpg" alt="">
</body>
</html>

运行结果如下：

6、弹性盒子

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

设置弹性容器是通过display属性进行设置，---------- display:flex或则inline-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>

运行结果如下：

6.1弹性盒子常见的属性

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

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

flex-flow ----flex- direction 和flex-wrap 的简写

align-items --- 设置的弹性容器中元素在侧轴(纵轴）的对齐方式

justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式

align-content-------修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线

6.1.1 flex-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>Document</title>
    <style>
        .flex-contain{
            width: 200px;
            height: 200px;
            background-color: orange;
            display: flex;
            flex-direction: row;
        }
        .flex-contain1{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: flex;
            flex-direction: row-reverse;
        }
        .flex-contain2{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-direction: column;
        }
        .flex-contain3{
            width: 200px;
            height: 200px;
            background-color: purple;
            display: flex;
            flex-direction: column-reverse;
        }
        .fext-item{
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid black;   
        }
    </style>
</head>
<body>
    <div class="flex-contain">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
    </div>
    <div class="flex-contain1">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
    </div>
    <div class="flex-contain2">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
    </div>
        <div class="flex-contain3">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
    </div>
</body>
</html>

运行结果如下：

6.1.2 flex-wrap

代码如下：

<!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>Document</title>
    <style>
        .flex-contain{
            width: 200px;
            height: 200px;
            background-color: orange;
            display: flex;
            flex-wrap: nowrap;
        }
        .flex-contain1{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: flex;
          flex-wrap: wrap;
        }
        .flex-contain2{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            flex-wrap: wrap-reverse;
        }
        .fext-item{
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid black;   
        }
    </style>
</head>
<body>
    <div class="flex-contain">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
    <div class="flex-contain1">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
    <div class="flex-contain2">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
</body>
</html>

运行结果如下：

6.1.3 flex-flow

flex-flow是direction 和flex-wrap 的简写也就是它两的融合体

代码如下：

<!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>Document</title>
    <style>
        .flex-contain{
            width: 200px;
            height: 200px;
            background-color: orange;
            display: flex;
            flex-flow: column-reverse wrap;
        }
        .fext-item{
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid black;   
        }
    </style>
</head>
<body>
    <div class="flex-contain">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
</body>
</html>

运行结果如下：

6.1.4 align-items

设置的弹性容器中元素在侧轴(纵轴）的对齐方式

代码如下：

<!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>Document</title>
    <style>
        .flex-contain{
            width: 200px;
            height: 200px;
            background-color: orange;
            display: flex;
            align-items: stretch;
            float: left;
        }
        .flex-contain1{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: flex;
            align-items: center;
            float: left;
        }
        .flex-contain2{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            align-items: flex-start;
    
        }
        .flex-contain3{
            width: 200px;
            height: 200px;
            background-color: purple;
            display: flex;
            align-items: flex-end;
            float: left;
        }
        .flex-contain4{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: flex;
            align-items: baseline;
        }
        .fext-item{
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid black;   
        }
    </style>
</head>
<body>
  
    <div class="flex-contain">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
    <div class="flex-contain1">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
    <div class="flex-contain2">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
    <div class="flex-contain3">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
    <div class="flex-contain4">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
        <div class="fext-item">flex item3</div>
        <div class="fext-item">flex item4</div>
        <div class="fext-item">flex item5</div>
    </div>
</body>
</html>

运行结果如下：

6.1.5 justify-content

设置的弹性容器中元素在主轴（横轴）的对齐方式

代码如下：

<!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>Document</title>
    <style>
        .flex-contain{
            width: 200px;
            height: 200px;
            background-color: orange;
            display: flex;
            justify-content: flex-start;
            float: left;
        }
        .flex-contain1{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: flex;
            justify-content: flex-end;
            float: left;
        }
        .flex-contain2{
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            justify-content: center;
    
        }
        .flex-contain3{
            width: 200px;
            height: 200px;
            background-color: purple;
            display: flex;
           justify-content: space-between;
           float: left;
        }
        .flex-contain4{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: flex;
            justify-content: space-around;
        }
        .fext-item{
            width: 50px;
            height: 50px;
            background-color: red;
            border: 1px solid black;   
        }
    </style>
</head>
<body>
  
    <div class="flex-contain">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
    </div>
    <div class="flex-contain1">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
    </div>
    <div class="flex-contain2">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
    </div>
    <div class="flex-contain3">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
    </div>
    <div class="flex-contain4">
        <div class="fext-item">flex item1</div>
        <div class="fext-item">flex item2</div>
    </div>
</body>
</html>

运行结果如下：

6.1.6 align-content

修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线

代码如下：

<!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: 300px;
height: 350px;
background-color: orange;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.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>

运行结果如下：