布局方式总结

璀云霄

已于 2023-04-16 04:29:25 修改

阅读量87

点赞数

文章标签： css

于 2023-04-16 04:26:51 首次发布

本文链接：https://blog.csdn.net/CloudyZfly/article/details/130177777

版权

浮动布局

float 属性

功能：用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

clear属性

功能：用于指定元素可以浮动于被清除元素的旁边以及哪一侧。

最常见用法是在元素上使用了float属性之后。

可以设置以下值之一：

none - 元素不会被向下移动以清除浮动。默认值
left - 元素被向下移动以清除左浮动
right- 元素被向下移动以清除右浮动
both - 元素被向下移动以清除左右浮动
inherit - 元素继承其父级的 clear 值
inline-start - 元素被向下移动以清除其包含块的起始侧浮动
inline-end - 元素被向下移动以清除其包含块的结束侧浮动

例：

<style>

        .box {

width: 500px;

height: 500px;

border: 1px solid black;

}

.box1 {

width: 200px;

height: 200px;

border: 1px solid black;

background-color: red;

float: right;

}

.box2 {

width: 200px;

height: 200px;

border: 1px solid black;

background-color: blue;

/* float: right;

clear: both;*/

}

.box3 {

width: 200px;

height: 200px;

border: 1px solid black;

background-color: green;

float: left;

}

</style>

......

<body>

        <div class="box">

          <div class="box1">这是第一个div</div>

          <div class="box2">这是第二个div</div>

          <div class="box3">这是第三个div</div>

        </div>

</body>

没有clear属性，此处针对box2（float：right；）：

clear：both；

定位布局

position属性

功能：定义建立元素布局所用的定位机制。

有以下几个值：

absolute	生成绝对定位的元素，通过此属性值可以将元素放置到页面上的任何位置。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置（如div块元素）进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

例：

