传统布局方式

最新推荐文章于 2024-08-08 15:02:59 发布

小露最可爱

最新推荐文章于 2024-08-08 15:02:59 发布

阅读量50

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/2201_75534982/article/details/130128227

版权

2.2、relative、absolute代码实例

一、浮动布局

1.1、属性介绍

float是最开始出现的一种布局方式，帮助程序员处理一些简单的布局。

属性float有以下属性值：

属性值	效果说明
none	默认值
left	元素向左浮动
right	元素向右浮动
inherit	规定应该从父元素继承 float 属性的值

1.2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            
        }
        .main div{
            width: 70px;
            height: 70px;
            float: right;
        }
        
    </style>
</head>
<body>
    <div class="main">
        <div style="background-color: orange;"></div>
        <div style="background-color: deepskyblue;"></div>
        <div style="background-color: greenyellow;"></div>
    </div>
</body>
</html>

二、绝对定位布局

2.1、属性介绍

position定位允许的是从正常的文档流布局中取出元素，并使它们具有不同的行为

属性position有以下属性值：

属性值	效果说明
static	默认值，无效果
relative	相对定位，相对于其正常位置
absolute	绝对定位，相对于其父元素
fixed	绝对定位，相对于其浏览窗口
inherit	规定应该从父元素继承 position 属性的值。

其中relative、absolute、fixed通常用以下属性定位

属性名	效果说明
top	顶部，默认单位：像素px
bottom	底部，默认单位：像素px
left	左，默认单位：像素px
right	右，默认单位：像素px

relative通常与absolute搭配使用，父元素设置relative，子元素absolute。

图层显示优先级用z-index设置

属性名	效果说明
z-index	设置元素显示优先级，属性值为数值，值越大越上层

2.2、relative、absolute代码实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
            left: 200px;
        }
        .main div{
            width: 70px;
            height: 70px;
            position: absolute;
        }
        #p1{
            background-color: orange;
            left: 0;
            top: 0;
        }
        #p2{
            background-color: deepskyblue;
            right: 0;
            top: 0;
        }
        #p3{
            background-color: greenyellow;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
    </div>
</body>
</html>

2.3、fixed代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        body{
            background-color: black;
            height: 2000px;
            width: 100%;
        }
        div{
            width: 50px;
            height: 50px;
            background-color: white;
            position: fixed;
            top: 300px;
            left: 300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三、弹性盒子布局

弹性盒子是一种用于按行或者按列布局元素的一维布局方法。元素可以膨胀以填充额外空间，也可收缩以适应更小的空间。

将一个容器元素设置为弹性盒子只需要设置display元素为: flex || inline-flex。

同时可以为弹性盒子设置以下属性：

属性名	效果说明
flex-direction	规定弹性项目的方向。
flex-wrap	规定弹性项目是否应换行。
flex-flow	flex-direction与flex-wrap的简写
align-items	为弹性容器内的项目指定默认对齐方式（横）
justify-content	为弹性容器内的项目指定默认对齐方式（纵）
align-content	属性修改flex-wrap属性的行为。它与align-items相似，但是它不对齐弹性项目

3.1、flex-direction

3.1.1、属性说明

flex-direction 属性规定弹性项目的方向。ps:若元素不是弹性盒子，则属性无效

flex-direction有以下属性值：

属性值	效果说明
row	默认值，作为行
row-reverse	作为行，方向相反
column	作为列
column-reverse	作为列，方向相反
initial	将此属性设置为其默认值
inherit	从其父元素继承此属性

3.1.2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            display: flex;
            flex-direction: row-reverse;
        }
        .main div{
            width: 70px;
            height: 70px;
        }
        #p1{
            background-color: orange;
        }
        #p2{
            background-color: deepskyblue;
        }
        #p3{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
    </div>
</body>
</html>

3.2、flex-wrap

3.2.1、属性说明

flex-wrap 属性规定弹性项目是否换行。ps:若元素不是弹性盒子，则属性无效。