<!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: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 100px;
        }

        .box1 {
            top: 500px;
            left: 300px;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
            position: fixed;
        }

        .box2 {
            left: 200px;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: blue;
            /*相对位置*/
            position: relative;
        }

        .box3 {
            left: 200px;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: green;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="div">
        <div class="box1">这是第一个div</div>
        <div class="box2">这是第二个div</div>
        <div class="box3">这是第三个div</div>
    </div>
</body>

</html>

效果展示：

PS：2号和3号分别为相对和绝对位置，前者是距离左侧黑色边框200px；后者则是距离浏览器左边框200px。

且由此看出，fixed属性值的位置规定和绝对位置是相同的

盒子布局

border ----- 边框
padding ----- 内边距------内容距离边框的距离
margin ------外边距 ------ 边框距离页面的距离

以上三种属性均可以按照顺时针（上右下左）的顺序来定义元素的位置；

若只有一个或者两个值，则直接规定四个方向的间距以及上下和左右方向的间距

除此之外它们还有以下属性：

border属性

*border-width*	规定边框的宽度。有细thin 中等medium 粗thick三个属性，也可以直接用数值表示。顺序为顺时针（上右下左），也可以用一个值全局设置宽度或者两个值设置上下和左右边框 PS：必须保证边框样式不为none是才有效
*border-style*	规定边框的样式。有点状线dotted 实线solid 双线double 虚线dashed和无样式none五个常用属性
*border-color*	规定边框的颜色。
inherit	规定应该从父元素继承 border 属性的设置。

效果：

margin属性&padding属性

两者均由以下四种属性：

auto	浏览器计算边距。
*length*	规定以具体单位计的边距值，比如像素、厘米等。默认值是 0px。
%	以包含元素宽度的百分比指定边距。
inherit	规定应该从父元素继承边距。

除此之外，两者均可以有1~4个数值，分别有以下含义：

1个值：表示全局设定四个方向的边距

2个值：先后分别表示上下和左右方向的边距

3个值：先后分别表示上；左右；下方向的边距

4个值：按顺时针（上右下左）的方向表示对应边距

它们同时可以在后面加上-top；-bottom；-left；-right 这四个后缀来表示对应方向的边距，

和上面的方式有相同的效果。

弹性盒子

弹性盒子是由弹性容器（Flexible或者Flexbox）和弹性元素(Flex-item)组成的
PS：一个弹性容器可以包含多个弹性元素

flexbox模型（弹性容器）

如果需要使用 Flexbox 模型，您需要首先定义 Flex 容器

弹性容器是通过display属性进行设置的

有flex和inline-flex两种属性值

display属性

功能：用于定义建立布局时元素生成的显示框类型

有以下几种常用属性：

none	此元素不会被显示。
flex	此元素将显示为弹性元素，会根据弹性容器的大小来改变元素的大小。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认值。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。
inline-flex	行内弹性元素。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。

弹性项目

PS：以下属性均要为弹性项目才能起作用，否则无效

flex- direction ------ 指的是弹性容器中子元素的排列方式
flex-wrap ----- 指的是弹性容器中子元素超出父容器时是否换行
flex-flow ----- flex- direction 和flex-wrap 的简写
justify-content ----- 设置的弹性容器中元素在主轴（横轴）的对齐方式
align-items ----- 设置的弹性容器中元素在侧轴（纵轴）的对齐方式
align-self ----- 指定弹性容器内所选项目的对齐方式，会覆盖align-items属性
align-content ----- 修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
flex-grow ----- 规定在相同的容器中，项目相对于其余弹性项目的增长量
flex-shrink ----- 规定在相同的容器中，项目相对于其余弹性项目的增长量
flex-basis ----- 规定弹性项目的初始长度
order ----- 规定弹性项目相对于同一容器内其余弹性项目的顺序

flex-direction属性

功能：定义容器要在哪个方向上堆叠 flex 项目

row

默认值。水平显示弹性项目

column

垂直显示弹性项目

row-reverse

column-reverse

在水平和垂直排列的基础上按相反的顺序进行排列

flex-wrap属性

功能：规定 flex 项目将在必要时进行换行

nowrap	默认值。规定弹性项目不会换行
wrap	规定弹性项目在需要时换行
wrap-reverse	规定弹性项目在需要时以项目相反的顺序（逆序）换行

flex-flow属性

功能：同时设置 flex-direction 和 flex-wrap 属性的简写属性

规定两个值，前后分别为方向和是否换行，属性值对应上方七个值

justify-content属性

功能：用于水平对齐 flex 项目

flex-start	默认值。项目位于容器开头
center	项目位于容器中央
flex-end	项目位于容器末端
space-between	项目与项目之间留有间隔
space-around	项目在前后以及两个项目之间留有间隔也就是说两个项目之间的间隔为两倍前或后间隔

align-items属性

功能：用于垂直对齐 flex 项目

stretch	默认值。项目被拉伸以适应容器
flex-start	项目位于容器开头
center	项目位于容器中央
flex-end	项目位于容器末端
baseline	项目位于容器的基线

align-self属性

功能：指定弹性容器内所选项目的对齐方式

注意：align-self 属性将覆盖弹性容器的align-items属性

auto	默认值。元素继承其父容器的 align-items 属性，如果没有父容器，则为 "stretch"。
stretch	元素被拉伸以适应容器。
center	元素位于容器的中央。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的末端。
baseline	元素被定位到容器的基线。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

align-content属性

功能：用于对齐弹性线

stretch	默认值。拉伸弹性线以占据剩余空间
flex-start	在容器开头显示弹性线
center	在容器中间显示弹性线
flex-end	在容器末端显示弹性线
space-between	弹性线在项目之间带有空格
space-around	弹性线在项目之前、之间和之后带有空格

flex-grow属性

功能：规定在相同的容器中，项目相对于其余弹性项目的增长量

*number*	数字值，规定该项目相对于其余弹性项目的增长量的倍数。默认值为 0。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

例：让第二个弹性项目的宽度成为其余弹性项目的三倍

<style>

        .box{

          width : "350px" ;

          height : "100px" ;

          border : 1px solid black ;

          display : flex ;

        }

                div : nth-of-type(1) {flex-grow: 1;}

                div : nth-of-type(2) {flex-grow: 3;}

                div : nth-of-type(3) {flex-grow: 1;}

                div : nth-of-type(4) {flex-grow: 1;}

                div : nth-of-type(5) {flex-grow: 1;}

</style>

flex-shrink属性

功能：规定在相同的容器中，项目相对于其余弹性项目的收缩量

*number*	数字值，规定项目相对于其余弹性项目的收缩量。默认值为 1。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

例：使第二个弹性项目相比其余项目收缩三倍

相较于flex-grow属性的效果

flex-basis属性

功能：规定弹性项目的初始长度

*number*	长度单位或百分百，规定弹性项目的初始长度。
auto	默认值。长度等于弹性项目的长度。如果该项目未规定长度，则长度将依据其内容。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

例：

<style>

        .box {

          width : 300px ;

          height : 100px ;

          border : 1px solid black ;

          display : flex ;

        }

.box div {

flex-grow : 0;

flex-shrink : 0;

flex-basis : 50px;

        }

.box div : nth-of-type(2) {

                flex-basis : 100px;

        }

</style>