flex-wrap有以下属性值：

属性值	效果说明
nowrap	默认值，不换行
wrap	需要时换行
wrap-reverse	需要时换行，但是反方向
initial	将此属性设置为其默认值
inherit	从其父元素继承此属性

3.2.2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            display: flex;
            flex-wrap: wrap;
        }
        .main div{
            width: 70px;
            height: 70px;
            background-color: black;
        }
        #p1{
            background-color: orange;
        }
        #p2{
            background-color: deepskyblue;
        }
        #p3{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

3.3、flex-flow

3.3.1、属性说明

flex-flow 属性是flex-direction和flex-wrap的缩写

基本格式为：flex-flow: [flex-direction flex-wrap] or [initial] or [inherit];

属性值效果与flex-direction、flex-wrap一致。

3.3.2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            display: flex;
            flex-flow: column wrap;
        }
        .main div{
            width: 70px;
            height: 70px;
            background-color: black;
        }
        #p1{
            background-color: orange;
        }
        #p2{
            background-color: deepskyblue;
        }
        #p3{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

3.4、align-items

3.4.1、属性说明

align-items属性为弹性容器内的项目指定默认对齐方式（横）。

align-items有以下属性值：

属性值	效果说明
stretch	默认、项目被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的开头
flex-end	项目位于容器的末端
baseline	项目被定位到容器的基线
initial	将此属性设置为其默认值
inherit	从其父元素继承此属性

3.4.2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            display: flex;
            align-items: center;
        }
        .main div{
            width: 70px;
            height: 70px;
            background-color: black;
        }
        #p1{
            background-color: orange;
        }
        #p2{
            background-color: deepskyblue;
        }
        #p3{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
    </div>
</body>
</html>

3.5、justify-content

3.5.1、属性说明

justify-content属性为弹性容器内的项目指定默认对齐方式（纵）。

justify-content有以下属性值：

属性值	效果说明
flex-start	默认值、项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器中央
space-between	项目在行与行之间留有间隔
space-around	项目在行之前、行之间和行之后留有空间
initial	将此属性设置为其默认值
inherit	从其父元素继承此属性

3.5.2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .main div{
            width: 70px;
            height: 70px;
            background-color: black;
        }
        #p1{
            background-color: orange;
        }
        #p2{
            background-color: deepskyblue;
        }
        #p3{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
    </div>
</body>
</html>

3.6、align-content

3.6.1、属性说明

align-content属性修改flex-wrap属性的行为。它与align-items相似，但是它不对齐弹性项目，而是对齐弹性线。ps：必须有多行项目，否则此属性将失效。

align-content有以下属性值：

属性值	效果说明
stretch	默认值、行拉伸以占据剩余空间
center	朝着弹性容器的中央对行打包
flex-start	朝着弹性容器的开头对行打包
flex-end	朝着弹性容器的结尾对行打包
space-between	行均匀分布在弹性容器中
space-around	行均匀分布在弹性容器中，两端各占一半

3.6.2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .main{
            width: 300px;
            height: 300px;
            background-color: red;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .main div{
            width: 70px;
            height: 70px;
            background-color: black;
        }
        #p1{
            background-color: orange;
        }
        #p2{
            background-color: deepskyblue;
        }
        #p3{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="p1"></div>
        <div id="p2"></div>
        <div id="p3"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

小露最可爱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
传统布局方式

float是最开始出现的一种布局方式，帮助程序员处理一些简单的布局。属性值效果说明none默认值left元素向左浮动right元素向右浮动inherit规定应该从父元素继承 float 属性的值position定位允许的是从正常的文档流布局中取出元素，并使它们具有不同的行为属性值效果说明static默认值，无效果relative相对定位，相对于其正常位置absolute绝对定位，相对于其父元素fixed绝对定位，相对于其浏览窗口inherit规定应该从父元素继承。
复制链接

扫一扫